Media Element Fallback Example

How to Enable the Fallback

wavesurfer.js will automatically fallback to HTML5 Media if Web Audio is not supported. However, you can choose to use audio element manually. Simply set the backend option to "MediaElement".

var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#wave'),
    backend: 'MediaElement'

Pre-rendered Peaks

If you have pre-rendered peaks (on your server), you can pass them into the load function. This is optional–if you don't provide any peaks, wavesurfer.js will first draw a thin line instead of a waveform, then attempt to download the audio file via Ajax and decode it with Web Audio if available.

Check the FAQ for instructions on how to generate peaks.


Press this button to see the same demo with pre-decoded peaks:

Fork me on GitHub