HTML5 and Audio Tags

For the longest time I did not want to use Flash in any of my websites. Whenever a client would ask for something like a sound effect, or embedded music, I would advise against it. Because it requires Flash. I really didn't like Flash. Well HTML5 came around, and most of the operating browsers support it, so lets take a look at the AUDIO tag that comes along with it.

Step 1 - Create HTML5 audio tag

First, it's recomended to have three types of audio sounds: OGG, MP3 and WAV. So whatever format you have, get the other ones. You can use Audacity for this. Click CTRL+Shift+E to export.

Then create HTML as demonstrated. Note my example uses chirp sound and I used "chirp" as an id of the audio tag.

Code

<audio id="chirp">
    <source src="audio/chirp.ogg" type="audio/ogg">
    <source src="audio/chirp.mp3" type="audio/mpeg">
    <source src="audio/chirp.wav" type="audio/wav">
  </audio>

Step 2 - attach jQuery call to a button

Now you have to attach the button to some action using jQuery. For instance let's create a small button below and play the sound when the button is clicked.

Here I used id "chirpPlay" for the button so I can base the JavaScript call onto that object.

Code

<button class="btn" id="chirpPlay">Chirp</button>

$('#chirpPlay').click( function(){ 
    $('#chirp')[0].play(); 
  });

Step 3 - audio tag volume

Well, that was loud, so let's lower the volume a little. After all you don't want to scare your visitors away by blowing up their speakers. To demonstrate the difference I will create a secondary audio tag and button: chirp2 and chirpPlay2. And now I apply the volume level to 0.1, which means 10%.

Code

$('#chirpPlay2').click( function(){ 
    $('#chirp2')[0].volume = 0.1;
    $('#chirp2')[0].play(); 
  });

Step 4 - audio tag rewind

This step is not necessary, but if you're like me, you probably want to be able to click the button few times in a row, right? Why not? Okay, let's get another button and rewind the sound to the beginning when play is initiated.

Code

$('#chirpPlay3').click( function(){
    $('#chirp2')[0].volume = 0.1;
    $('#chirp2')[0].currentTime = 0;
    $('#chirp2')[0].play(); 
  });

Step 5 - pause and play

You can also pause the playback of the sound and continue the playback after you click on it again.

So, here I create a new button but this time around I add class "play" to it. This will allow me to toggle the button's class.

Since I want to keep the buttons active, I will also use the jQuery live call for swapping these classes.

Code

$('.play').live('click', function(){ 
    $(this).removeClass('play').addClass('pause').html('Pause');
    $('#chirp2')[0].volume = 0.1;
    $('#chirp2')[0].play(); 
  });
  $('.pause').live('click', function(){ 
    $(this).removeClass('pause').addClass('play').html('Play');
    $('#chirp2')[0].pause(); 
  });

Step 6 - returning song length

Need a play track? Well, then you would need the song's length prior to playing it, right? Well, that's quite simple as well. Simply call the "duration" method on the audio element.

Of course you don't need any extra buttons for this, but in order for me to demonstrate it, I will use another button with id "chirpDuration"

Code

$('#chirpDuration').click( function(){ 
    var duration = $('#chirp2')[0].duration; 
    alert("Chirp's duration is: "+duration+" seconds");
  });