HTML and CSS Reference
In-Depth Information
Table 8-1.
Audio codec support
Browser
MP3
Vorbis
IE 9
Yes
No
Firefox 4
No
Yes
Chrome 6
Yes
Yes
Safari 5
Yes
No
Opera 10.6
No
Yes
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>
</audio>
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.
Caution
