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?

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?

• javascript
• audio
• web-audio-api

• 2 are you sure the blob is in wav format? that means if you download the blob, it will play in a media player... – dandavis Commented Jan 21, 2016 at 22:02
• yes it plays in a media player. any other ideas why i might not hear anything? – user2212461 Commented Jan 21, 2016 at 22:06
• 1 try adding controls and appending it to the body and seeing if you can play it that way – dandavis Commented Jan 21, 2016 at 22:07
• I tried but also no sound is played, please find my update in the post. Any ideas what I am doing wrong here? – user2212461 Commented Jan 21, 2016 at 22:43
• 2 you can't hard-code a blob url into the source, it has to be set with javascript. – dandavis Commented Jan 21, 2016 at 22:44

3 Answers 3

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);
}

The simplest option is to convert to a 64 bit encoding

const reader = new FileReader();
reader.onload = function(e) {
    const srcUrl = e.target.result;
    audioNode.src = srcUrl;
};
reader.readAsDataURL(blob);

This code is from here

It worked for me

const response = await fetch("http://path/to/audio.wav");
const data = await response.arrayBuffer();
const blob = new Blob([data], { type: "audio/wav" });
const blobUrl = URL.createObjectURL(blob);
const audio = new Audio();
audio.src = blobUrl;
audio.controls = true;
document.body.appendChild(audio);

// Optionally, if you want to start playing right away:
audio.play();

Here was my actual code:

let blobUrl = URL.createObjectURL(blob);
await html_audio(blobUrl);
async function html_audio(src) {
  let a = new Audio(src);
  let result = new Promise((resolve) => {
    a.addEventListener("ended", function () {
      a.currentTime = 0;
      resolve();
    });
  });
  await a.play();
  return await result;
}