Update audio.js

audio.js

@@ -1,23 +1,28 @@
- // Wait for the document to load
 document.addEventListener('DOMContentLoaded', function () {
-    // Get all the song containers
-const songContainers = document.querySelectorAll('.movie');
+  const movieContainers = document.querySelectorAll('.movie');
 
-    // Attach a click event listener to each song container
-songContainers.forEach(function (container) {
-container.addEventListener('click', function () {
-    const audio = this.querySelector('audio'); // Get the audio element inside the container
+  movieContainers.forEach(function (container) {
+    container.addEventListener('click', function () {
+      const audio = this.querySelector('audio');
 
-        // Toggle the visibility of the audio element
-    audio.classList.toggle('d-none');
-
-        // Check if the audio is playing or paused, and toggle play/pause accordingly
-        if (audio.paused) {
-          audio.play(); // Play the audio if it's paused
-        } else {
-          audio.pause(); // Pause the audio if it's playing
+      // 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');
+    });
+  });
+});