Update audio.js

audio.js

@@ -2,30 +2,32 @@ 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');
+    const songContainers = document.querySelectorAll('.movie');
 
-  songContainers.forEach(function (container) {
-    container.addEventListener('click', function () {
+    songContainers.forEach(function (container) {
+      container.addEventListener('click', function () {
         const audio = this.querySelector('audio');
 
-        // Pause all other audio elements except the one clicked
+        // 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.classList.add('d-none'); // Hide other audio elements
+            otherAudio.style.display = 'none'; // Hide other audio elements
           }
         });
 
-        audio.classList.toggle('d-none');
-
-        if (audio.paused) {
-          audio.play();
-        } else {
+        // Toggle the display of the audio element
+        if (audio.style.display === 'block') {
           audio.pause();
+          audio.style.display = 'none';
+        } else {
+          audio.style.display = 'block';
+          audio.play();
         }
       });
     });
+
   searchBar.addEventListener('input', function() {
         const searchText = searchBar.value.toLowerCase();