Fix: don't use a blob URL for unknown MIME types

[katspaugh]

Short description

Resolves #3380

As per this comment, if an audio file is fetched from a server that doesn't send the correct MIME type, the downloaded blob might fail to play in an audio element.

Implementation details

I've added a check when setting an audio src to a blob URL: if the MIME type is not supported, it will fallback to the original audio URL.

[katspaugh]

@719media could you test this branch against the problematic server?

You can use this deployment to test: https://blob-type.wavesurfer-js.pages.dev

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[719media]

I have confirmed that the https://blob-type.wavesurfer-js.pages.dev/ page works for loading "bad mime-type" file examples as discussed in the linked issue. Vs current master where it continues to not work (no waveform/nothing plays)

[katspaugh]

Awesome, thank you! 🙏

[wfk007]

@katspaugh Is it possible to add a config for canPlayType check? It is tough to upgrade wavesurfer version in my system because of the server side.

[katspaugh]

You mean to optionally skip this check?

[wfk007]

You mean to optionally skip this check?

Yes. we can choose whether to use this check.

[katspaugh]

I would suggest an alternative to that: specify a MIME type in the options. E.g.

WaveSurfer.create({
  container: '#container',
  url: 'music.mp3',
  mimeType: 'audio/mpeg',
})

It would then use this MIME type when fetching a blob:

fetch('url-to-your-data')
  .then(response => response.blob()) // Get the blob from the response
  .then(blob => {
    if (options.mimeType) {
      const newType = options.mimeType
      const dataBlob = new Blob([blob], { type: newType }); // Override the MIME type
      return dataBlob;
    }
    return blob
  })

[wfk007]

This seems to work for me, and this design is consistent with the record plugin(mediaRecorder.mimeType). let me have a try. Thanks for your great suggestion！