Audible Popping When Pausing Some Html5

Why does the audio on certain files 'pop' or 'click' when the hoverstate is left, but not on others? Popping can be observed here (JSFiddle). You may have to hover and then unhover

Solution 1:

The "popping" phenomenon is inevitable whenever you play an audio file and then turn it's volume abruptly to zero.

Sound is vibration, vibration is encoded as a value in a sound sample, and this value is most likely different than zero (say an arbitrary value "x").

So when the sound goes from "x" to 0, this represents another very short "vibration" that has an audible audio effect. Same thing happena when the playing resumes, going from 0 to another "y" value (which is the value of the "vibration" in the next samples). this "movement" creates an audible "pop".

The more X or Y are "far from zero", the more audible the pop will be. This could explain the varability of the phenomenon among different files.

You can avoid this effect only if you do a gradual fade-out (also a few milliseconds) of the volume when stopping and a gradual fade-in when resuming.

Forgive me for the oversimplification of the language and the physics, I've tried to be understandable.

Solution 2:

The following code is not using pause or play but rather let the sound play in loop, and fades in / out when the mouse enters/leaves.

The fading is done progressively by a function called every 20ms. This function will reduce the difference between a targetVolume and the actual sample volume.

http://jsfiddle.net/f9rEu/5/

var test = newAudio("http://www.sounddogs.com/previews/25/mp3/228367_SOUNDDOGS__dr.mp3");

test.loop = true ;
test.play();
fade(0);

$('#test').hover(function() {
    fade(1);
    return;
}, function() {
    fade(0);
    return;
});


var targetVolume = 0;
var volumeIncrease = 0.0023 ; // in percent per millisecondfunctionfade( dest ) {
   targetVolume = dest ;
}

var lastTime = Date.now();
functionfader() {
    var now= Date.now() ;
    var dt = now - lastTime ;
    lastTime = now;
    var diff = targetVolume - test.volume ;
    if (diff == 0 ) return;
    if (Math.abs ( diff )  < 5* volumeIncrease*dt ) {
        test.volume = targetVolume ;
        return ;
    }
    var chg = (diff > 0) ?  volumeIncrease : - volumeIncrease ;
    chg *=  dt ;
    var newTestVolume = test.volume + chg;    
    test.volume = newTestVolume ;
}

setInterval(fader, 20);

Edit : I had only tried on desktop/Chrome, and it was ok, i just tested Safari ok, but for instance on Firefox it is in did a mess.

Out of curiosity, i wondered if it was because of the way the mp3 buffer was handled, and indeed the sound is clean if you use a .wav as input. For a short looping ambient sound, .wav is ok. For a longer sound, i guess the file size would be just too high.

I did not test on mobile devices, but their audio is so laggy that i wouldn't bet...

Here's a fiddle using a wav : http://jsfiddle.net/f9rEu/20/

Notice that you might use webAudio that is a low latency html5 Audio API that allows a LOT of sound processing. You might look here if its support is ok for the browsers/devices you target : http://caniuse.com/audio-api