twitter rss feed

html5 laboratory

Playing with audio files

The experiment

One of the major new changes in HTML5 is the providing of native audio within the browser. Previously, to play any type of audio file within a browser, Adobe Flash™ or another plugin was required. HTML5 aims to address this by specifying the <audio> tag. Of course current browser support for this tag varies from one to the next, but here we will look at how to use this new element whilst also looking at how browsers currently support it.

The process

First of all, let us look at the <audio> element itself. Currently, the HTML5 spec. defines five attributes for this element:

  • src — a valid URL to the sound file itself
  • autobuffer — a boolean indicating whether the file should be buffered in advance
  • preload — specifies if the audio is to be preloaded or not. Possible values:
    • auto — loads the entire audio file when the page loads
    • meta — only load the audio files meta data when the page loads
    • none — don't load the audio file when the page loads
  • autoplay — a boolean indicating whether the file should be played automatically
  • loop — a boolean indicating whether the file should be played repeatedly
  • controls — a boolean indicating that the default media controls should be displayed by the browser

So, the following code would play (depending on your browser!) the sound file anyone-there.mp3 automatically, whilst also displaying the media controls:

<audio src="anyone-there.mp3" autoplay controls></audio>

Simple enough, but which browsers does this actually work in? The table below illustrates this:

Browser MP3 WAV OGG AU
Firefox 3.6.8NYYN
Chrome 5YNYN
Safari 5YYNN
Opera 10.60NYYN
Internet Explorer (<=8)NNNN
Internet Explorer 9YNNN
iPhoneYYNN
AndroidNNNN

So how can you code around the browser limitations in their support of the <audio> element? To help you with this there is another element, the <source> element. Providing a list of audio sources causes the browser to try each one until it find one that it can play. In addition to this, you can embed a Flash™ player if all else fails.

<audio autobuffer controls>
	<source src="anyone-there.ogg">
	<source src="anyone-there.mp3">
	<source src="anyone-there.wav">
	<source src="anyone-there.au">
	<!-- Flash fall back -->
</audio>

Note: there is a bug in Firefox with regards to the MP3 format. If this is listed first, it will fail and refuse to attempt the other sources, so in this case the ordering is important

The results

Of course all this points at the fact that the <audio> element isn't really very well supported by most browsers and cannot be relied upon to provide every user with a means of playing an audio file. As well as the Flash™ fall back, you can also use JavaScript (e.g. for Opera) to play the file.

All of this points at the necessity to create different solutions for different browsers in order to take advantage of the varied support for the <audio> element. So how how can you check the capabilites of the browser that your page is being viewed in? Well the guys over at HTML5 Doctorhave created a HTML5 audio checker which can be used to check the browser's audio capabilities. Examples of how to use this can be found on native audio in the browser over at HTML5 Doctor. Ultimately, to create a solution that takes full advantage of HTML5 audio, you need to:

  1. Check for HTML5 audio support, and provide a Flash™ fallback
  2. Check the level of HTML5 audio support and adapt your code for each browser
  3. Check what file types are supported and link to appropriate formats of the audio files — this of course means that you should provide each audio file in the various formats that can be supported

I've created a script based solution that basically checks the browers audio playing abilities, and resorting to Flash™ if it either has no native audio support whatsoever (e.g. Internet Explorer) or JavaScript is turned off. You probably won't want all of this example, just bits of it, but it basically shows you how it can be done.

Feel free to test this yourself.

<script>
var audioTagSupport = !!(document.createElement('audio').canPlayType);
if (audioTagSupport) {
  // Use HTML5 audio element
  document.write("<audio autobuffer controls>");
  document.write("<source src='f/anyone-there.ogg'>");
  document.write("<source src='f/anyone-there.wav'>");
  document.write("<source src='f/anyone-there.au'>");
  document.write("<source src='f/anyone-there.mpw'>");
  document.write("</audio>");
}
else {
  try {
    audioObj = new Audio("");
    audioObjSupport = !!(audioObj.canPlayType);
    basicAudioSupport = !!(!audioObjSupport ? audioObj.play : false);
  } catch(e) {
    audioObjSupport = basicAudioSupport = false;
  }
  if (audioObjSupport || basicAudioSupport) {
    // Create audio object and way to play it
    var audio = new Audio("f/anyone-there.wav");
    document.write("<a href='' onclick='audio.play();return false'>play sound</a>");
  }
  else {
  // Flash
  document.write("<embed type='application/x-shockwave-flash' src='http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=f/anyone-there.mp3' width='400' height='27' allowscriptaccess='never' quality='best' bgcolor='#ffffff' wmode='window' flashvars='playerMode=embedded' />");
  }
}
</script>
<noscript>
  <embed 
    type="application/x-shockwave-flash" 
    src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=f/anyone-there.mp3" 
    width="400" height="27" allowscriptaccess="never" quality="best" 
    bgcolor="#ffffff" wmode="window" 
    flashvars="playerMode=embedded" 
  />
</noscript>