Wavesurfer.js: Q: WebAudio & MediaElement differences

[X-Raym]

Hi !

Now that the cursor refresh rate problem is solved for media element,

What are the differences between MediaElement and WebAudio ?
Is there some limitations to use one of the other ? some performance issue ?

MediaElement seems better as it seems compatible with more older browsers and we are able to play file when they are loading... Why should we use WebAudio then ?

I recently switched WaveSurfer-WP back to MediaElement but I wonder if I have to put a switch in preferences options and let the user choose what method he like more.

Maybe these questions could be answered in the F.A.Q. of your website directly.

Thanks !

[katspaugh]

There's a lot of differences between the two technologies. For the use case of the WP plugin, I think Media Element is indeed the best choice both for performance and compatibility.

In wavesurfer.js Web Audio was initially the only option for playback, since it was used for decoding audio into waveform anyway. It's also more powerful in terms of what you can do with the audio, like connecting various filters, processors, analyzers etc.

We added Media Element player as a fallback for old browsers. By the way, even when you set media element as the playback backend, Web Audio is still used for decoding (if it's supported by the browser and unless you pass pre-generated waveform data).

More on MDN:
Web Audio: https://developer.mozilla.org/de/docs/Web/API/Web_Audio_API
Media Element: https://developer.mozilla.org/de/docs/Web/API/HTMLMediaElement

[X-Raym]

@katspaugh Ok I understand, WebAudio will be indeed the choice for the EQ plugin, microphone, and all this kind of advance audio stuffs. :)
I'll stay with MediaElement as default then (at least for now), and leave WebAudio for generating waveforms.
Cheers !

[SeanBannister]

For anyone else interested in this, here's a few things to consider...

Streaming

• WebAudio won't play the song until it's completely downloaded because it grabs the audio file using XHR.
• MediaElement will start playing the audio as soon as it starts to buffer because it uses the <audio> element.

CORS

• WebAudio uses an XHR request to grab the audio data, this means a CORS header needs to be set if the file is hosted on a remote domain.
  
  
  
  • MediaElement uses the <audio> element which can request files from remote hosts, however if you want to generate the waveform peaks in the browser it will need to use XHR and therefore need a CORS header.
  
  

Multiple requests

• MediaElement downloads the file twice if you don't provide waveform peak data. Once using the

Loading

• WebAudio loads the audio file from the server when you call: wavesurfer.play()
• MediaElement loads the audio file from the server when you call: wavesurfer.load()

[X-Raym]

@SeanBannister nice recap of the two methods. :)

[katspaugh]

Nice indeed, we should add this to the docs as a separate page.

[X-Raym]

@SeanBannister a precision to add: WebAudio player is more accurate (cursor time position and smoothness).

[danielkrich]

@katspaugh - please do add this to the docs. It's a must, I personally spent too much time on this...