audio.js

document.addEventListener('DOMContentLoaded', function () {
  const searchBar = document.getElementById('searchBar');
    const songNames = document.querySelectorAll('h1[style="font-size: 28px;"]');
    const descriptions = document.querySelectorAll('p[style="font-size: 20px;"]');
  const movieContainers = document.querySelectorAll('.movie');

  movieContainers.forEach(function (container) {
    container.addEventListener('click', function () {
      const audio = this.querySelector('audio');

      // Pause all other audio elements except the one clicked
      movieContainers.forEach(function (otherContainer) {
        const otherAudio = otherContainer.querySelector('audio');
        if (otherAudio !== audio && !otherAudio.paused) {
          otherAudio.pause();
          otherAudio.classList.add('d-none');
        }
      });

      // Play or pause the audio based on its current state
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }

      // Toggle the display of the audio element
      audio.classList.toggle('d-none');
    });
  });

  searchBar.addEventListener('input', function() {
        const searchText = searchBar.value.toLowerCase();

        songNames.forEach((song, index) => {
            const songName = song.textContent.toLowerCase();
            const description = descriptions[index].textContent.toLowerCase();

            if (songName.includes(searchText) || description.includes(searchText)) {
                song.parentElement.parentElement.style.display = 'block';
            } else {
                song.parentElement.parentElement.style.display = 'none';
            }
        });
    });
});