Audio in the Browser

Your web browser is usually very silent, it does not talk or play any music. Earlier, there have been several ways to make the browser play sounds with help of plugins to the browser. In the upcoming HTML5 standard there is actually a way to play sounds in the web browser without having to install an audio plugin. It's actually very simple to play an MP3 file on a HTML5 web page, you just use the <audio> - tag

To play an audio file you just put this markup in the HTML code:

<audio id="introductionAudio" controls>
   <source src="IntroductionAudio.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
</audio> 

This HTML5 tag will put the audio controls on the webpage, so that the user can start and stop playing the audio file.

The source tag inside of the audio tag specifies the filename of the audio to be played.

As you can see in the code snippet above it’s also easy to do feature detection if the current browser is supporting the audio tag or not. If the browser does not support the audio tag this message “Your browser does not support the audio element.” will be displayed in the browser instead of the audio controls. Of course you can add some other HTML code instead of the text message or fall back to an audio browser plugin if the browser does not support the audio tag.

The audio controls looks like this in Internet Explorer.

The audio control could look different depending on what type of browser that is being used or what version of the browser.

Note that just because a specific browser supports the audio tag, it does not mean that necessarily mean that it support all the different audio file formats that exist. In the table below you can see what audio formats the different browsers supports.

This table was true 2013-10-08

See an updated version of the Formats and Browser Support

Simple number game

I created a simple number game for kids to learn a bit more how the audio tag works.

The game works like this:

• The player clicks on the start game button
• The audio file that is played asks the kid to click on a specific number
• If the kid clicks on the correct button an audio file saying that it was correct, but if the kid clicks on the wrong number, an audio file asks the kid to click on the correct number again
• Then it starts over with the next number

This game is for kinds that want to practice on how numbers are written.

This image is showing how the simple number game looks like.

First I created one audio player for every number.

This had two problems, one it would take unnecessary amount of memory and if the player pushed on several buttons, the sounds started running at the same time, so you could not hear what was being said.

So, I thought I needed to add several songs to a playlist of the audio player, but I turned out that the audio player does not have playlist functionality. So instead I thought that I need to create a queue of sounds to be played in the correct order. To create the queue I used Java script.

Since this is an interactive game and I don't know in what order all sounds should be played, I needed to create a queue where I add items along the way when I know what sounds should be added. The play queue is done of two parts, one part where I add sounds to the queue and one that is looking in the queue, to see if there is something new to play when a song finished playing.

Code from the add to queue method....

function AddAudioToQueue(audioPath)
{
    if (audioPath != null) {
        audioPlayerQueue.push(audioPath);
    }
        
    if (audioPlayerQueue.length == 1)
    {
        audioPlayer.src = audioPlayerQueue[0] 
        audioPlayer.play();
    }
}

Code from the read and play the queue...

function PlayNextAudioFromQueue()
{
    audioPlayerQueue.shift();
    audioPlayer.src = audioPlayerQueue[0];
    audioPlayer.play();
} 

The method PlayNextAudioFromQueue method is actually called when the event “ended” is fired from audio player. So, this means that whenever an audio has been finished playing this method is called, so that it can check if there are any more audio files in the queue waiting to be played.

After testing this new queue on some kinds, it turned out that they like to click a lot on buttons, so I needed to improve it by removing items in the queue if there where to many in the queue.

I decided that 4 sounds was the maximum number of sounds that was allowed to be in the play queue. I added this code to the PlayNextAudioFromQueue to be able to clean the queue of sounds if I got to many:

while (audioPlayerQue.length >= 5) 
{
    audioPlayerQue.shift();
}

The cleaner code turned out to be really affective for keeping the child active in the game and not get bored by hearing the same question over and over again. I think that a good idea would be to add an extra sound that would tell the child that it has pressed too many buttons and would have to stop and listen to the question to be able to pick the correct button instead of guessing.

Interesting links:

• W3schools (HTML5 audio)