BLOCK 1 HTML TAB

document.addEventListener('DOMContentLoaded', function () {
    let waveformContainer = document.getElementById("waveform-container");

    // Dynamically create HTML for each waveform container
    wavesurferObjects.forEach((item, index) => {
        waveformContainer.innerHTML += `
        <div class="waveform-container" style="display: flex; align-items: center;">
            <!-- Play/Pause Button -->
            <i id="playPause${index}" class="control_button material-icons" style="font-size: 48px;">play_arrow</i> <!-- Increase font-size -->
            
            <!-- Waveform -->
            <div id="wavesurfer-container${index}" class="wavesurfer-container"></div>
        </div>
        `;
    });

    // Initialize each WaveSurfer instance
    wavesurferObjects.forEach((item, index) => {
        let waveSurfer = WaveSurfer.create({
            container: `#wavesurfer-container${index}`,
            waveColor: "#1c1b1b",
            progressColor: "#6191FB",
            height: 50,
            normalize: true,
            responsive: true,
            backend: "MediaElement",
            hideScrollbar: true,
            cursorWidth: 0,
        });

        waveSurfer.load(item.audioURL);

        let playPauseButton = document.getElementById(`playPause${index}`);
        playPauseButton.classList.add("control_button");

        // Play/Pause button logic
        playPauseButton.addEventListener("click", function () {
            if (waveSurfer.isPlaying()) {
                waveSurfer.pause();
                playPauseButton.innerHTML = "play_arrow";
            } else {
                waveSurfer.play();
                playPauseButton.innerHTML = "pause";
            }
        });

        // Reset play button when the track finishes
        waveSurfer.on('finish', function () {
            playPauseButton.innerHTML = "play_arrow";
        });
    });
});