How can we play wavesurfer with video when waveform data is loaded with JSON?

[bugcoder]

Version: wavesurfer.js 6.2.0 (2022-05-16)
Browser: Chrome Version 104.0.5112.79
OS: macOS Monterey 12.5

We want to play wavesurfer with sync to video (video is loading in chunks) and wavefrom data is loaded using JSON after using audiowaveform to convert mp3 to JSON:

audiowaveform -i don.mp3 -o don.json --pixels-per-second 20 --bits 8

Initialization of Wavesurfer

var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        //barWidth: 1,
        //cursorWidth: 1,
        waveColor: 'violet',
        progressColor: 'purple',
        normalize: true,
        //backend: video,
        plugins: [
            WaveSurfer.timeline.create({
                container: "#wave-timeline"
            }),
            WaveSurfer.regions.create({
                dragSelection: {
                    slop: 5
                }
            })
        ]
    });

Code to load wavesurfer with JSON data:

fetch("don.json")
        .then(response => {
            if (!response.ok) {
                throw new Error("HTTP error " + response.status);
            }
            return response.json();
        })
        .then(peaks => {
            console.log("loaded peaks! sample_rate: " + peaks.sample_rate);
            // load peaks into wavesurfer.js
            wavesurfer.load(mediaElt, peaks.data);
        })
        .catch((e) => {
            console.error('error', e);
        });

What we want to achieve:

• Syncing video and waveform with play, pause and seek feature
• Showing timeline on waveform
• Using regions to select some part on waveform

[entonbiba]

@bugcoder you can use the videojs-wavesurfer project for this, here is an example:

https://collab-project.github.io/videojs-wavesurfer/demo/video.html