HTML and CSS Reference
Table 8-1. Audio codec support
As you can see from this table, no single format is supported by all browsers. However, if you support both
MP3 and Vorbis, your page will work in almost all browsers (IE8 and below do not support the audio element). To
do this you'll need to first encode your audio clip in both formats. Fortunately, there are several free utilities that
you can use to convert from one format to another.
The audio element allows you to specify multiple sources and the browser will iterate through the sources
until it finds one that it supports. Instead of using a src attribute, you'll provide one or more source elements
within the audio element, like this:
<audio autoplay controls>
<source src="~/Media/Linus and Lucy.ogg" />
<source src="~/Media/Linus and Lucy.mp3" />
<p>HTML5 audio is not supported on your browser</p>
The browser will use the first source that is supports so if it matters to you, the preferred file should be listed
first. For example, Chrome supports both formats. If you prefer that the MP3 file be used, you should list it before
the . ogg file.
While just listing the sources like this will work, the browser must download the file and open it to see if it is
able to play it. That's not very efficient to download a fairly large file only to find out it can't be used. You should
also include the type attribute, which specifies the type of resource this is. The browser can then determine if the
file is supported by looking at the markup. The type attribute specifies the MIME format like this:
<source src="~/Media/Linus and Lucy.ogg" type="audio/ogg" />
<source src="~/Media/Linus and Lucy.mp3" type="audio/mp3" />
You can also specify the codec in the type attribute like this:
<source src="~/Media/Linus and Lucy.ogg" type='audio/ogg; codecs="vorbis"' />
Notice that the codecs value(s) are included within double-quotes so you'll need to use single-quotes
around the type attribute value. Now you'll modify your web page so it will work on other browsers as well.
■ In Safari, the audio and video support is implemented by the QuickTime plugin. If you don't have this
installed, you'll see the “HTML5 audio is not supported on your browser” text displayed. You can install QuickTime
from this site: http://www.apple.com/quicktime . The instructions did not say so, but I've found that I needed
to reboot my machine before this worked properly. I also found a few quirks when testing on Safari.