EncodingError when audio can be played

[UchihaYuki]

Bug description

I got the "EncodingError: Decoding failed" error when the audio element can be played back itself.
Please note that the audio.src is a video file, but the same code works on other platforms.

Environment

• Browser: iOS Safari

Minimal code snippet

The following code is written in Angular, but you can get the idea.

<input type="file" (change)="filesOpened($any($event.target).files)" />
<audio id="audio" #audio controls></audio>
<div id="waveform"></div>
<button class="btn btn-primary" (click)="audio.play(); audio.pause()">Interact</button>

  filesOpened(files: FileList) {
    const audio = $('#audio')[0] as HTMLAudioElement;
    audio.src = URL.createObjectURL(files[0]);
    const waveSurfer = WaveSurfer.create({
      container: $('#waveform')[0],
      height: 30,
      waveColor: '#B0578D',
      progressColor: '#7d3d63',
      cursorColor: '#000000',
      media: audio,
    });
    waveSurfer.on('error', (err) => {
      alert(err);
      console.warn(err);
    });
  }

Expected result

Show the waveform after clicking the 'Interact' button.

Obtained result

Got the error

Screenshots

The screen just shows "EncodingError: Decoding failed"， but I can play the audio by clicking the audio element's play button.

[katspaugh]

Most likely a MIME type issue.

When you create an object URL with URL.createObjectURL(files[0]), the browser relies on the MIME type embedded in the File object. If the file lacks a recognizable or supported MIME type (e.g. from a raw recording or incorrectly tagged file), decoding can fail.

You could try loading a blob directly instead.

const audioBlob = files[0]

const waveSurfer = WaveSurfer.create({
    container: $('#waveform')[0],
    height: 30,
    waveColor: '#B0578D',
    progressColor: '#7d3d63',
    cursorColor: '#000000',
    blobMimeType: 'audio/mpeg', // pass the right MIME type here (optional)
})

waveSurfer.loadBlob(audioBlob)

[UchihaYuki]

It shows DOMException: Decoding failed if I load directly from File.
By the way, I can't guess the blobMimeType and hard code it, the file is selected by the end user.

[UchihaYuki]

I will set up a mini reproduction with a GitHub page later, please wait a second.

[UchihaYuki]

I use a large file (~40MB) in this demo (You should wait like 1 minute for the waveform to appear after press the play button):
https://uchihayuki.github.io/wavesurfer-encoding-error
You can see from the following picture that the file can be played by Safari, but there is an EncodingError:

[UchihaYuki]

@katspaugh

[katspaugh]

iOS Safari likely doesn't support decoding that file type with Web Audio.

[UchihaYuki]

iOS Safari likely doesn't support decoding that file type with Web Audio.

Is there a way to work around it? I want to support as many users as possible.

[entonbiba]

@UchihaYuki these are the audio codecs supported by most browsers and devices. If it's wav or mp3 it should be able to decode with web audio. If its an unsupported file type you would need to either convert that prior or upload it to a server and stream it as a mp3.
https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Audio_codecs