Inserting audio - HTML5 - page 218

The loop attribute is an all-or-none situation. Once it is set the audio continues to loop forever.
Naturally, you'd want to be careful about setting up a web page where music loops continuously in
the background with no way to stop it.

The preload attribute determines whether the browser fully loads the audio before the page is dis-
played. It has three possible values:

➤ ➤

: When set to auto, the entire audio is downloaded before the page is displayed.

auto

➤ ➤

: If the meta value is used, only the metadata (such as author, date created, and so on) is
loaded on page load.

meta

➤ ➤

: Neither audio nor metadata is preloaded.

none

You need to be careful if you have many <audio> tags on your page. Excessive use of the preload
attribute set to auto (which is the default) could result in long delay before your page is displayed.

Try iT

In this Try It you learn how to include HTML5 audio in your web page.

Lesson requirements

You will need the tpa_martian_sounds.html file from the Lesson_24 folder, as well as a text edi-
tor and a modern web browser such as Safari 5+, Firefox 3.5+, or Opera 10+.

You can download the code and resources for this lesson from the topic's web
page at www.wrox.com .

step-by-step
1.

Open your text editor.

2.

From the Lesson_24 folder, open tpa_martian_sounds.html .

3.

Put your cursor after the <div id=”martianSong”> tag and press Enter (Return).

4.

Enter the following code:

<audio controls=”controls”>
<source src=”assets/whale_cry.ogg” type=”audio/ogg” />
<source src=”assets/whale_cry.mp3” type=”audio/mpeg” />
</audio>

5.

Save your file.

6.

In your browser, open tpa_martian_sounds.html and click the play button, shown in
Figure 24-7.