CODEWITHSUNDEEP
safarihtml5-audio
RichardZ
RichardZ

Reputation: 355

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

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

Upvotes: 2

Views: 4471

Answers (2)

Jun
Jun

Reputation: 3044

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

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

Upvotes: 5

RichardZ
RichardZ

Reputation: 355

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

{type: 'audio/wav'}

Upvotes: 3

Related Questions