It’s pretty well supported in the “modern browsers” (see compatibility chart), but there are a couple glitches.
This is the basic audio tag that I could get to work in any browser:
<audio src="location-of-file.mp3" controls="controls"> </audio>
It didn’t work in Firefox at first, so I had to specify the .ogg (open source) format for that browser. Without line 2 in the code snippet below, it won’t work in Firefox 3.x (not tested in Firefox 5+). I used this handy little .mp3 to .ogg converter to generate the .ogg file, and voila, it was done.
I expanded the audio tag to include multiple file types:
1 2 3 4
<audio controls="controls"> <source src="location-of-file.ogg" type="audio/ogg" /> <source src="location-of-file.mp3" type="audio/mpeg" /> </audio>
Notice that you don’t have to know which browsers support what formats, and then sniff the user agent string for the browser name to decide what to do. Just list your available media, preferred format first, second choice next, and so on. The browser plays the first one it can. Generally speaking, if you provide media in MPEG-4 (basic profile) and Ogg formats, your media can play in browsers that support HTML5. (Notes from the Apple developer library)
To include non-compliant browsers, I added a fallback message:
1 2 3 4 5 6
<audio controls="controls"> <source src="location-of-file.ogg" type="audio/ogg" /> <source src="location-of-file.mp3" type="audio/mpeg" /> <!-- fallback content --> Your browser does not support the audio player. <a href="location-of-file.mp3">Download the mp3</a> or use the latest Firefox, Safari or Chrome browsers. </audio>
- Controls: Turn the player controls on in the browser. I had to include this to get it to work in any browser.
- Source: The file type (audio/mpeg or audio/ogg) and the location of the file on your web server.
- Verbiage: “Your browser does not support…” is displayed for non-compliant browsers instead of the player.
Note, in a few browsers, the file is preloaded in the background immediately after page load. For one or two files on a page, this usually isn’t a problem. To turn off this feature, specify preload=”none”, however, some browsers ignore that, like Safari and Chrome. Preload is also ignored if autoplay is specified. To be sure which browsers to which at any given time, double check them at the time of your implementation.
One other glitch in Firefox is the player jumps down what looks like one full player height when clicking on the play button, but I haven’t found a solution to that.
The other HTML5 media tag is video. The only difference between the audio & video tag attributes is the option to specify a height, width, and poster image for video. See full description of the HTML5 audio and video tags.