File size: 1,742 Bytes
568ef55
3ee9d8c
 
 
0b515fb
568ef55
9bc84ae
 
568ef55
 
9bc84ae
568ef55
 
 
 
3ee9d8c
568ef55
 
 
3ee9d8c
 
c6b33e7
9bc84ae
1c0a46b
3ee9d8c
1c0a46b
568ef55
 
 
9bc84ae
3ee9d8c
 
1c0a46b
3ee9d8c
 
 
 
710766b
3ee9d8c
 
 
 
 
 
710766b
3ee9d8c
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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 = 'block';
          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';
        }
      });
    });
});