Introduced with HTML5, the <audio> tag defines a sound and is used to embed audio content such as music or other streams in HTML documents.
As of 2020, <audio> is widely supported among modern browsers. Internet Explorer 8 doesn’t support it, as well as earlier versions.
<audio> can be used to play sound files in the following formats:
.mp3: Supported by all modern browsers..wav: Not supported by Internet Explorer..ogg: Not supported by Internet Explorer and Safari.
Using <audio> to Insert an Audio Element on Your Website
Here is the most basic use of the HTML <audio> tag: On this example it loads a .mp3 file from your webserver and plays it.
Notice the autoplay attribute which is used to play audio files automatically. That being said, playing sounds automatically on a web page should be avoided as this is extremely annoying for your visitors, who have no way of stoping the sound playback.
<audio src="sound.mp3" autoplay></audio>
Loop an Audio File
If you want an audio file to play over and over again, you can add the loop attribute to your audio element.
<audio src="sound.mp3" autoplay loop></audio>
Display Browser Controls
Instead of playing sounds automatically, it is possible to let the browser display controls such as volume, play/pause, etc to the user.
This can be done easily, simply by adding the controls attribute to the tag.
<audio src="sound.mp3" controls></audio>
Multiple File Formats
<audio> lets you specify different formats of a same audio file. This is especially useful if you wish to play a file in .ogg format, which is not supported by both Internet Explorer and Safari.
<audio controls>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>
Specify MIME Types
When using different file formats, it is a good practice to specify the MIME type of each file in order to help the browser localize the file it supports.
It can be done easily, using the type attribute on the source element.
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound.mp3" type="audio/mp3" >
</audio>
Fallback For Old Browsers
All modern browsers support <audio>. It is however possible to notify people who are using outdated browsers that the <audio> tag isn’t supported.
As shown below, you can simply embed any message of your choice within the <audio> tag. If the visitor’s browser doesn’t support HTML audio, a message will be displayed instead of the audio player.
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound.mp3" type="audio/mp3" >
Your browser does not support the audio!
</audio>
Buffer Files
When playing large files, it is a good idea to buffer those files in order to provide visitors a smooth listening experience.
To do so, you can use the preload attribute. It accept 3 values: none (If you don’t want the file to be buffered), auto (If you want the browser to buffer the file, and metadata (To buffer only metadata when page loads).
<audio controls>
<source src="sound.mp3" preload="auto" >
</audio>
Control HTML5 <audio> with JavaScript
Controling a HTML audio player with JavaScript is pretty easy. The following example shows how you can build a rudimentary audio player with basic controls (Play, Pause, Volume Up, Volume Down) using HTML and JavaScript.
<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>
Styling the HTML Audio Tag Using CSS
As of 2019, CSS styling options for the HTML audio tag are quite limited. The CSS properties that can be used are: width, box-shadow, border-radius and transform.
You can experiment with the small demo that I’ve created on CodePen, or just have an overview of the possibilities by having a look at the code below.
audio {
width: 600px;
box-shadow: 5px 5px 20px rgba(0,0, 0, 0.4);
border-radius: 90px;
transform: scale(1.05);
}If you are looking to create your own HTML audio player, the best option would be to leave off the control attribute and implement your own controls using JavaScript.
Advanced Audio Player Using MediaElement.js
As shown above, CSS styling options for <audio> are very limited. Fortunately, an amazing open-source media framework named MediaElement.js allows you to have much more control on your audio elements.
The above example showcases how MediaElement.js allows developers to easily give a custom look and feel to their HTML audio players. You can view this example live here.
If you are looking to build custom audio (or video) players, MediaElement.js is definitely a tool to consider.
Frequently Asked Questions
What Is Audio Tag In HTML?
The HTML audio tag (<audio>) has been introduced in HTML5, and represents an audio element within a HTML page. It is used to embed sound files into a web page. You can also download songs from pagalworld or pagalsong
No other HTML tags than source, used to specify the path of an audio file, can be used within <audio> and </audio>. Any text within the tag will be displayed if the visitor’s browser does not support HTML audio.