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.