Audio and video - HTML5 and CSS3 - page 124

Common attributes: controls, autoplay, loop, and preload
The <audio> element has several attributes that control its behavior,
including src and controls , which you saw in the simple example. It's
possible to add the element with no attributes at all:

<audio src="myaudio.ogg">
</audio>

Hey! Where is it?!!

The screenshot isn't interesting because there's nothing to see—with-
out the controls attribute, the element isn't visible on the page. Having
no visible controls means you have to start the audio playing by other
means—either by using the autoplay attribute (discussed in a moment)
or by providing your own controls (which you'll learn about in the sec-
tion “The <video> element”).

Adding the controls attribute means the <audio> element has visible
properties:

<audio src="myaudio.ogg"
controls>
</audio>

The preload attribute lets you hint to the browser whether a file is likely
to be needed, so you can avoid excessive server load:

<audio src="myaudio.ogg" controls preload="metadata">
</audio>

It can take the following values:

none —You don't believe the audio resource is likely to be used.

❂

metadata —You don't believe the audio is likely to be used, but the
browser should fetch information such as the dimensions, first
frame, and duration.

❂