Merge pull request #482 from Mayukh-Mandal2005/audio-controls-improve…

…ment Improved the audio controls on mantra-audio page
vishal02527 · Oct 16, 2024 · 1533579 · 1533579
2 parents 2ad2034 + 8b33cb9
commit 1533579
Showing 1 changed file with 22 additions and 7 deletions.
diff --git a/morning-mantra-audio.html b/morning-mantra-audio.html
@@ -23,8 +23,8 @@
       }
       .scroll-top-btn {
         position: fixed; /* Fixed position */
-        bottom: 30px; 
-        right: 30px; 
+        bottom: 30px;
+        right: 30px;
         background-color: #330867;
         color: white;
         border: none;
@@ -320,7 +320,7 @@ <h2>Soothing Krishna Chants</h2>
             Krishna. Feel the positive energy and tranquility with each mantra.
           </p>
           <div class="audioBtnDiv">
-            <audio controls>
+            <audio class="mantra-audio" controls>
               <source
                 src="./audios/Soothing-Krishna-Chants.mp3"
                 type="audio/mpeg"
@@ -345,7 +345,7 @@ <h2>Morning Bliss</h2>
             serenity. Let the divine vibrations guide you through your day.
           </p>
           <div class="audioBtnDiv">
-            <audio controls>
+            <audio class="mantra-audio" controls>
               <source src="./audios/morning-bliss.mp3" type="audio/mpeg" />
               Your browser does not support the audio element.
             </audio>
@@ -362,7 +362,7 @@ <h2>Krishna Relaxing Flute</h2>
             flute.
           </p>
           <div class="audioBtnDiv">
-            <audio controls>
+            <audio class="mantra-audio" controls>
               <source
                 src="./audios/Krishna-Relaxing-Flute.mp3"
                 type="audio/mpeg"
@@ -387,7 +387,7 @@ <h2>Radiant Krishna Aarti</h2>
             positivity and divine blessings. Enhance your spiritual experience.
           </p>
           <div class="audioBtnDiv">
-            <audio controls>
+            <audio class="mantra-audio" controls>
               <source
                 src="./audios/Radiant-Krishna-Arti.mp3"
                 type="audio/mpeg"
@@ -409,7 +409,7 @@ <h2>Radiant Krishna Aarti</h2>
           <h2>Sri Krishna Ashtakam</h2>
           <p>Listen to this powerfull and devine Krishna Ashtakam.</p>
           <div class="audioBtnDiv">
-            <audio controls>
+            <audio class="mantra-audio" controls>
               <source
                 src="./audios/Sri-Krishna-Ashtakam.mp3"
                 type="audio/mpeg"
@@ -483,6 +483,21 @@ <h3>Follow Us</h3>
       scrollTopBtn.onclick = function () {
         window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
       };
+
+      // Get all audio elements
+        const audioElements = document.querySelectorAll('.mantra-audio');
+
+        audioElements.forEach(audio => {
+            audio.addEventListener('play', () => {
+                // Pause all other audio elements when one is played
+                audioElements.forEach(otherAudio => {
+                    if (otherAudio !== audio) {
+                        otherAudio.pause();
+                    }
+                });
+            });
+        });
+
     </script>
   </body>
 </html>