JSFiddle - React, Tailwind, and code Playground

by mrcatoff

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/6.2.0/wavesurfer.min.js"></script>
</head>
<body>
<div id="waveform" style="max-width: 400px;"></div>
<input type="checkbox" class="waveform-toggle">
<button onclick="first_channel.play();second_channel.play();">
    Backward
</button>

</body>
</html>

JavaScript

const first_channel = new Audio('https://krisp.ai/wp-content/themes/krisp-v4/audios/street-before.mp3');
    const second_channel = new Audio('https://krisp.ai/wp-content/themes/krisp-v4/audios/street-after.mp3');
    const wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'grey',
        progressColor: 'hsla(200, 100%, 30%, 0.5)',
        cursorColor: '#fff',
        barWidth: 2,
        height: 50,
        barHeight: 3
    });

    function WaveSurferSeekTo(seek) {
        wavesurfer.seekTo(seek);
    }

    first_channel.addEventListener('timeupdate', function () {
        WaveSurferSeekTo(first_channel.currentTime / first_channel.duration);
    });
    /*second_channel.addEventListener('timeupdate', function () {
        if (!second_channel.paused) {
            first_channel.currentTime = second_channel.currentTime;
            WaveSurferSeekTo(second_channel.currentTime / second_channel.duration);
        }
    });*/
    /*first_channel.addEventListener('play', function () {
        second_channel.pause();
    })
    second_channel.addEventListener('play', function () {
        first_channel.pause();
    })*/
    document.querySelector('.waveform-toggle').addEventListener('change', function () {
        if (this.checked) {
            second_channel.muted = false;
            first_channel.muted = true;
        } else {
            second_channel.muted = true;
            first_channel.muted = false;
        }
    })

    wavesurfer.load(first_channel);