mute sounds

Author: devbyali

app.js

@@ -12,6 +12,7 @@ class DrumKit {
         this.bpm = 150;
         this.isPlaying = null;
         this.selects = document.querySelectorAll("select");
+        this.muteBtn = document.querySelectorAll(".mute");
     }
     activePad() {
         this.classList.toggle("active");
@@ -81,6 +82,35 @@ class DrumKit {
                 break;
         }
     }
+    mute(e) {
+        const muteIndex = e.target.getAttribute("data-track");
+        e.target.classList.toggle("active");
+        if (e.target.classList.contains("active")) {
+            switch (muteIndex) {
+                case "0":
+                    this.KickAudio.volume = 0;
+                    break;
+                case "1":
+                    this.snareAudio.volume = 0;
+                    break;
+                case "2":
+                    this.hihatAudio.volume = 0;
+                    break;
+            }
+        } else {
+            switch (muteIndex) {
+                case "0":
+                    this.KickAudio.volume = 1;
+                    break;
+                case "1":
+                    this.snareAudio.volume = 1;
+                    break;
+                case "2":
+                    this.hihatAudio.volume = 1;
+                    break;
+            }
+        }
+    }
 }
 const drumKit = new DrumKit();
 
@@ -101,3 +131,8 @@ drumKit.selects.forEach((select) => {
         drumKit.changeSound(e);
     });
 });
+drumKit.muteBtn.forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+        drumKit.mute(e);
+    });
+});

style.css

@@ -110,6 +110,11 @@ select {
     font-size: 1rem;
 }
 
+.mute.active {
+    background: rgb(182, 182, 182);
+    color: white;
+}
+
 @keyframes playTrack {
     from {
         transform: scale(1);