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?

Answer 1

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"')