HTML and CSS Reference
In-Depth Information
The sample code below shows how to use the <audio> tag to insert an audio file
named longfellow-audio.mp3.
<audio controls=”controls” autoplay=”autoplay”>
<source src=”longfellow-audio.mp3” type=”audio/mp3” />
If you are reading this, your browser does not support the
HTML5 audio element.
</audio>
The controls attribute adds audio controls, like play, pause, and volume. It can be
set up in any of the three following ways:
• <audiocontrols="controls">
• <audiocontrols>
• <audiocontrols="">
Similarly, the autoplay attribute can be set up in any of these ways:
• <audioautoplay>
• <audioautoplay="autoplay">
• <audioautoplay="">
You can use the src attribute in the <audio> tag itself as shown in the sample below:
<audio controls autoplay src=”longfellow-audio.mp3”>
If you are reading this, your browser does not support
the HTML5 audio element.
</audio>
However, in order to make the <audio> tag work in all browsers, you should use the
source elements inside the audio element. The source elements can link to different audio
files. The browser will use the first recognized format. An example of an <audio> tag with
multiple <source> tags is shown below:
<audio controls=”controls” autoplay=”autoplay”>
<source src=”longfellow-audio.mp3” type=”audio/mp3” />
<source src=”longfellow-audio.ogg” type=”audio/ogg” />
</audio>
Browsers that do not support the audio element will ignore the <audio> tag. You
should always insert text content between the <audio> and </audio> tags, which will
display if the browser does not support the tag.
Regarding the other attributes that you do not see in these examples, the preload
attribute tells the browser to begin downloading the audio immediately when the element
is encountered. The loop attribute restarts the audio immediately once it has finished
playing. These can both be useful attributes depending on the audio clip and the purpose
of the Web site.
Because this topic is designed to highlight HTML5, you will use the new audio
element to insert the Longfellow audio clip. (Note that you could have used the object
element as shown in the examples above to insert the same audio clip.) As mentioned,
most browsers today support the audio element, and the audio clip is in a format
supported by the new tag (.mp3). You could use either element to accomplish the
same task.
