Download Audio from AJAX and Play as Blob

playAudioAsBlobViaAjax.js

// Updated on 16th May, 2024 based on @chamie's suggestion. 
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();

thanks!
i have a problom, this function load only few secondes.
can you halp my?

@yairMoshkovitz that's because one .read() call only gives you a ≈4k bytes chunk.

Thankfully, you don't need it at all nowadays, here's how you could achieve this in 2024:

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

Thanks @chamie. Updating the code with your suggestion.