The HTML5 audio tag


The new HTML5 <audio> tag provides a pretty easy way to embed audio into a webpage without needing to use flash:

  1. <audio controls>
  2. <source src="/my-podcast.mp3" />
  3. <source src="/my-podcast.ogg" />
  4. </audio>

Browser support for the tag itself is pretty decent, but you’ll need to create a mp3 and ogg version of your audio if you want it to play in all browsers. You can also provide a fallback for older browsers.

The built-in browser UI is pretty consistent and looks decent enough, but if you need something special it’s very easy to use javascript to control the <audio> element.

The audio tag

A simple <audio> tag (that doesn’t worry about cross browser compatibility) looks like this:

  1. <audio src="/my-podcast.mp3" controls preload="none" />

src – the url of the audio to play. In reality, if you want your audio to work in as many browsers as possible, you will need to set the media files in the <source> tags to provide both .mpg and .ogg versions of the content.

controls – if this attribute is present (even if it is set to false), the browser will render an element to control your audio. If you set this to false, no element will be rendered and you will need to use javascript to control your video.

Here are the default controls in Chrome:

preload (none, metadata, auto) – whether the browser should start downloading the audio as soon as the page loads. If the audio is the whole point of the page it’s on, it might make sense to do it. If not, you can tell the browser to save the bandwidth. Of course having preload turned on will affect your bandwidth costs as much as it will affect your users.

Setting preload to none tells the browser not to preload at all. Metadata suggest that the browser just download enough of the file to find out things like dimensions, running length and size. Auto lets the browser know that it can do whatever it thinks will be best for the user, which might include preloading the whole file.

Sadly if you use this right now, setting preload=”none” causes issues in IE9. It will add the audio element to the page, but won’t display any controls for it.

For more information checked out the Mozilla or MSDN references. There are a heap of extra properties that are useful for interacting with audio element through javascript.

Different browsers need different formats

While support for the tag itself is pretty solid across browsers, there (predictably) isn’t one audio format that all browsers support:

IE Firefox Chrome Safari Opera
mp3 Yes No Yes Yes No
ogg No Yes Yes No Yes
wav No Yes No Yes Yes

So to make an <audio> element that will work in all browsers, you’ll need to provide your file in at least two formats. I’ve found .ogg and .mp3 work pretty well. You can use the <sources> tag to provide a link to the audio file in both formats. The browsers will just look through all the sources provided and choose the one it thinks is best:

  1. <audio controls>
  2.    <source src="/my-podcast.mp3" />
  3.    <source src="/my-podcast.ogg" />
  4. </audio>

This might be a good reason to keep using flash for developers who are less concerned about supporting open standards and don’t need to support mobile browsers. Encoding the audio in two formats definitely adds a little overhead to my podcast workflow.

Providing a fall back for older browsers

Older browsers don’t understand the <audio> tag so you can provide a fallback just by adding extra HTML inside the <audio> tag. Browsers that support <audio> will just ignore the fallback content, while browsers that don’t support <audio> will ignore the audio tag.

  1. <audio controls>
  2.    <source src="/my-podcast.mp3" />
  3.    <source src="/my-podcast.ogg" />
  4.    <a href="/my-podcast.mp3">download my podcast</a>
  5. </audio>

One option is to use a Flash player as a fallback. Since Flash will play on pretty much any browsers except the iPhone, the only advantage of using the <audio> tag as with a Flash player fallback (apart from the warm glow of supporting open standards) is your audio will also play in iPhone Safari.

Audio controls in the different browsers

If you decide to use the built in browser controls, the UI between browsers is pretty similar and fine for just including a simple audio file in your site.

Firefox:

Chrome:

Safari:

Internet explorer:

iPhone Safari:

To use the built in browser controls, just add the controls attribute to the <audio> tag:

  1. <audio src="/my-podcast.mp3" controls />

Building custom controls using javascript

If you don’t fancy the built in browser controls, it’s easy enough to control the audio tag using javascript:

  1. var audio = new Audio();
  2. if(audio.canPlayType("audio/mp3"))
  3.    audio.src = "/my-podcast.mp3";
  4. else if(audio.canPlayType("audio/ogg"))
  5.    audio.src = "/my-podcast.ogg";
  6. audio.play();

Complete example

For more advanced audio manipulation, check out the experimental Audio data API.

Browser support

Once you get the audio formats right, desktop browsers have pretty good support for the audio tag. Even IE 9+ supports it!

Browser Supported since version Formats Details
IE 9.0 AAC or .mp3 MSDN
Firefox 3.5 .ogg, .wav MDN
Chrome 3 .mp3, .ogg
Safari 4 Any audio supported by Quicktime
(m4a, .m4b, .m4p, .mp3, .aiff, .au, .sd2, .wav, .snd, .amr)
Safari docs
Opera 9.5 .ogg, .wav

Mobile browser have pretty good support too:

Browser Supported since version
iOS Safari 4
Opera mobile 10
Opera mini no support (Dec 2011)
Android 2.3
Blackberry 6
Posted on 29 Dec 11 by Helen Emerson (last updated on 14 Jul 12).
Filed under html5, Web development