HTML5 Audio
The HTML5 <audio> element is the standard way to embed audio in a web page. In this article, you’ll learn how to embed audio into your HTML document. This is great for:
- Podcasts
- Audio Books
- Music
Using the HTML5 audio Element
The audio element is somewhat new but it works in most of the modern web browsers. You can check what browsers support the <audio> tag with this website Can I Use
Checkout the example below.
<audio controls>
<source src="audio/ES_Every_Battle_Hallman.wav" type="audio/wav">
<source src="audio/ES_Every_Battle_Hallman.wav" type="audio/ogg">
<source src="audio/ES_Every_Battle_Hallman.wav" type="audio/mpeg">
Your browser does not support the HTML5 Audio element.
</audio>
Let’s break down the code above.
We start off with the opening <audio> tag that has the attribute controls. The controls attribute adds audio controls such as play, pause and volume.
Then we have the <source> tag which has the attribute and value of src="audio/ES_Every_Battle_Hallman.wav" type="audio/wav". That specifies the location of the audio file on the web server and the file type of wav.
You will also note the other file types that are supported such as ogg and mpeg.
Then we have the line that says Your browser does not support the HTML5 Audio element.. This will only be displayed if the browser doesn’t support the <audio> tag.
Finally we close off with the </audio>.
Alternative HTML5 Audio Syntax
<audio controls="controls" src="audio/ES_Every_Battle_Hallman.wav">
Your browser does not support the HTML5 Audio element.
</audio>
In the above example, we place the source of the audio file directly inside the opening <audio> tag.
That’s how to use the audio tag in your HTML Document.