How get URL.createObjectURL(blob) to work in Safari

Question

The following code is triggered by a user clicking on a button. It works in Chrome and Firefox. It does NOT work in Safari (11.1).

const blob = new Blob([binary], {type: 'audio/ogg'});
const audio = new Audio();
audio.src = URL.createObjectURL(blob); 
audio.load();
audio.play();

The following code works in all 3 browsers:

const audio = new Audio();
audio.src = 'test.mp3'; 
audio.load();
audio.play();

So, the issue is with URL.createObjectURL(blob) in Safari. The Safari console.log error thrown by audio.play() is:

Unhandled Promise Rejection: NotSupportedError: The operation is not supported.

If audio.play() is commented out, no error is thrown.

Thanks

Answer 1

for mp3 type, you should use mime type audio/mpeg.

let audioBlob = new Blob([blob], { type: 'audio/mpeg' });
audio.src = URL.createObjectURL(audioBlob); 

Answer 2

When creating the blob the type matters. when i set the type to wav, my code worked.

{type: 'audio/wav'}