Merge pull request #620 from MastanSayyad/main

Fixed Music bug in the entire application
ChromeGaming · Jul 25, 2024 · 6e5af4e · 6e5af4e
2 parents 0b85dea + b474b51
commit 6e5af4e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -533,7 +533,7 @@
           <li><a href="./pages/about.html">About Us</a></li>
           <li><a href="./pages/FAQs.html">FAQs</a></li>
           <li><a href="./pages/contributors.html">Contributors</a></li>
-          <li><a href="./pages/game.html" target="_blank">Let's Go</a></li>
+          <li><a href="./pages/game.html">Let's Go</a></li>
         </ul>
         <div class="hamburger">
           <i class="fas fa-bars"></i>
@@ -794,7 +794,7 @@ <h3 class="instructions-heading" style="font-size: 35px ;">Instructions</h3>
 
           <div class="button-container">
 
-            <!-- <a href="./pages/game.html" target="_blank" class="start-btn button1" id="start-btn" aria-label="START">
+            <a href="./pages/game.html" style="    font-family: Arsenal SC, sans-seri;font-weight: 700;font-style: normal;" class="start-btn button1" id="start-btn" aria-label="START">
 
               START
             </a> -->

diff --git a/pages/game.html b/pages/game.html
@@ -672,6 +672,56 @@ <h3>Step 7</h3>
         });
     </script>
 
+<button id="sound-toggle">
+    <svg id="sound-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03zm2.5 0c0 2.89-1.54 5.38-3.86 6.71l1.43 1.43C19.16 18.84 21 15.61 21 12s-1.84-6.84-4.43-8.14l-1.43 1.43C17.46 6.62 19 9.11 19 12z" />
+    </svg>
+</button>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const soundToggle = document.getElementById('sound-toggle');
+    const soundIcon = document.getElementById('sound-icon');
+    const bgMusic = new Audio('/assets/sounds/bgMusic.mp3');
+    const clickSound = new Audio('/assets/sounds/click.mp3');
+
+    bgMusic.loop = true;
+
+    // Play background music by default and set the initial icon
+    bgMusic.play().then(() => {
+        soundIcon.innerHTML = '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03zm2.5 0c0 2.89-1.54 5.38-3.86 6.71l1.43 1.43C19.16 18.84 21 15.61 21 12s-1.84-6.84-4.43-8.14l-1.43 1.43C17.46 6.62 19 9.11 19 12z" />';
+    }).catch(error => {
+        console.error('Audio playback failed:', error);
+    });
+
+    soundToggle.addEventListener('click', () => {
+        if (bgMusic.paused || bgMusic.volume === 0) {
+            bgMusic.play();
+            bgMusic.volume = 1; // Ensure volume is set back to normal
+            soundIcon.innerHTML = '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03zm2.5 0c0 2.89-1.54 5.38-3.86 6.71l1.43 1.43C19.16 18.84 21 15.61 21 12s-1.84-6.84-4.43-8.14l-1.43 1.43C17.46 6.62 19 9.11 19 12z" />';
+        } else {
+            bgMusic.pause();
+            bgMusic.currentTime = 0; // Reset the audio to the beginning
+            bgMusic.volume = 0; // Set the volume to 0
+            soundIcon.innerHTML = '<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.06c1.48-.74 2.5-2.26 2.5-4.03zm2.5 0c0 2.89-1.54 5.38-3.86 6.71l1.43 1.43C19.16 18.84 21 15.61 21 12s-1.84-6.84-4.43-8.14l-1.43 1.43C17.46 6.62 19 9.11 19 12zM3.27 2L2 3.27 5.73 7H3v10h4l5 5V12.73l3 3V20h.73l3.73 3.73 1.27-1.27L3.27 2z" />';
+        }
+    });
+
+    // Example function to play click sound
+    function playClickSound() {
+        clickSound.currentTime = 0; // Reset to start
+        clickSound.play();
+    }
+
+    // Attach the click sound effect to relevant elements
+    const clickableElements = document.querySelectorAll('.clickable');
+    clickableElements.forEach(element => {
+        element.addEventListener('click', playClickSound);
+    });
+});
+</script>
+
+
 </body>
 
 </html>