What I want to do is to embed music files within a website (Have something a'la little mp3 player on the site). I want the audience to be able to play, stop etc the songs by using custom made controllers.
How do I code those custom made buttons so that they all work fine?
This question is tagged with
~ Asked on 2012-04-06 09:41:03
You can use plenty of things.
<audio controls> <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type='audio/mp4'> <!-- The next two lines are only executed if the browser doesn't support MP4 files --> <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type='audio/ogg; codecs=vorbis'> <!-- The next line will only be executed if the browser doesn't support the <audio> tag--> <p>Your user agent does not support the HTML5 Audio element.</p> </audio>
Or, if you want to support older browsers, you can use many of the free audio flash players available. Such as:
Note: I'm not sure which are the best ones, as I have never used one (yet).
UPDATE: As mentioned in another answer's comment, you are using XHTML 1.0 Transitional. You might be able to get
<audio> to work with some hack.
UPDATE 2: I just remembered another way to do play audio. This will work in XHTML!!! This is fully standards-compliant.
var aud = document.createElement("iframe"); aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path aud.setAttribute('width', '1px'); aud.setAttribute('height', '1px'); aud.setAttribute('scrolling', 'no'); aud.style.border = "0px"; document.body.appendChild(aud);
UPDATE 3: To customise the controls, you can use something like this.
~ Answered on 2012-04-06 10:11:06
Definitely the HTML5 element is the way to go. There's at least basic support for it in the most recent versions of almost all browsers:
And it allows to specify what to do when the element is not supported by the browser. For example you could add a link to a file by doing:
<audio controls src="intro.mp3"> <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a> </audio>
You can find this examples and more information about the audio element in the following link:
Finally, the good news are that mozilla's April's dev Derby is about this element so that's probably going to provide loads of great examples of how to make the most out of this element:
~ Answered on 2012-04-06 10:11:30