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>
Search WWH ::




Custom Search