HTML and CSS Reference
In-Depth Information
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):
<audio src="audio/wilhelm-scream.mp3"
autoplay
loop
></audio>
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
: