HTML and CSS Reference
In-Depth Information
where
url1
,
url2
, etc. are the possible sources of the audio clip. A browser will attempt
to load the audio files, stopping at the first file format that it supports. Versions of the
Apple operating system before iOS4.0 did not support multiple
source
elements, view-
ing only the first
source
element. Because Apple devices support only the MP3 format,
you always should start your list with the MP3 version of your audio clip.
Adding HTML5 Audio
• To add an audio clip under HTML5, use the
audio
element
<audio>
<source src=”
url1
” />
<source src=”
url2
” />
…
</audio>
where
url1
,
url2
, etc. are the possible sources of the audio clip.
Use the
audio
and
source
elements to add an audio clip of the overture from
Royal
Wedding
to Maxine's Web page.
To add an audio clip:
◗
1.
Return to the
jumbo.htm
file in your text editor.
◗
2.
Scroll down to the h2 heading,
Listen Up
, and below it insert the following
audio
and
source
elements (see Figure 7-7):
<audio>
<source src=”overture.mp3” />
<source src=”overture.ogg” />
</audio>
Figure 7-7
inserting the audio element
source
f
or the
MP3 file version
source f
or the Ogg
Vorbis version
◗
3.
Save your changes to the file.
By adding the
audio
element, you've embedded the audio clip in the Web page, but
you haven't provided any means for users to interact with the audio file. You can do that
by setting the attributes of the
audio
element.
Attributes of the
audio
Element
Figure 7-8 lists the attributes associated with the HTML5
audio
element. For example,
to display controls for an audio clip, you add the following
controls
attribute to the
audio
element:
<audio controls=”controls”> … </audio>