Added buttons to control the volume of the music

src/index.html

@@ -25,8 +25,14 @@ <h2 id="time_remaining"></h2>
             <button class="diff-btn" id="HARD">Hard</button>
             <button class="diff-btn" id="EXTREME">Extreme</button>
         </div>
+        <div class="options">
+            <button class="volume" id="MUTED">Mute</button>
+            <button class="volume" id="LOW_VOLUME">Low</button>
+            <button class="volume" id="MEDIUM_VOLUME">Medium</button>
+            <button class="volume" id="HIGH_VOLUME">High</button>
+        </div>
     </div>
-    <audio src="http://www.nyan.cat/music/technyancolor.ogg" autoplay loop></audio>
+    <audio id="music" src="http://www.nyan.cat/music/technyancolor.ogg" autoplay loop></audio>
     <audio id="count-sound" src="http://freesound.org/data/previews/131/131660_2398403-lq.mp3"></audio>
 </body>
 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

src/script.js

@@ -6,10 +6,18 @@ const diff_enum = {
     EXTREME: 100,
 };
 
+const volume_enum = {
+    MUTED: 0,
+    LOW_VOLUME: 0.2,
+    MEDIUM_VOLUME: 0.6,
+    HIGH_VOLUME: 1
+};
+
 //Setting difficulty from url
 const url = new URL(window.location);
 let diff_param = url.searchParams.get("difficulty");
 diff_param = diff_param ? diff_param.toUpperCase() : "HARD";
+let volume_param = "MEDIUM_VOLUME";
 
 // Utility Functions
 const mv_x = (what, x) => what.style.left = x + "px",
@@ -26,13 +34,19 @@ const catch_me = document.getElementById("catch_me"),
     x = document.getElementById("count-sound"),
     level_num = document.getElementById("level_num"),
     level_description = document.getElementById("level_description"),
-    time_remaining = document.getElementById("time_remaining");
+    time_remaining = document.getElementById("time_remaining"),
+    music = document.getElementById("music"),
+    volume_btns = document.querySelectorAll(".volume"),
+    active_volume_btn = document.getElementById(volume_param);
 
 // Useful global values
 const catch_height = 50,
     catch_width = 100,
     difficulty = diff_enum[diff_param];
 
+// Set initial volume
+music.volume = volume_enum[volume_param];
+
 const incr_counter = () => {
     counter.classList.remove("animated");
     count++;
@@ -59,6 +73,7 @@ let target_score, target_time, target_time_millis;
 
 // Initial State
 active_diff_btn.classList.add("disabled");
+active_volume_btn.classList.add("disabled");
 // start_chron();
 catch_me.style.position = "absolute";
 catch_me.style.height = catch_height + "px";
@@ -94,6 +109,14 @@ diff_btns.forEach(el => {
     })
 });
 
+volume_btns.forEach(el => {
+    el.addEventListener("click", e => {
+        console.log(volume_enum[e.target.id]);
+        music.volume = volume_enum[e.target.id];
+        volume_btns.forEach(el => el.classList.remove("disabled"));
+        e.target.classList.add("disabled");
+    });
+});
 
 const setTargets = () => {
     target_time = 60; // seconds

src/styles.css

@@ -72,6 +72,27 @@
     z-index: 100;
 }
 
+.options {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    z-index: 100;
+}
+
+.options button {
+    background-color: #A3A948;
+    border-radius: 20px;
+    padding: 5px 10px;
+    color: white;
+    border: 1px solid #660066;
+    cursor: pointer;
+}
+
+.options button.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 #catch_me {
     background: url(nyan-cat.png) no-repeat;
     -webkit-background-size: cover;