Merge pull request #4 from pawas108ram/main

Made the toggling functionality
Rishav-01 · Oct 3, 2023 · a9c8760 · a9c8760
2 parents 9fd47cc + 3d91353
commit a9c8760
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -77,9 +77,9 @@ <h4>Lela Lela le - By Rauf Faik</h4>
         </div>
 
         <div class="slider_container">
-            <i class="fa fa-volume-down"></i>
+            <i class="fa fa-volume-down volume-toggle"></i>
             <input type="range" min="1" max="100" value="10" class="volume_slider" onchange="setVolume()">
-            <i class="fa fa-volume-up"></i>
+
         </div>
     </div>
 

diff --git a/script.js b/script.js
@@ -6,6 +6,8 @@ let myProgressbar = document.getElementById('progress-bar');
 let gif = document.getElementById('gif');
 let nextButton = document.getElementById('next');
 let backButton = document.getElementById('backward');
+let muteButton=document.querySelector('.volume-toggle');
+
 // let timer = document.getElementById('current-timer').innerText;
 let volume_slider = document.querySelector(".volume_slider");
 let songs = [
@@ -145,6 +147,7 @@ backButton.addEventListener('click', () => {
 
 // set volume
 volume_slider.value = 10;
+
 audioElement.volume = volume_slider.value / 100;
 function setVolume() {
     audioElement.volume = volume_slider.value / 100;
@@ -161,6 +164,7 @@ audioElement.addEventListener('ended', () => {
     myProgressbar.value = 0;
 })
 
+
 // timer updates
 setInterval(() => {
     tt = "0";
@@ -177,4 +181,19 @@ setInterval(() => {
     if(audioElement.paused){
         document.getElementById('current-timer').innerText = "00:00";
     }
-}, 1000);
+}, 1000);
+
+muteButton.addEventListener('click',()=>{
+    if(muteButton.classList.contains('fa-volume-down')){
+        muteButton.classList.remove('fa-volume-down');
+        muteButton.classList.add('fa-volume-up');
+        audioElement.volume=0;
+
+    }
+    else{
+        muteButton.classList.add('fa-volume-down');
+        muteButton.classList.remove('fa-volume-up');
+        setVolume()
+    }
+
+})