HTML audio Tag is used to play audio files like music or audio podcasts.
Table of Contents
Syntax of HTML audio Tag
HTML audio Tag is HTML5 tag. The syntax of HTML audio Tag is shown below. It has both ending and starting tags.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio>
</audio>
</body>
</html>
Usage of HTML audio Tag
The audio tag is used to play sounds, like songs, podcasts or any other type of audio streams. With HTML audio Tag you can embed audio file on your website. Look at the example below.
Example of HTML audio Tag
Simple example of HTML audio tag is shown below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio tag.
</audio>
</body>
</html>
In the above example an audio file named song.mp3 is embedded using audio tag. The text that you see written between two starting and ending audio tags will display if the browser doesn't support the audio tag or any format of audio file.
Supported Formats for the HTML audio Tag
The HTML audio Tag only supports three main formats of audio files. These formats are given below.
- Mp3
- WAV
- OGG
Browser Support for HTML audio Tag
All Major browsers support HTML audio Tag, however Internet Explorer 8.0 or earlier versions don't support it.
Also Internet Explorer only supports Mp3 format of audio file, while Wav and OGG are not supported.
Supported MIME types for Audio Formats
All three supported audio formats for HTML audio Tag have different MIME type values.
- Mp3 -> audio/mpeg
- Wav -> audio/wav
- OGG -> audio/ogg
Attributes of HTML audio Tag
Following attributes are used inside HTML audio Tag.
-
muted attribute
It makes the audio file silent, the sound will be muted.
-
preload attribute
It defines how the audio file should load when the page is loaded.
-
src attribute
It defines the url of the audio file.
-
loop attribute
It defines that audio file will repeat every time after it's finished.
-
controls attribute
It allows the browser to display the control buttons (like play and pause etc) for the audio file.
-
autoplay attribute
It specifies that the audio should automatically play after the page is loaded.
Global Attributes Support in HTML audio Tag
HTML audio Tag supports all Global HTML Attributes.
Event Attributes Support in HTML audio Tag
HTML audio tag supports all Event Attributes.
HTML audio Tag Video
Watch our video on HTML audio Tag and subscribe our Youtube Channel.