HTML and CSS Reference
In-Depth Information
<audio src="audio/snikt.mp3" controls
preload
></audio>
That all seems easy enough, and it is, except for one significant problem: browsers don't all agree on
which audio formats they support.
The most popular and ubiquitous audio format is MP3 (short for MPEG layer 3), which is patent-
encumbered. Safari, Chrome, and IE will play MP3 audio, but Firefox and Opera won't. Ogg Vorbis is a
free and open audio format, supported by Firefox, Opera, and Chrome, but not by Safari or IE (note that
Chrome supports both MP3 and Ogg Vorbis). The unfortunate consequence of all this format and codec
and patent business is that to reach the majority of web users, you'll have to offer your audio in at least two
formats.
The
audio
element may contain one or more
source
elements, like you see in Listing 5-3, each pointing
to a different audio source (you'll find more detail on the
source
element elsewhere in this chapter). A
browser will play the first audio source it supports and will simply ignore the rest, and if it doesn't support
any of the offered formats it will play nothing. This lets you offer the same piece of audio in both MP3 and
Ogg Vorbis formats, covering the majority of browsers on the market.
Listing 5-3.
An
audio
element offering the same sound in two file formats
<audio controls preload="none">
<source src="audio/thooom.ogg" type="audio/ogg">
<source src="audio/thooom.mp3" type="audio/mpeg">
</audio>
This still doesn't address the problem of older browsers that don't support HTML5 embedded audio at all.
For them, you can still offer a Flash-based player using tried and true plug-in embedding, something like
you see in Listing 5-4 (you'll meet the
object
and
param
elements later in this chapter).
Listing 5-4.
An
audio
element with a Flash fallback for older browsers
<audio controls preload="metadata">
<source src="audio/Townsville.ogg" type="audio/ogg">
<source src="audio/Townsville.mp3" type="audio/mpeg">
<object data="flash/audio-player.swf?soundFile=audio/Townsville.mp3"
width="250" height="25" type="application/x-shockwave-flash">
<param name="movie" value="flash/player.swf?soundFile=audio/Townsville.mp3">
</object>
</audio>
Browsers that don't support the
audio
element will simply ignore it, and, assuming they have the Flash
plug-in installed, will instead embed the plug-in player. And for browsers that support neither HTML5 audio
nor Flash, you can at least provide an ordinary text link to download the file directly by including some
plain HTML content inside the
object
element, offering a fallback within a fallback:
<audio controls preload="metadata">
<source src="audio/Townsville.ogg" type="audio/ogg">
<source src="audio/Townsville.mp3" type="audio/mpeg">
<object data="flash/audio-player.swf?soundFile=audio/Townsville.mp3"
width="250" height="25" type="application/x-shockwave-flash">
