gapless looping audio html5

Question

anyone have any idea how to accomplish gapless looping for the audio tag? I'm thinking something javascript based..

I have a loop say 1 measure and I want it to loop and stay in tempo. So I need the loop to be smooth/gapless. When i simply set "loop" to true it will lag and does not stay in tempo.

Answer 1

While still not perfect, this worked for me:

var audio_file = new Audio('whatever.mp3')
audio_file.addEventListener('timeupdate', function(){
    var buffer = .44
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0
        this.play()
    }
});

Experiment with the size of the buffer to find what works best for you

Answer 2

Solution is to have 2 instances to control the play back.

Something like this :

var current_player = "a";
var player_a = document.createElement("audio");
var player_b = document.createElement("audio");

player_a.src = "sounds/back_music.ogg";
player_b.src = player_a.src;

function loopIt(){
    var player = null;

    if(current_player == "a"){
        player = player_b;
        current_player = "b";
    }
    else{
        player = player_a;
        current_player = "a";
    }

    player.play();

    setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds.
}

loopIt();

And if you're using SoundManager2, source the audio through a Data URI instead of an URL request.

Strangely, I found that SoundManager2 request the file from the server each time it plays. Even it's loading from the cache, there will be a delay until the not-modified header is received for the audio file.

Answer 3

Yeah, this is a real pain... evidently whoever spec'd out the element wasn't either a musician or game developer - heh.

Anyhow, depending on what you're doing, another possible workaround is to create an MP3/OGG/wav that is several repeats of your loop long. This comes in handy for where you want to loop a sound only a few times before you stop playing it.

An example of this might be a player thrusting in a rocket ship. I'm developing a game at the moment with just this scenario and have created an MP3 with a number of loops of the thrust sound effect, totalling about 6 seconds of playback. In order to minimise the size of the download I've encoded the audio at 32kbps - any lower and it starts to sound unacceptably splashy, since the thrust sound is largely white noise.

As you can guess, I'm just banking on the fact that it's very unlikely a player would thrust continuously for 6 seconds. If they do, they'll hear the gap, but I can live with that. Most of the time they won't thrust for anything like that long, so won't hear the glitch.

Another option I've considered is a pair of samples that fade in and out and both loop with an offset.

Whilst these work for the some game scenarios they almost certainly wouldn't work for any kind of music scenario. YMMV.

Answer 4

Unfortunately this is one of the weaknesses of the HTML5 element. There is no guarantee that audio will play when you want it to or without delay.

There are two options worth looking into - SoundManager2 (http://www.schillmania.com/projects/soundmanager2/) is a great library that would probably be helpful here, though it'll use Flash to play the audio in this case.

The other option is to look at the Web Audio API in Chrome or the Audio Data API in Firefox. Both are really new, and not really ready for prime time yet, but allow you to do things like scheduled audio playback, looping and a whole lot more. Check out http://www.htmlfivewow.com/slide58 for a bunch more info!

Answer 5

I'm trying to do this with intervals, try this https://github.com/Hivenfour/SeamlessLoop

worked for me with wav files, tested on Chrome, Firefox and Opera

Answer 6

我一直在寻找解决方案的几个小时，因为这是我登陆的第一页，我想与您分享一个指向 JS 库的链接，该库似乎可以完美地播放音轨循环而没有任何间隙Gapless -5

Answer 7

I've tried the methods above without success, In my use case (using Firefox 43.0) all seem to click. This is due in part to having to loop a continous tone which has no handy breaks or low points in it (I'm trying to create a reving car engine using 22010 samples/sec mono .wav files).

However I am able to concatinate my .wav file together multiple times to generate a single long .wav file which has no clicks in it (except the now infrequent one that still occurs at the end), this is because my original .wav file was carefully crafted to be cyclic.

I now plan to have several of these long files all playing continously at the same time (one for each car rpm level) and mix these signals using a gainNode (described here: http://www.html5rocks.com/en/tutorials/webaudio/intro/ ). This should result in a click free car engine that will sound much better than simply starting and stopping the individual .wav files from playing.

Answer 8

使用 HTML5 音频尚无法实现这一点，因为对于每个音频项目，结束事件仅触发一次。

Answer 9

my approach is a daunting one, but the one that works for ambient background music

let's say our track has 5.3 seconds

you have 2 audio tracks of the same file. when is one about to end (for example 1 second before ending - 4.3s-5.3s ) you fade it out (set volume by percent of position within this one second). at the same time, the second track starts fading in (0s-1s). you can do it via some 50ms interval, or something else, depending on your audio library

after the playback ends you switch a boolean variable that controls this fadein/fadeout and reverse which track will fade in and which track will fade out in the next run