HTML and CSS Reference
In-Depth Information
If different browsers require different file types, how can you support
multiple browsers with a single
src
attribute?
HTML5
anticipates this
issue and provides an easy mechanism for providing the correct source
to each browser. Let's look at that in the next section.
Using multiple sources
As you've just seen, you need to be able to provide different audio files
to different browsers. But each
<audio>
element only allows you a single
src
attribute, so how can you manage that? The design of the
<audio>
element has anticipated this requirement. Multiple sources can be pro-
vided for the
<audio>
element by using the
<source>
element:
<audio id="myaudio" controls>
<source src="myaudio.mp3" type="audio/mp3">
<source src="myaudio.ogg" type="audio/ogg">
No audio support!
</audio>
The following tables list the common file extensions and
MIME
types
for audio.
Audio type
File extensions
MIME types
MP3
.mp3
audio/mpeg
MP4
.m4a, .m4b, .m4p, .m4v,
.m4r, .3gp, .mp4, .aac
audio/mp4
audio/aac
OGG
.ogg, .oga
audio/ogg
WebM
.webm
audio/webm
WAVE
.wav
audio/wave (preferred)
audio/wav
audio/x-wav
audio/x-pn-wav
Browsers are expected to scan the list of
<source>
elements from top to
bottom and load the first one they believe they can play. By using some
