How to Replay an Audio-Blob in Javascript?

Question

I want to replay an audio blob (wav), recorded in javascript using the Web Audio API.

I tried the following:

function replayBlob( blob ) {
    var blobURL = window.URL.createObjectURL(blob);
    var audio0 = new Audio(blobURL);
    audio0.play();
}

But this code does not replay the audio blob.

I also tried replaying the blob via an html audio tag:

<audio id="wavSource" 
    src="blob:http%3A//localhost/f0b6bae9-7c70-4793-8436-7755a40bae3f" 
    type="audio/wav" controls>
</audio>

with the blob source being set programmatically using:

var blobURL = window.URL.createObjectURL(blob);
document.getElementById("wavSource").src = blobURL;

and the audio play call using:

document.getElementById("wavSource").play();

but no sound is played.

For verification, I downloaded the blob with:

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = blobURL;
a.download = "test.wav";
a.click();

The downloaded blob contains the correct audio data in the wav format. How can I play this audio data from the blob in javascript?

Answer 1

If you're using Web Audio to record, I figure you can use it for playback as well, right? If so, recorder.js has a how-to in the README: https://github.com/mattdiamond/Recorderjs

I'll go ahead and copy the gist of here, in case recorder.js changes in the future. You have two Float32Arrays (left and right channel) and then do this;

function getBufferCallback( buffers ) {
    var newSource = audioContext.createBufferSource();
    var newBuffer = audioContext.createBuffer( 2, buffers[0].length, audioContext.sampleRate );
    newBuffer.getChannelData(0).set(buffers[0]);
    newBuffer.getChannelData(1).set(buffers[1]);
    newSource.buffer = newBuffer;

    newSource.connect( audioContext.destination );
    newSource.start(0);
}