What's the best way to get an audio buffer into a blob that can be played by an audio element?

Question

I have an AudioBuffer stored as a variable, and I would like to have it be played by an Audio element. Here is my current non-functioning code:

const blob = new Blob(audioBuffer.getChannelData(1), { type: "audio/wav" });
const url = window.URL.createObjectURL(blob);
audioElement.src = url;

When I try to play audioElement, I get the following error:

Uncaught (in promise) DOMException: The element has no supported sources.

Does anyone have any ideas on how to solve this? Thanks in advance!

Answer 1

AudioBuffer is PCM data, not encoded as WAV yet. If you need WAV you should get a library to do the encoding for you, such as https://www.npmjs.com/package/audiobuffer-to-wav

After including above code (you can just copy the audioBufferToWav function and the functions it calls below it out of index.js).

const blob = new Blob([audioBufferToWav(audioBuffer.getChannelData(1))], { type: "audio/wav" });
const url = window.URL.createObjectURL(blob);
audioElement.src = url;

Below using Web Audio API to playback the PCM AudioBuffer directly.

var myArrayBuffer = audioBuffer;
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source = audioCtx.createBufferSource();
source.buffer = myArrayBuffer;
source.connect(audioCtx.destination);
source.start();