Cannot replay MP3 in Firefox using MediaSource even though it works in Chrome

Question

I have implemented a simple audio player in my web application and noticed that it is not working in Firefox (let me just ... ).

What I get is an error:

ERROR DOMException: MediaSource.addSourceBuffer: Type not supported in MediaSource

This is followed by a warning:

Cannot play media. No decoders for requested formats: audio/mpeg

This is the implementation for the sourceopen event handler:

private onSourceOpen = (e) => {
  this.logger.debug('onSourceOpen');

  if (!this.sourceBuffer) {
    this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/mpeg');
  }

  this.mediaSource.removeEventListener('sourceopen', this.onSourceOpen);
  this.fetchRange(this.trackPlayUrl, 0, this.segmentLength, (chunk) => this.appendSegment(chunk));
}

Where

// Create the media source object
this.mediaSource = new MediaSource();
this.mediaSource.addEventListener('sourceopen', this.onSourceOpen);

Why does it hate me?

It's not just you. MediaSource hates everyone. :-) See also: https://stackoverflow.com/a/34498784/362536 — Brad, Sep 27 '20 at 15:34
@Brad Thanks for the link. Guess I have to use a different format then .. Also glad I'm not alone here .. ^^ — Stefan Falk, Oct 04 '20 at 12:47

Anonymous Coward · Accepted Answer · 2020-10-12T13:49:34.400

0

Before you try to create a SourceBuffer, you should always call MediaSource.isTypeSupported to determine whether it is likely to play. If that returns false, the user agent is telling you it definitely won't work.

On the latest Firefox:

>> MediaSource.isTypeSupported('audio/mpeg')
<- false

It hates you because Firefox's MediaSource implementation can't play content with that MIME type, whereas Chrome's can.

AAC in ISOBMFF has very broad support, though this would require transcoding and repackaging your audio - try:

MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.2"')

edited Oct 12 '20 at 13:49

answered Sep 30 '20 at 15:23

Anonymous Coward

1,096
11
22

So, that means that mp3 is not the format I can use here? Is there an overview somewhere where I can see what mime-types are supported by what browsers in general? I just can't find anything .. – Stefan Falk Oct 04 '20 at 13:27
AAC in an ISOBMFF container has broad support, but you'd have to transcode and repackage your media. String for `isTypeSupported` would be `'audio/mp4, codecs="mp4a.40.2"'` for AAC-LC. – Anonymous Coward Oct 04 '20 at 21:01
I've just tried that but Chrome does not support `audio/mp4` it would seem.. I get `false` for `audio/mp4` and `audio/mp4, codecs="mp4a.40.2"`. Only `audio/mpeg` returns `true` asking `isTypeSupported`. – Stefan Falk Oct 10 '20 at 09:49
Apologies - it's my error. That comma should be a `;`, giving `'audio/mp4; codecs="mp4a.40.2"'`, which definitely returns `true` for me. Will edit original answer. – Anonymous Coward Oct 12 '20 at 13:44
Ineed, that's giving `true` now. I have also tried just putting `aucio/aac` which does not seem to make a difference for playing the audio though. – Stefan Falk Oct 12 '20 at 15:34
This $h!7 is still not working ^^ I now convert my audios to AAC format using ffmpeg, and yes, `isTypeSupported` returns `true` but the MediaSource says: `MediaSource.addSourceBuffer: Type not supported in MediaSource` .. it only works on chrome but not on Firefox .. – Stefan Falk Oct 18 '20 at 10:47
I created a new question for this. I guess I need to be more specific with ffmpeg .. https://stackoverflow.com/questions/64412488/convert-audio-to-audio-mp4-codecs-mp4a-40-2 – Stefan Falk Oct 18 '20 at 11:00

Cannot replay MP3 in Firefox using MediaSource even though it works in Chrome

1 Answers1