HTML and CSS Reference
In-Depth Information
The
preload
attribute allows you to hint to the browser when it should begin buffering
the audio:
<audio controls
preload
>
While
preload
currently has limited browser support, it seems useful for optimizing
the download process. You can simply specify
preload
and leave it to the browser to
decide the appropriate action, or you can choose from three defined
preload
values:
preload="auto"
Is the same as a Boolean
preload
, and suggests that the browser should begin
downloading the file but leaves the ultimate action up to the browser. So, if it is a
mobile situation or a slow connection, the browser can decide not to preload in
order to save bandwidth.
preload="metadata"
Hints that the browser shouldn't buffer the audio itself until the user activates the
controls, but that metadata like duration and tracks should be preloaded.
preload="none"
Suggests that the audio shouldn't be downloaded until the user activates the
controls.
Discussion
In addition to the browser inconsistencies with audio formats, there is a bit of
inconsistency in the support for
audio
itself. There are browser bugs, quirks, and odd-
ities that will hopefully be addressed by the browser makers in the near future, but until
they are it is up to us designers and developers to remain informed.
24Ways provides a list of some of these browser issues:
http://24ways
Creating fallback content
As you saw in the first example of this recipe,
audio
allows us to include
fallback
content.
What this means is that if a user is on a browser that doesn't support HTML5
audio
,
he will instead see some replacement content (see
Figure 4-2
).
Figure 4-2. Fallback content displayed in IE8, which lacks HTML5 <audio> support