HTML5 <audio>
Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <audio>
element is used to embed audio content in an HTML document without requiring any additional plug-in like Flash player.
The following table summarizes the usages context and the version history of this tag.
Placement: | Block |
---|---|
Content: | <source> , <track> , and text |
Start/End Tag: | Start tag: required, End tag: required |
Version: | New in HTML5 |
Syntax
The basic syntax of the <audio>
tag is given with:
The example below shows the <audio>
tag in action.
Example
Try this code »<audio controls="controls" src="birds.mp3">
Your browser does not support the HTML5 Audio element.
</audio>
An audio, using the browser default set of controls, with alternative sources.
Example
Try this code »<audio controls="controls">
<source src="birds.mp3" type="audio/mpeg">
<source src="birds.ogg" type="audio/ogg">
Your browser does not support the HTML5 Audio element.
</audio>
Tip: You can place content such as text or download link inside an audio element to provide alternate content in case, if the browser does not support the audio content or somehow failed to download the audio source file.
Tag-Specific Attributes
The following table shows the attributes that are specific to the <audio>
tag.
Attribute | Value | Description |
---|---|---|
autoplay |
autoplay |
This Boolean attribute specifies that the audio will automatically start playing as soon as it can do so without stopping to finish loading the data. |
controls |
controls |
If specified, the browsers will display controls to allow the user to control audio playback, such as play/pause, volume, etc. |
loop |
loop |
This Boolean attribute specifies that the audio will automatically start over again, upon reaching the end. |
muted |
muted |
This Boolean attribute specifies whether the audio will be initially silenced. The default value is false, meaning that the audio will be played. |
preload |
auto |
Provides a hint to the browser about whether to download of the audio itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a audio, the browser will obviously need to download it. |
src |
URL | Specifies the location of the audio file. Alternatively, you can use the preferred <source> tag as it allows for multiple options. |
Global Attributes
Like all other HTML tags, the <audio>
tag supports the global attributes in HTML5.
Event Attributes
The <audio>
tag also supports the event attributes in HTML5.
Browser Compatibility
The <audio>
tag is supported in all major modern browsers.
Basic Support—
|
Further Reading
See tutorial on: HTML5 Audio, HTML5 Video.