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 songContainers = document.querySelectorAll('.movie');

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

        // Hide all other audio elements except the one clicked
        songContainers.forEach(function (otherContainer) {
          const otherAudio = otherContainer.querySelector('audio');
          if (otherAudio !== audio && !otherAudio.paused) {
            otherAudio.pause();
            otherAudio.style.display = 'none'; // Hide other audio elements
          }
        });

        // Toggle the display of the audio element
        if (getComputedStyle(audio).display === 'none') {
          audio.style.display = 'inline';
          audio.play();
        } else {
          audio.style.display = 'none';
          audio.pause();
        }
      });
    });

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

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

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