HTML and CSS Reference
In-Depth Information
mime.typesfile for an Apache server, or you can add a MIME type to the directory's .htaccess
file (assuming you're running Linux):
AddType audio/mp4 m4a
AddType video/ogg ogg oga
AddType video/webm webm
You should also use the
type
attribute in the source element. The
type
attribute provides in-
formation to the browsers and other user agents about the container and codec, as well as type
of file listed in the
src
attribute. The syntax for the
type
attribute is the type of file, followed
by the type of container. In
Example 1-4
,
the container and media file type for each audio file
is added to each of four
source
elements.
Example1-4.HTML5webpagewithembeddedaudioelementwithfourseparateaudiotypes,
each with their specific MIME type provided in the source element's type attribute
<!DOCTYPE html>
<head>
<title>Audio</title>
<meta charset="utf-8" />
</head>
<body>
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg" />
<source src="audiofile.ogg" type="audio/ogg" />
<source src="audiofile.wav" type="audio/wav" />
</audio>
</body>
Of course the last file, the WAV, never gets played, at least not with our target browsers. IE,
Chrome, and Safari pick up the MP3, while Firefox and Opera pick up the Ogg file. Each
browser traverses the source elements until if finds a file it can play, and then stops. Minim-
ally, you can provide an MP3 and an Ogg or WebM audio file, which covers all five target
browsers, in addition to iOS and Android.
Table 1-2
contains a summary of the different audio codecs and containers covered, as well as
modern browser support, common file extension(s), and
type
setting.
