Play Audio in the Background Using HTML5 Audio
On of the most interesting new features of HTML5 is the audio support, it allows you to easily play audio using native HTML. This can be very useful for media focused sites but also for just playing simple alert messages from JavaScript when showing dialogs or to notify the user of certain events.
A common misunderstanding for users new to HTML5 is that you need the audio HTML tag to be able to play audio. But that’s not the case at all as there’s also the JavaScript Audio object which allows you to play audio through script, in this tutorial I will show you how to do this.
Step 1. The Basic HTML
We start of by creating a simple HTML page with four links, one for each playable sound. When the user clicks on one of these links it will trigger the play which we will create in the next step, we add the audio file name (without file extension) as a parameter to the function.
<!DOCTYPE html>
<html>
<head>
<title>Play sounds in the background using the HTML5 audio tag</title>
</head>
<body>
<a href="javascript:play('bark')">Bark</a> |
<a href="javascript:play('drip')">Drip</a> |
<a href="javascript:play('glass')">Glass</a> |
<a href="javascript:play('sonar')">Sonar</a>
</body>
</html>
Step 2. The JavaScript Play Function
Next we create a script tag inside our page header and add a play function to it.
<script>
function play(sound) {
if (window.HTMLAudioElement) {
var snd = new Audio('');
if(snd.canPlayType('audio/ogg')) {
snd = new Audio('sounds/' + sound + '.ogg');
}
else if(snd.canPlayType('audio/mp3')) {
snd = new Audio('sounds/' + sound + '.mp3');
}
snd.play();
}
else {
alert('HTML5 Audio is not supported by your browser!');
}
}
</script>
The play function accepts the name of the audio file we want to play as a parameter. Next we make sure the browser supports HTML5 audio by checking for the window.HTMLAudioElement, otherwise we’ll show an error message. Next we instantiate our Audio object, we need to enter an empty string cause Opera requires a parameter.
Since different browsers support different audio formats we need to have both mp3′s and ogg versions of our alerts to suppot as many browsers as possible. The canPlayType first checks for ogg support otherwise it will try using mp3 instead. When we’ve found a supported format we re-instantiate our Audio object with the URL to our supported audio file. It requires the file to be in the sounds folder and have the same name as the parameter given.
Note
You can convert your audio files to both ogg and mp3 format using my new audio converter. Check it out here.
When the Audio is loaded we just call the play function to play the loaded audio file. Now you can play alerts from your JavaScript by calling the play function.
Example
Try out the finished example here: Example.
Download
Download the source from here: Download