Untitled

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">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
      });
    });
});