Loading an Audio buffer and play it using the audio tag

To answer the real question not with a "just don't use the audio element", I'd like to provide another solution. I've wanted to show the user the audio controls, thus I needed a solution for the question asked.

Actually you just need to convert the ArrayBuffer to a Blob, get an URL for it and map this to the <audio> element's src attribute:

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

Please don't forget to change the mime type accordingly and don't forget to call

window.URL.revokeObjectURL(url);

when unloading your page/component for garbage collection.


If you just want to play audio-files, you probably want to use the <audio> tag for sake of simplicity. (and for not being limited to webkit browsers).

In your example you do not set the buffer of your buffer-source node:
if you want to keep the overall structure, you can simply add the line source.buffer = buffer, like:

context.decodeAudioData(request.response, function(buffer) {
    $('#play').click(function() {
          var source = context.createBufferSource();
          source.buffer = buffer;
          source.connect(context.destination);
          source.noteOn(0);
    }).removeAttr('disabled');
}, function(err) { console.log(err); })

(your code's readability would improve by separating the audio decoding from the event-handling).

your other question on audio.src:
you should set audio.src to the URL of the audio file.