Note/Info
The <audio> tag is a new tag in HTML5.
HTML5 <audio> tag
The <audio> element is used to embed audio in web page.
The main purpose is to play the audio music in the HTML Page.
There are 3 important file formats of this <audio> tag –
- mp3 – The MIME Type is audio/mpeg.
- wav – The MIME Type is audio/ogg.
- ogg – The MIME Type is audio/wav.
Note/Info:
- All the major browsers support the MP3 file format.
- Most of the browsers support the WAV file format except Internet Explorer.
- Internet Explorer and safari does not support the OGG file format.
- Internet Explorer 8 and prior does not support the audio tag.
Syntax:
<audio controls src=”audiofilename.file-type” type=”type=”audio/mime-type”>
Example
<audio controls> <source src="html-audio.mp3" type="audio/mpeg"> Your browser does not support the html audio tag. </audio>
Default CSS Value
NONE
How Browser will display
BLOCK Level.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| NA | NA | New tag in HTML5 |
Attributes used
| Attribute | Description |
|---|---|
| src | This refers to the source URL where the audio file is present. This is mandatory attribute and is coded with the <source> tag. |
| controls | To display the audio control setting for the audio like - volume, mute/unmute, download,play and pause button. |
| autoplay | To automatically play the audio music when the user visits the web page, you need to code autoplay attribute with the controls attribute. |
| muted | This mutes the audio music at start when the user visits the page. The user has to unmute the audio to listen the audio music. |
| loop | This enables the audio to play in a loop to play the audio music again and again. |
| preload | This decides how the audio file will be loaded if the author tries to load in a particular way. It can take one out of these values - By default, preload is none. |
Note/Info:
If the audio has autoplay attribute and the preload attribute, then the browser will ignore the attribute.
Global Attributes
The <audio> tag supports Global attributes.
Event Attributes
The <audio> tag supports Event attributes.
Supporting Browsers
| Browser | mp3 | wav | ogg |
|---|---|---|---|
| Google Chrome | Yes | Yes | Yes |
| Internet Explorer | Yes | No | No |
| Mozila firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
| Opera | Yes | Yes | Yes |
Related Tags
<video>, <source> & <track> tags.