I've implemented an HTTPS endpoint in php that returns mp3 data. Then, after an ajax call in javascript, I play it via the following:
let blob = new Blob([response.value], { type: 'audio/mp3' });
cleanup = () => {
// Not 100% sure this is needed:
audio.src = '';
// But this is:
URL.revokeObjectURL(url);
};
let url = URL.createObjectURL(blob)
let audio = new Audio();
audio.addEventListener('ended', cleanup);
audio.src = url;
audio.play();
This seems to be working somewhat, but I'm hitting some browser issues in Fx playback bugs and some Chrome devtools crashes. I assume that maybe these issues are based on my use of URL.createObject()
. It sounds like in the future the way to do this will be to set audio.srcObject
instead, but it's not ready in Chrome yet, at least not for Blob
s. MediaStream
s are supported, but I can't find a way to create a MediaStream
from the response body of my request.
So, my question: is there a way to play my mp3 using audio.srcObject = someMediaStream
? Or do I need to stick with URL.createObjectURL
until audio.srcObject = new Blob()
is supported? This will only be running in Chrome.