Native Audio - HTML5 - page 98

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
.org/2010/the-state-of-html5-audio .
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