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.

wavesurfer.load('example/media/demo.mp3');

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