gapless looping audio html5

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 a开发者_Python百科nd 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.

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

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.

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:

1. SoundManager2 - a great library that would probably be helpful here, though it'll use Flash to play the audio in this case;

2. 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.

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.

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.

This is not yet possible using HTML5 audio because the ended event triggers only once per audio item.

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