Wavesurfer.js: IE11: Fallback to MediaElement not working, it always tries to access AudioContext

[lorenzos]

README says that the player will fall back on audio element (without graphics) on browser that don't support WebAudio (i.e. IE 11), but still it doesn't look to work at all if WebAudio is missing.

IE 11, for example, throws an error because wavesurfer tries to access AudioContext or window.webkitAudioContext, I think from here: https://github.com/katspaugh/wavesurfer.js/blob/ff5d8b442bc503890068b5a206eaf9142fffbf1f/src/webaudio.js#L76-L77

You can test the issue just by opening the audio element example page on your site in IE 11. Here's the error in the browser console (pardon the Italian locale, the red text says something like "Invalid action for the object"):

Maybe the fallback mechanisms has been dropped in newer releases? Thanks.

Wavesurfer.js version(s): 2.2.1
Browser version(s): Internet Explorer 11

[thijstriemstra]

@lorenzos the MediaElement extends the WebAudio backend, so it shares that code.

what does wavesurfer.backend.supportsWebAudio() return?

[lorenzos]

@lorenzos the MediaElement extends the WebAudio backend, so it shares that code.

In fact, I see. I think the problem is exactly here. The MediaElement backend constructor calls super(), so this line in WebAudio is run, and the getAudioContext() method is called, throwing the error in IE 11.

what does wavesurfer.backend.supportsWebAudio() return?

I can't tell, because I'm not able to construct any wavesurfer instance in IE 11. However, if the code is simply !!(window.AudioContext || window.webkitAudioContext) as I see, it will return false.

[thijstriemstra]

@lorenzos that's the line, yep. What if you pass in a fake audiocontext using the options, e.g. audioContext: {}?

[lorenzos]

@thijstriemstra It does work!

[thijstriemstra]

So we need some check in the MediaElement class that makes sure params.audioContext is an empty object when it's run in the IE11 browser. Want to make a PR for that @lorenzos?

[lorenzos]

Sure.

[lorenzos]

Done.

The Audio Element demo still doesn't work in IE 11, but now it's just because IE doesn't support WAV files. I tried using an MP3 instead (this is not included in the PR, obviously) and it works as expected: plain line instead of waveform, but playing and seeking correctly.

[thijstriemstra]

Thanks. Perhaps we can have the main example on the website (and the audio element example) load an mp3 instead. Is mp3 supported on all browsers?

[lorenzos]

Looks like it's supported everywhere.

[thijstriemstra]

I tried using an MP3 instead (this is not included in the PR, obviously) and it works as expected: plain line instead of waveform, but playing and seeking correctly.

Maybe I misunderstand, but are you saying it also doesn't work with mp3 in IE11?

[lorenzos]

Once the AudioContext issue is fixed, the demo still doesn't work in IE 11 since the browser doesn't support WAV files at all. It works if you use an MP3 instead. Obviously the waveform isn't drawn in any case, unless you load peaks manually using the load() second argument.

[thijstriemstra]

That's good news. Leaving the demo's with .wav is fine then, if people want to use IE11 they'll figure out MP3 is their only option.

[gabyhernan]

Thanks for this fix!

I have to use a minified version for work & had to add this fix in the minified way.
Here it is in case anyone needs to replace before the new release
i.ac = e.audioContext || (i.supportsWebAudio() ? i.getAudioContext() : {}),