Audio Element Fallback Example

How to Enable the Fallback

---

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

var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
    container: document.querySelector('#wave'),
    backend: 'AudioElement'
});

Pre-rendered Peaks

If you have pre-rendered peaks (e.g. on server), you can pass them into the load function. This is optional – if you don't provide any peaks, waserver.js will just draw a thin line instead of a waveform.

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

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