HTML and CSS Reference
In-Depth Information
Example: Using All Three Formats
In
Example 7-2
,wearegoingtoembeda40-secondsong,
song1
,inanHTML5pageandplay
it. To make sure
song1
can play in as many browsers as possible, we are going to embed it
with three different sources. For this example, we are also going to set the
autoplay
,
loop
,
and
controls
properties so that the song will start automatically, replay when it reaches the
end, and display the default browser audio controls. Here is the code to embed
song1
:
<audio
<audio controls autoplay loop>
<source
<source src=
"song1.mp3"
type=
"audio/mp3"
>
<source
<source src=
"song1.wav"
type=
"audio/wav"
>
<source
<source src=
"song1.ogg"
type=
"audio/ogg"
>
</audio>
</audio>
NOTE
Just as we did with video, we have placed the audio type with the broadest support for iOS devices
first in the list. This is because handheld devices do not do well with multiple embedded sources.
We created
.ogg
,
.wav
, and
.mp3
versions of the song using Audacity.
Example 7-2
gives the
full code.
Example 7-2. Basic HTML5 audio revisited
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH7EX2: Basic HTML5 Audio Revisited
</title>
</title>
</head>
</head>
<body>
<body>
<div>
<div>
<audio
<audio controls autoplay loop>
<source
<source src=
"song1.mp3"
type=
"audio/mp3"
>
<source
<source src=
"song1.ogg"
type=
"audio/ogg"
>
<source
<source src=
"song1.wav"
type=
"audio/wav"
>
Your browser does not support the audio element.
</audio>
</audio>
</div>
</div>
</body>
</body>
</html>
</html>
