TypeError: Failed to set the 'buffer' property on 'AudioBufferSourceNode': The provided value is not of type 'AudioBuffer

Question

I am working on the existing codoCircle. Put the volume down.

It works out as expected.

Now i want to use the same code here in codepen and i get this error

TypeError: Failed to set the 'buffer' property on 'AudioBufferSourceNode': The provided value is not of type 'AudioBuffer

I did a bit of research and i have found the first answer useful.

The answer says

At the time i assign in the playSound player.buffer = buffer, buffer is still undefined because the load callback hasn't fired.

This makes sense to me, so then i have tried to do a setTimeout like:

setTimeout(playSound, 9000);

It did not work out.

Do you know any workaround for this? And why in CodeCircle works and not in Codepen?

Answer 1

his makes sense to me, so then i have tried to do a setTimeout like ..

That's more a quickfix, but tricky as you don't know for sure if everything is loaded.

The solution is to wait until every sample is loaded. The best way is to use Promises for that, but that needs a (large) refactor and isn't compatible with all the current browsers (so you need then Babel or Typescript etc).

So I made a easier approach: for every sample I have created a boolean variable that will be set to true when loading has finished (in the callback function)

var loadedHat = false;
var loadedSnare = false;
var loadedBd = false;

loadSample('cl_hat_3001.wav', function (buffer) {
    hat = buffer;
    loadedHat = true;
    startWhenAllLoaded();
});
loadSample('brp_snrim1.wav', function (buffer) {
    snare = buffer;
    loadedSnare = true;
    startWhenAllLoaded();

});
loadSample('bd08.wav', function (buffer) {
    bd = buffer;
    loadedBd = true;
    startWhenAllLoaded();
});

Then I wrapped your code to start in a start function and made a startWhenAllLoaded, which starts when all the tree booleans are true

function startWhenAllLoaded()
{
    if(!started && loadedHat && loadedSnare && loadedBd){
        started = true;
        start();
    }
}

The edited codepen is here

NB: Not sure if everything works now OK, the error is gone but I think the code need some tweaking