Mastering the HTML5 audio tag
Mastering the HTML5 audio tag
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
Since internet connections are fast enought to play sounds on websites, Flash has been the tool of choice for anyone who wanted to play sounds on a website. But HTML5 is going to change the way developers can play sounds online. In this article, I’m going to show you in depth how to use the <audio> tag to play sounds on your website.
Using <audio> to insert a sound file on your website
Here is the most basic use of the <audio> tag: On this example it loads a mp3 file and play it. Notice the autoplay attribute which is used to play the sound automatically. That said, you shouldn’t play sounds automatically on a website: this is extremely boring for visitors.
<audio src="sound.mp3" autoplay></audio>
Play sound in loop
Want to loop a sound? The loop attribute is here to help. But once again, you shouldn’t abuse autoplay and loop playing if you want to prevent people from prematurely leaving your website!
<audio src="sound.mp3" autoplay loop></audio>
Display browser controls
Instead of playing sounds automatically, which is definitely a bad practice, you should let the browser display some controls such as volume, and a play/pause button. This can be done easily, simply by adding the controls attribute to the tag.
<audio src="sound.mp3" controls></audio>
Multiple file formats
<audio> is supported by most modern browsers, but the problem is that different browsers do not support the same file format. Safari can play mp3s, but Firefox can’t and play .ogg files instead. But Safari can’t play .ogg files…
The solution to this problem is to use both formats, so visitors can hear your sound, whatever the browser they use.
<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 browser to localize the file they support. It can be done easily, using the type attribute.
<audio controls> <source src="sound.ogg" type="audio/ogg" > <source src="sound.mp3" type="audio/mp3" > </audio>
Fallback for old browsers
And what if the visitor still use IE6, or another prehistoric browser with no support for the <audio> tag? A fallback can be easily implemented: As shown below, a message will be displayed to browsers who do not supports the <audio> tag.
<audio controls> <source src="sound.ogg" type="audio/ogg" > <source src="sound.mp3" type="audio/mp3" > Your browser does not support the audio tag! </audio>
When playing large files, it is indeed a good idea to buffer files. 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>
<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>
That’s all for today. I hope this article helped you to understand what you can do with the HTML5 <audio> tag. Any questions? Feel free to leave a comment below!
Opinions expressed by DZone contributors are their own.