Fade out of a Mp3 song using javascript

Question

I'm trying to create a HTML file with some javascript embedded that allows me to press a button and begin to fade out of a song. I've managed to get it working so that it play the song (which is a start). but i've been playing around with a second function to try and get it to reduce the volume and setting a delay on that function can anyone help please ?!

<audio id="myAudio"
 <source src="1.mp3"
         type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

<script>
var vol = myAudio.volume;
var timer;
function aud_play() {
  var myAudio = document.getElementById("myAudio");
    myAudio.play();

}

function aud_fade(){
 var myAudio = document.getElementById("myAudio");
 if (vol > 0) {
    vol = vol - 0.2 ;
}
timer = setTimeout(aud_fade,2);
}
</script>

Answer 1

A couple things seem to need addressing ;)

First off, in the example you provided, you have not closed the audio tag.

Second, you are only setting a global vol var and not the volume of the audio object itself.

What you could try is keeping things scoped to the function and use the actual audio object volume rather than a 'global' vol var:

<script>
    function aud_play() {
        var myAudio = document.getElementById("myAudio");
        myAudio.play();
    }

    function aud_fade(){
        var timer,
            myAudio = document.getElementById("myAudio");
        if (myAudio.volume > 0) {
            myAudio.volume -= 0.005;
            timer = setTimeout(aud_fade,5);
        }
    }
</script>

<audio id="myAudio">
    <source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

I have also adjusted the timeout and the volume amount to decrease, as volume is from 0 to 1. Reducing by 0.2 (20 percent) every 2 thousands of a second would 'fade out' in 0.1 of a second!

Here is the above in a Fiddle.

You may want to consider resetting the audio currentTime and volume when the fade completes or when you click play again (Note: There is no stop method, so pause and currentTime can achieve the same thing):

<script>

    var fadeTimer = false;

    var aud_play = function() {
        clearTimeout(fadeTimer);
        var myAudio = document.getElementById("myAudio");
        myAudio.volume = 1;
        myAudio.currentTime = 0;
        myAudio.play();
    }

    var aud_fade = function() {
        var myAudio = document.getElementById("myAudio");
        if (myAudio.volume > 0.005) {
            myAudio.volume -= 0.005;
            fadeTimer = setTimeout(aud_fade,5);
        } else {
            myAudio.volume = 0;
            myAudio.pause();
            myAudio.currentTime = 0;
        }
    }
</script>

<audio id="myAudio">
    <source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>

Here is the above example in another Fiddle.

Hope this helps!

EDIT:

Regarding Fade In, you could replicate the 'aud_fade' method but increase volume when less than 1 rather than decrease when greater than 0, than call the fade in method on the start method:

var aud_play = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    myAudio.volume = 0; // 0 not 1, so we can fade in
    myAudio.currentTime = 0; // set mp3 play positon to the begining
    myAudio.play(); // start mp3
    aud_fade_in(); // call fade in method
};

var aud_fade_in = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume < 9.995) {
        myAudio.volume += 0.005;
        fadeTimer = setTimeout(aud_fade_in,10);
    } else {
        myAudio.volume = 1;
    }
};

var aud_fade_out = function() {
    clearTimeout(fadeTimer);
    var myAudio = document.getElementById("myAudio");
    if (myAudio.volume > 0.005) {
        myAudio.volume -= 0.005;
        fadeTimer = setTimeout(aud_fade_out,5);
    } else {
        myAudio.volume = 0;
        myAudio.pause();
        myAudio.currentTime = 0;
    }
};

Here is the above in a Fiddle.