Merge pull request #227 from imsuryya/main

#218 Enhancing User Experience with Subtle Background Music
Dev-tanay · Jun 2, 2024 · 228981b · 228981b
2 parents c32bf1f + e149220
commit 228981b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/Music/8 Bit Space Groove! Chill Pretty Chiptune Game Music by HeatleyBros.mp3 b/Music/8 Bit Space Groove! Chill Pretty Chiptune Game Music by HeatleyBros.mp3
diff --git a/index.html b/index.html
@@ -5,6 +5,9 @@
   <title>Rubik Cube</title>
   <link rel="icon" type="image/x-icon" href="images\icon.png">
   <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><link rel="stylesheet" href="./style.css">
+  <!--For volume icon-->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+
 
 </head>
 <body>
@@ -107,8 +110,14 @@ <h1 class="text text--title">
     <button class="btn btn--br btn--reset">
       <icon reset></icon>
     </button>
+    <button class="btn btn--tr fa-solid fa-volume-high" id="play-btn">  
   </div>
 
+  <!-- Audio element for background music -->
+<audio id="background-music" autoplay loop >
+  <source src="Music/8 Bit Space Groove! Chill Pretty Chiptune Game Music by HeatleyBros.mp3" type="audio/mpeg">
+</audio>
+
 </div>
 <!-- partial -->
   <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script><script  src="./script.js"></script>

diff --git a/script.js b/script.js
@@ -3706,6 +3706,7 @@ class Game {
 
   constructor() {
 
+    this.audio = document.getElementById('background-music');
     this.dom = {
       ui: document.querySelector( '.ui' ),
       game: document.querySelector( '.ui__game' ),
@@ -4080,6 +4081,21 @@ class Game {
   }
 
 }
+// Volume button functionality
+const musicButton = document.getElementById('play-btn');
+const music = document.getElementById('background-music');
+
+musicButton.addEventListener('click', () => {
+    if (music.paused) {
+        music.play();
+        musicButton.classList.remove('fa-volume-xmark');
+        musicButton.classList.add('fa-volume-high');
+    } else {
+        music.pause();
+        musicButton.classList.remove('fa-volume-high');
+        musicButton.classList.add('fa-volume-xmark');
+    }
+});
 
 window.version = '0.99.2';
 window.game = new Game();
diff --git a/style.css b/style.css
@@ -293,6 +293,13 @@ body {
   bottom: 0.8em;
   left: calc(50% - 0.5em);
 }
+/* For volume button */
+.btn--tr {
+  top: 1.2em; 
+  right: 1.2em; 
+  opacity: 1;
+  pointer-events: auto;
+}
 .btn svg {
   display: block;
 }