Existing Media Element Example

How to Enable the Fallback

---

You can choose to use an existing HTML5 audio or video element manually. Simply set the backend option to "MediaElement" and pass the media element as the first argument to wavesurfer.load(). Include an array of peaks as the second argument, the Web Audio API will not be used to render the peaks.

var wavesurfer = WaveSurfer.create({
  container: document.querySelector('#waveform'),
  waveColor: '#A8DBA8',
  progressColor: '#3B8686',
  backend: 'MediaElement'
});

// Load audio from existing media element
var mediaElt = document.querySelector('video');

wavesurfer.load(mediaElt);

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.

// init with an array of peak data.
wavesurfer.load(mediaElt, [0.0218, 0.0183, 0.0165, 0.0198, 0.2137]);
                

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