HTML5 and CSS3, Second Edition

Figure 21—The audio players in Chrome

Falling Back

Audio fallback support is built into the element itself. We’ve defined multiple

sources for our audio using the <source> tag and have provided links to

download the audio files. If the browser cannot render the <audio> element,

it will display the link we’ve placed inside the field. We could even go a step

further and use Flash as a fallback after we define our sources.

However, this might not be the best approach. You may encounter a browser

that supports the <audio> tag but doesn’t support the formats you’ve supplied.

For example, you may decide it’s not worth your time to provide audio in

multiple formats. Additionally, the HTML5 specification indicates that the

fallback support for <audio> is not to be used to place content that would be

read by screen readers.

The simplest solution is to move the download link outside the <audio> tag

and use JavaScript to hide it, like this:

html5_audio/advanced_audio.html

<articleclass="sample">

<header><h2>Drums</h2></header>

<audioid="drums"controls>

<sourcesrc="sounds/ogg/drums.ogg"type="audio/ogg">

<sourcesrc="sounds/mp3/drums.mp3"type="audio/mpeg">

</audio>

<ahref="sounds/mp3/drums.mp3">Downloaddrums.mp3</a>

</article>

report erratum • discuss

Working with Audio • 139

Download from Wow! eBook <www.wowebook.com>