<audio> tag is a tag released in HTML5 as a way to embed a music file directly to your HTML document.
Before the release of the
<audio> tag, you need to embed music files using flash or third-party websites such as SoundCloud.
<audio> tag, embedding a music file is as easy as adding the following code snippet to your HTML document:
<audio controls> <source src="sound.ogg" type="audio/ogg" /> <source src="sound.mp3" type="audio/mpeg" /> Your browser does not support the audio tag. </audio>
The output of the above tag will be as follows:
To work properly, the
<audio> tag requires you to add at least one
<source> tag as the source of the embedded audio file.
When you have more than one source, then the browser will pick the first format that it can play.
When none of the format is supported by the browser, then the text “Your browser does not support the audio tag.” will be displayed on the browser.
Currently, HTML supports the following audio formats:
- and OGG format
controls boolean attribute inside the
<audio> tag is used to display the
play/pause button, the progress bar, and the volume button.
Without specifying the
controls attribute, the
<audio> tag won’t render anything in the browser.
You can also automatically play the audio file once it has been loaded to the page by specifying the
<audio controls autoplay> <source src="sound.mp3" type="audio/mpeg" /> Your browser does not support the audio tag. </audio>
The full list of boolean attributes supported by the
<audio> tag is as shown below:
controls- used for displaying interactive control in the browser
autoplay- play the audio file once loaded
loop- repeat the audio file as long as the page is opened in the browser
muted- Initially mute the audio file
Boolean attributes are active without any value, so you just need to write the attribute for it to take effect.