Chapter 5
Figure 5-9. Native audio controls from several browsers
You’re not limited to the browser’s native controls, however. The audio element brings with it a JavaScript
API—with methods like play() and pause(), and a volume property—so you can create your own player
interface with a bit of scripting and style it however you like. Furthermore, because the audio is now a free
resident of the document and no longer locked away in a plug-in, the sound data itself is exposed to the
browser and accessible to manipulation with JavaScript. But alas, that’s a subject for another book, and
we’ve got more markup to show you.
The audio element also accepts the Boolean attributes autoplay and loop, which do just what they
say—the autoplay attribute triggers playback automatically when the page loads, and the loop attribute
will replay the audio over and over. One could easily use these attributes for nefarious purposes,
especially in combination, and most especially without a controls attribute so a visitor would have no way
to shut it off (short of hastily fleeing your website, never to return):
But you’re a responsible citizen and a decent human being, so you’d never do such a thing. The Web
thanks you.
An optional preload attribute accepts the values auto, metadata, or none. The auto value simply leaves
it up to the browser (and hence the user) to determine whether it will begin downloading the sound file
before the user chooses to play it. This is left in the hands of the user-agent because different people and
devices have different needs. Someone using a mobile device—where transferring large amounts of data
is slow and expensive—might not want to preload any media, but someone on a desktop computer with a
fast connection might. A preload value of metadata tells the browser to fetch only the file’s metadata
(title, artist, length, etc.) but not the sound itself, and none tells the browser to not preload any data (this is
the default). The preload attribute also accepts an empty value, equivalent to auto: