How to loop wav in web audio a certain amount of times?

Question

I know there's an option loop=true on an AudioBufferSourceNode. But I just want to repeat the wav a certain number of times. For example, how might I repeat it twice?

var url  = 'main.wav';

var context = new AudioContext();
var source = context.createBufferSource();

source.connect(context.destination);

var request = new XMLHttpRequest();
request.open('GET', url, true); 
request.responseType = 'arraybuffer';
request.onload = function() {
    context.decodeAudioData(request.response, function(response) {

        source.buffer = response;

        source.start(0);
        source.start(source.buffer.duration); // doesn't work "cannot call start more than once."
        //source.loop = true; // this is infinite amount of times, not good

    }, function () { console.error('The request failed.'); } );
}
request.send();

I also tried to create a second buffer:

var source2 = context.createBufferSource();

// inside callback
source2.buffer = response; // same response so I don't need to load this separately
source2.start(source.buffer.duration); // doesn't work

But that didn't work either. Any ideas?

Answer 1

Your approach with using second buffer is almost correct. You just need to use absolute start time, not relative. To obtain absolute time sum audio context's current time and duration of the sound:

// Play first sound now
var source1 = context.createBufferSource();
source1.buffer = response;
source1.start(context.currentTime);  // This is the same as source1.start();

// Play second sound with a delay
var source2 = context.createBufferSource();
source2.buffer = response;
source2.start(context.currentTime + response.duration);

This approach provides gapless playback (if your files are gapless).

You can wrap this into a simple function:

function play(context, buffer, delay=0) {
    var source = context.createBufferSource();
    source.buffer = buffer;
    source.start(context.currentTime + delay);
    return source;
}

...

// Play the sound twice, one after another
play(context, response, 0);
play(context, response, response.duration);