I have dropdown with two modes, one is solo mode and one is unison. When unison mode is selected I want multiple wavesurfer objects to have their playheads synced. There is an original wavesurfer and several other wavesurfers that should move to the same progress state as the original.
I tried using the following code, but when I moved the playhead for the original wavesurfer, the others did not move.
/** handle unison button function */ handleUnison(playPauseButton) { let waveSurferList = this.getWavesurferList(); let originalWavesurfer = waveSurferList.shift(); if (originalWavesurfer.isPlaying()) { playPauseButton.children[0].style.display = ""; playPauseButton.children[1].style.display = "none"; else { playPauseButton.children[0].style.display = "none"; playPauseButton.children[1].style.display = ""; } originalWavesurfer.seekTo( originalWavesurfer.getCurrentTime() / originalWavesurfer.getDuration() ); originalWavesurfer.playPause(); waveSurferList.forEach((waveItem) => { waveItem.playPause(); }); this.syncWaveSurfers(); }
/** Synchronize all WaveSurfer instances when in unison mode. */ syncWaveSurfers() { let waveSurferList = this.getWavesurferList();
Find the reference waveSurfer (the first one) let referenceWaveSurfer = waveSurferList.shift();
Listen for the "seek" event on the reference WaveSurfer referenceWaveSurfer.on("seek", function (progress) { Update the playheads of other WaveSurfers waveSurferList.forEach((waveSurfer) => { Ensure that we don't trigger an infinite loop by ignoring the reference waveSurfer if (waveSurfer !== referenceWaveSurfer) { waveSurfer.seekTo(0); } }); }); }