Untitled
BLOCK 1 SCRIPT TABdocument.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">play_arrow</i> <!-- Material Icons play_arrow --> <!-- 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}`, // This matches with the HTML container ID waveColor: "#1c1b1b", // Color for the waveform progressColor: "#6191FB", // Color for the progress bar height: 50, normalize: true, responsive: true, backend: "MediaElement", hideScrollbar: true, cursorWidth: 0, }); // Load the audio file 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(); // Set Material Icon for play when paused playPauseButton.innerHTML = "play_arrow"; } else { waveSurfer.play(); // Set Material Icon for pause when playing playPauseButton.innerHTML = "pause"; } }); // Reset play button when the track finishes waveSurfer.on('finish', function () { playPauseButton.innerHTML = "play_arrow"; // Reset to play icon when finished }); }); });
Leave a Comment