HTML and CSS Reference
In-Depth Information
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-
formation.
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>
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.
6.
</audio>
Search WWH ::
Custom Search