Fade in audio after fading out

Question

In my program I have background music on the start screen. This function is to fade my back ground sound out once the start button is clicked.

$(bgMusic).on('timeupdate', function () {
    var vol = 1,
        interval = 250;
    if (bgMusic.volume == 1) {
        var intervalID = setInterval(function () {
            if (vol > 0) {
                vol -= 0.05;
                bgMusic.volume = vol.toFixed(2);
            } else {
                clearInterval(intervalID);
            }
        }, interval);
    }
});

I have now added a restart button which takes you back to the start screen so I need to fade the music back in at the same speed. I have tried a few things but they don't work, can someone help me?

I need something along these lines:

$(bgMusic).off('timeupdate', function () {
    var vol = 0,
        interval = 250;
    if (bgMusic.volume == 0) {
        var intervalID = setInterval(function () {
            if (vol < 0) {
                vol += 0.05;
                bgMusic.volume = vol.toFixed(2);
            } else {
                clearInterval(intervalID);
            }
        }, interval);
    }
});

Get the current volume. Set a flag that you faded out. Reverse what you have there. If volume is (about) 0 and you faded out, fade back in. — Paul S., Nov 27 '12 at 13:37
Please add what uyou have tried as well for handling of the restart button and fading the music back in. — Ravi Y, Nov 27 '12 at 13:38

score 0 · Accepted Answer · edited May 23 '17 at 10:24

There are probably better ways to do this, but I just wrote a volume fader to get more accustomed to <audio>.

To enable it on your <audio> by enableFader(yourAudioNode), then to fade out call yourAudioNode.fadeOut(), or to fade in call yourAudioNode.fadeIn().
It is based around listening for timeupdate so unless you specify a slower rate, it will change the volume at the frequency explained here.

function enableFader(node, per_step, min_interval) {
    'use strict';
    var fadeOut, fadeIn;
    node.fadeSettings = {
        dir : 0,
        step : per_step || 0.05,
        interval : min_interval || 0.150,
        lastTime : -Infinity
    };
    fadeOut = function fadeOut() {
        var vol = this.volume,
            settings = this.fadeSettings,
            ctime = this.currentTime,
            dtime = Math.abs(ctime - settings.lastTime);
        if (settings.dir === -1 && dtime >= settings.interval && vol > 0) {
            settings.lastTime = ctime;
            this.volume = (vol - settings.step).toFixed(2);
        } else if (vol <= 0 || settings.dir !== -1) {
            this.removeEventListener('timeupdate', fadeOut);
            settings.dir = 0;
        }
    };
    fadeIn = function fadeIn() {
        var vol = this.volume,
            settings = this.fadeSettings,
            ctime = this.currentTime,
            dtime = Math.abs(ctime - settings.lastTime);
        if (settings.dir === 1 && dtime >= settings.interval && vol < 1) {
            settings.lastTime = ctime;
            this.volume = (vol + settings.step).toFixed(2);
        } else if (vol >= 1 || settings.dir !== 1) {
            this.removeEventListener('timeupdate', fadeIn);
            settings.dir = 0;
        }
    };
    node.fadeOut = function () {
        this.fadeSettings.dir = -1;
        this.addEventListener('timeupdate', fadeOut, false);
    };
    node.fadeIn = function () {
        this.fadeSettings.dir = 1;
        this.addEventListener('timeupdate', fadeIn, false);
    };
}

I tested it on this page using my dev console in Google Chrome.

var a = document.getElementById('song');
enableFader(a);
a.fadeOut();
// a.fadeIn();

So what would I change here to make it fit in with my code? @Paul S — Milo-J, Nov 28 '12 at 08:43
When `bgMusic` is in the DOM, call `enableFader(bgMusic);` and then when start is clicked, `bgMusic.fadeOut()` or for reset `bgMusic.fadeIn()`. (I'm assuming `bgMusic` is a reference to a node and not some other object, everything I've written here is done in _native JavaScript_ ). The actual code for this method is much more complicated a quick and simple setInterval but I've done it so fadeIn and fadeOut won't fight eachother and relying on events means if you pause/etc it will wait for resume before continuing. — Paul S., Nov 28 '12 at 13:16

Fade in audio after fading out

1 Answers1