Update audio.js

audio.js

@@ -1,7 +1,7 @@
 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 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) {
@@ -13,33 +13,35 @@ document.addEventListener('DOMContentLoaded', function () {
           const otherAudio = otherContainer.querySelector('audio');
           if (otherAudio !== audio && !otherAudio.paused) {
             otherAudio.pause();
-            otherAudio.classList.add('d-none'); // Hide other audio elements
+            otherAudio.style.display = 'none'; // Hide other audio elements
           }
         });
 
-        // Toggle the display class of the audio element
-        audio.classList.toggle('d-none');
-        if (audio.paused) {
+        // 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();
 
-  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;
 
-        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';
-            }
-        });
+        if (songName.includes(searchText) || description.includes(searchText)) {
+          container.style.display = 'block';
+        } else {
+          container.style.display = 'none';
+        }
+      });
     });
-  });
+});
+