Playing with audio in HTML5 today is really simple and fun. We can play, pause and stop musics and sounds on our web applications, sometimes it could be a great idea and no, we aren't back in 1998: audio is today an important aspect of nowadays web applications because it provides feedback after actions, make the mood of the website clear and provides beautiful effects interacting with the user interface.

In this tutorial I want to show how you can fade in and fade out audios playing with HTML5 API and JavaScript. Check out the demo, download the source and let's do this!

The concept

The base of this simple trick is playing with the setInterval function: talking about a fade out effect, starting from a value like 100% of volume and decrease it to 0% by 10% for every interval. Simple! Think to spinning the volume gear of your hi-fi stereo...every 'tick' is an interval round that decrease a little bit your master volume, if you turn it down fast, the volume fades out faster.

The JavaScript Part

First of all, create some simple variable to detect the Status of our audio source, than create and save an 'Audio' object inside a variable, and pass to it an audio file. After that, let's play it and change the audio status:

var status = 'pause';

var myAudio = new Audio('path/to/your/audio.mp3');  
myAudio.play();  
status = 'play';  

Now we have a simple audio that is playing on the browser. Let's create a fadeOut function to simple decrease its volume and set it to pause:

function fadeOut(p_audio){  
    if(status != 'play') return false;

    var actualVolume = p_audio.volume;
    var fadeOutInterval = setInterval(function(){
        actualVolume = (parseFloat(actualVolume) - 0.1).toFixed(1);
        if(actualVolume >= 0){
            p_audio.volume = actualVolume;
        } else {
            p_audio.pause();
            status = 'pause';
            clearInterval(fadeOutInterval);
        }
    }, 100);
}

The function is very simple. It check the status of the audio and if it's different from play, it works. Then a setInterval function starts to decrease the audio volume by 0.1 every round. Remember, the audio volume is from 0 to 1. When it reaches the volume equals to 0, it sets to pause the audio file, change the status and clear the interval function.

The fadeIn function is similar, but it works backwards:

function fadeIn(p_audio){  
    if(status == 'play') return false;

    var actualVolume = 0;
    p_audio.play();
    status = 'play';
    var fadeInInterval = setInterval(function(){
        actualVolume = (parseFloat(actualVolume) + 0.1).toFixed(1);
        if(actualVolume 

Now you can simply add your custom listener to trigger the functions passing myAudio var or every audio object you want. This is the engine of the system, now you have to put it fuel inside it!

That's all for today, a simple tutorial to introduce you to Audio API: simple, useful and fun! For every question or integration, drop a comment below.
Cheeeers!