HTML and CSS Reference
If the type attribute is not in place the browser will try to load it, and if it fails, it then goes
on to the next <source> tag and gives it a try.
h e following snippet shows all the types:
< audio controls >
< source src = ”instruction3.ogg” type = ”audio/ogg” >
< source src = ”instruction3.mp3” type = ”audio/mpeg” >
< source src = ”instruction3.wav” type = ”audio/wav” >
</ audio >
All values must be valid MIME types. h e valid ones follow the media-type rule dei ned in
W3C specii cations for HTML5. h e type attribute is optional, but if your site has a lot of
trai c, you want to cut out every unnecessary call. h e type attribute helps you do that. For
more help, you need to consider the codec parameter in the next section.
SOURCE TYPE CODEC PARAMETER
Generally, if you enter a value for the type attribute, all you have to include is the general
type. However, when more than a single codec is available, you should add the codecs that the
browser can read. Again, specifying the codec is not going to allow the browser to access a
certain codec that it would not otherwise be able to do. Rather, it provides a heads-up to the
browser so that if it can't read it, the browser doesn't even try. It's like a newspaper vendor
asking, “What do you want? We've got papers in English, Spanish, and Mongolian.” If you
read English and Spanish, you can choose them, but if you know you don't read Mongolian,
you don't even try.
Before moving on to a closer look at the codec parameter, be sure to understand what a codec
is. h e word codec is a combination of the terms compression and decompression. So, when I
speak of a codec, I'm talking about how a i le is encoded (usually shrunk) and decoded
(expanded so it can be played).
h e type of codec, even though the i le types are the same, can be dif erent. In order to speed
up the process of determining whether the i le can be read, adding the codec parameter i lters
out those codec types that the browser can't read. For example, the following are all .ogg i les
with dif erent codecs:
< source src = ”songFest.ogg” type = ”audio/ogg; codecs=vorbis” >
< source src = ” songFest.spx” type = ”audio/ogg; codecs=speex” >
< source src = ”audio.oga” type = ”audio/ogg; codecs=flac” >
So remember, codecs and i le types are horses of dif erent colors. If your Web pages can use
full codec information on a i le, you may as well use it. Otherwise, some browsers may
attempt to launch the sound only to i nd that the codec is incompatible.