Inserting audio - HTML5 - page 217

All is not pitch perfect with the <audio> tag, however: different browsers support different file for-
mats. Table 24-1 contains a breakdown of the current state of audio format support.

TabLe 24-1: HTML5 Browser Support for Audio Formats

browser MP3 suPPorT waV suPPorT oGG Vorbis suPPorT

Google Chrome Yes no Yes

Opera

no Yes Yes

Safari Yes Yes no

Firefox no Yes Yes

Internet Explorer (9 Beta) Yes Yes no

As you can see, no format enjoys universal support as yet. Happily, the <audio> tag was designed to
handle this situation by making use of the <source> tag. Currently, to support all of the major browsers,
you'd need to offer at least two of the formats, like MP3 and Ogg Vorbis, with code like this:

<audio controls=”controls”>
<source src=”assets/mySong.ogg” type=”audio/ogg” />
<source src=”assets/mySong.mp3” type=”audio/mpeg” />
</audio>

When the browser encounters this code, it displays the controls and tries to play the first source file
in the Ogg Vorbis format. If that format is not supported, it moves to the second format, MP3. You
can include as many <source> tags as needed to cover your desired browser range. The type attri-
bute assists the browser by identifying the proper MIME type for each format. Should the browser
not support any of the formats, you can even include a link so the user can download the song:

<audio controls=”controls”>
<source src=”assets/mySong.ogg” type=”audio/ogg” />
<source src=”assets/mySong.mp3” type=”audio/mpeg” />
<a href=”assets/mySong.mp3”>Download</a>
</audio>

Converting audio files from one format to another requires dedicated soft-
ware like Adobe Soundbooth or an online application like the one found at
http://media.io/ . T The Media.IO converter allows you to set the quality
(which also determines file size) as well as re-create files in the major audio
formats. Best of all, it's free.

Two other <audio> tag attributes are worth mentioning: loop and preload . As you might suspect,
including the loop attribute causes the audio file to start over once it is completed. This attribute is
added with code such as this, bolded for emphasis:

<audio id=”mySong” src=”../assets/fb_demo_song.mp3” autoplay=”autoplay”
loop=”loop” ></audio>