var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#wavesurfer'),
    backend: 'MediaElement'
                    fetch('https://wavesurfer-js.org/example/media/demo-peaks.json')
                    .then(response => {
                                        if (!response.ok) {
                                        throw new Error('HTTP error ' + response.status);
                                        return response.json();
                    .then(peaks => {
                                        // load peaks into wavesurfer.js              
                                        wavesurfer.load('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV', peaks);
                    .catch(e => {
                                        console.error('error', e);
          
@ApayRus I want to do something similar except I am not going to use youtube video. How can I control mp4 video from regions? Like moving video frames when I move regions.
I want to render waveform once (from youtube video, scraped direct link to mp4), then save picks array , and in the future use it with official youtube-api. That means that in wavesurfer I need only Waveform, and Regions. And don't need any attached media. Then with Waveform canvas (from picks array) and Regions I'll control youtube video through api:
* show current position of playback,
* change position on click on it,
* display subtitles like labels on Regions, etc
  For now I doubled media, and it is a buggy way... it is hard to sync 2 media playbacks... Even when I mute one of them, sometimes they sound both.
  ![Screenshot from 2020-09-01 23-17-39](https://user-images.githubusercontent.com/1222611/91902074-ce1f3000-eca9-11ea-9ab7-507ca374e1cb.png)
@ApayRus I want to do something similar except I am not going to use youtube video. How can I control mp4 video from regions? Like moving video frames when I move regions.
I didn't use it with mp4 file, only with youtube API. Try events like "region-updated" or other events from here:

https://wavesurfer-js.org/plugins/regions.html
          
How can I get peak array from mp4 video file?
Use Case:

I am loading a video element as the audio source using WaveSurfer with a MediaElement backend. But I am getting only flat line in waveform instead of waves. To work around this I am planning to pass audio peak array into wavesurfer.load().
When attempting to start WaveSurfer with a MediaElement backend, and load a video element as the audio source, as shown in the docs, I get the following error consistently in every framework:
Uncaught Error: fetch url missing

at Object.t.default (fetch.js:118)

at t.value (wavesurfer.js:1448)

at t.value (wavesurfer.js:1398)

at t.value (wavesurfer.js:1322)
          
How can I get peak array from mp4 video file?
Use Case:

I am loading a video element as the audio source using WaveSurfer with a MediaElement backend. But I am getting only flat line in waveform instead of waves. To work around this I am planning to pass audio peak array into wavesurfer.load().
When attempting to start WaveSurfer with a MediaElement backend, and load a video element as the audio source, as shown in the docs, I get the following error consistently in every framework:
Uncaught Error: fetch url missing

at Object.t.default (fetch.js:118)

at t.value (wavesurfer.js:1448)

at t.value (wavesurfer.js:1398)

at t.value (wavesurfer.js:1322)
do you already have the wav data ? If so you may load it this way:
var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#wavesurfer'),
    backend: 'MediaElement'
                    fetch('https://wavesurfer-js.org/example/media/demo-peaks.json')
                    .then(response => {
                                        if (!response.ok) {
                                        throw new Error('HTTP error ' + response.status);
                                        return response.json();
                    .then(peaks => {
                                        // load peaks into wavesurfer.js              
                                        wavesurfer.load('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV', peaks);
                    .catch(e => {
                                        console.error('error', e);