Added feature to mute sound.

manishdait · Jul 4, 2023 · 13bda94 · 13bda94
1 parent 7c9a8ce
commit 13bda94
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 3 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -167,6 +167,15 @@ i{
     text-decoration: none;
 }
 
+.mute {
+    color: rgb(255, 255, 255);
+    cursor: pointer;
+}
+
+.mute:hover {
+    color: rgb(158, 158, 158);
+}
+
 @media screen and (max-width:1010px) {
     .range-control input{
         width: 90px;

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -32,6 +32,8 @@ <h1>{{ title }}</h1>
         </ul>
       </div>
       <button class="btn" (click)="onVisualize()" id="visualize" [disabled]="disable">{{ visualMsg }}</button>
+
+      <span class="material-symbols-outlined mute" (click)="onMute()" id="mute">volume_up</span>
     </div>
 </div>
 </nav>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { Bubble } from '../assets/algorithms/Bubble';
 import { Insertion } from '../assets/algorithms/Insertion';
 import { Selection } from '../assets/algorithms/Selection';
 import { currentSpeed } from './array/Timmer';
+import { setMute } from 'src/assets/audio/Sound';
 
 @Component({
   selector: 'app-root',
@@ -85,4 +86,17 @@ export class AppComponent {
     this.disable = false;
   }
 
+  public onMute(){
+    let ele = document.getElementById('mute');
+
+    if (ele!.innerHTML == 'volume_up') {
+      setMute(true);
+      ele!.innerHTML = 'volume_off';
+    } else {
+      ele!.innerHTML = 'volume_up';
+      setMute(false);
+    }
+
+  }
+
 }
diff --git a/src/assets/audio/Sound.ts b/src/assets/audio/Sound.ts
@@ -1,18 +1,26 @@
 let audio = new Audio();
+let isMuted: boolean = false;
 export async function playSucess(){
     audio.src = "assets/audio/complete.mp3";
     audio.load();
-    audio.play();
+    if(!isMuted)
+      audio.play();
   }
 
 export async function playSwap() {
   audio.src = "assets/audio/swap.mp3";
   audio.load();
-  audio.play();
+  if(!isMuted)
+    audio.play();
 }
 
 export async function playFind(){
   audio.src = "assets/audio/find.mp3";
   audio.load();
-  audio.play();
+  if(!isMuted)
+    audio.play();
+}
+
+export function setMute(val: boolean) {
+  isMuted = val;
 }
diff --git a/src/index.html b/src/index.html
@@ -11,6 +11,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
 </head>
 <body>
   <app-root></app-root>
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,6 +32,8 @@ <h1>{{ title }}</h1> @@
             </ul>
           </div>
           <button class="btn" (click)="onVisualize()" id="visualize" [disabled]="disable">{{ visualMsg }}</button>
+          <span class="material-symbols-outlined mute" (click)="onMute()" id="mute">volume_up</span>
         </div>
     </div>
     </nav>
@@ Expand Down @@