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

@yairMoshkovitz that's because this snippet uses the reader in a wrong way, one .read() call only gives you a ≈4k bytes chunk.

Here's how you could do it 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.