HTML and CSS Reference
When present on the <audio> element, the loop Boolean attribute will cause an audio
file to repeat continually, from beginning to end.
Lastly, the preload attribute for the <audio> element helps identify what, if any, in-
formation about the audio file should be loaded before the clip is played. It accepts three
values: none , auto , and metadata . The none value won't preload any information
about an audio file, while the auto value will preload all information about an audio file.
The metadata value sits in between the none and auto values, as it will preload any
available metadata information about an audio file, such as the clip's length, but not all in-
When the preload attribute isn't present on the <audio> element, all information about
an audio file is loaded, as if the value was set to auto . For this reason, using the pre-
load attribute with a value of metadata or none is a good idea when an audio file is
not essential to a page. It'll help to conserve bandwidth and allow pages to load faster.
Audio Fallbacks & Multiple Sources
At the moment, different browsers support different audio file formats, the three most pop-
ular of which are ogg , mp3 , and wav . For the best browser support we'll need to use a
handful of audio fallbacks, which will be included inside an <audio> element's opening
and closing tags.
To begin, we'll remove the src attribute from the <audio> element. Instead, we'll use
the <source> element, with a src attribute, nested inside the <audio> element to
define a new source.
Using a <source> element and src attribute for each file format, we can list one audio
file format after the other. We'll use the type attribute to quickly help the browser identi-
fy which audio types are available. When a browser recognizes an audio file format it will
load that file and ignore all the others.
Because it was introduced in HTML5, some browsers may not support the <audio> ele-
ment. In this case, we can provide a link to download the audio file after any <source>
elements within the <audio> element (see Figure 9.10 ).
1. <audio controls>
2. <source src="jazz.ogg" type="audio/ogg">
3. <source src="jazz.mp3" type="audio/mpeg">
4. <source src="jazz.wav" type="audio/wav">
5. Please <a href="jazz.mp3" download>download</a> the audio file.