HTML and CSS Reference
Figure 3-2. Shortcut menu for the audio player in IE9
All the browsers also reveal a shortcut menu if you right-click the audio player (see Figure 3-2). You
can use the shortcut menu to control audio playback.
The <audio> tag also provides some useful attributes that let you fine-tune how audio files are played.
By default, when you run a page using <audio> , the audio file isn't played until you click the Play button. If
you wish to play the file automatically, you can add the autoplay attribute as follows:
<audio src="Audio1.mp3" controls="controls" autoplay="autoplay"></audio>
The autoplay attribute is handy for playing a background sound as users read the content of your web
By default, an audio file isn't replayed when it completes. To play the same file over and over again,
you can set the loop attribute:
<audio src="Audio1.mp3" controls="controls" loop="loop"></audio>
The loop attribute is useful in scenarios when users tend to be on a page a long time and you wish to
play background audio without interruption.
There is also a preload attribute that governs how an audio file is loaded by the browser. This attribute
has three possible values: auto , metadata , and none . The auto value indicates that the entire audio file
should be loaded as soon as the web page loads in the browser. metadata indicates that only metadata
information such as the length of the audio file should be loaded. Finally, none indicates that the file
shouldn't be loaded at all. In this case, the file is loaded only when it's played in the browser. The default
value for the preload attribute varies from browser to browser. If the preload attribute is omitted, the result
varies from one browser to another. The following markup shows how to use the preload attribute:
<audio src="Audio1.mp3" controls="controls" preload="auto" ></audio>
Using the preload attribute, you can control how much media data is downloaded on the client side.
For example, if you're displaying a long list of audio files on a single page, setting preload to auto might
download too much data. Setting preload to metadata can be more efficient in such cases. Note that
preload is ignored if the autoplay attribute is present.
The HTML5 <video> element lets you play video files. It supports the same set of attributes as the <audio>
tag and provides a few more. The basic use of <video> is shown here:
<video src="Video1.mp4" controls="controls"></video>
The src attribute points to a video file, and the controls attribute displays the playback controls.
Figure 3-3 shows a video file being played in IE9.