Add mute/unmute feature

Author: debugger22

app/index.html

@@ -47,7 +47,8 @@ <h1 class="header-text">
       </h1>
       <div class="events-remaining">
         <span class="events-remaining-value odometer"></span>&nbsp;
-        <span class="events-remaining-text">events remaining in queue</span>
+        <span class="events-remaining-text">events remaining in queue</span>&nbsp;
+        <img id="cmdMute" src="/static/public/images/speaker.svg" style="width:32px;height:32px;cursor:pointer;" alt="mute/unmute"/>
       </div>
     </header>
     <div id="area">

app/public/css/main.css

@@ -95,7 +95,6 @@ header{
 
 #area{
 	width: 100%;
-	overflow: hidden;
 	position: relative;
 }
 

app/public/images/speaker-muted.svg

@@ -4,6 +4,7 @@ var element;
 var drawingArea;
 var width;
 var height;
+var mute = false;
 
 var scale_factor = 9,
     note_overlap = 15,
@@ -155,6 +156,19 @@ $(function(){
       }));
   }
 
+  $('#cmdMute').click(function(){
+    if(mute == true){
+      mute = false;
+      Howler.mute(mute);
+      $('#cmdMute').attr('src', '/static/public/images/speaker.svg');
+    }else{
+      mute = true;
+      Howler.mute(mute);
+      $('#cmdMute').attr('src', '/static/public/images/speaker-muted.svg');
+    }
+  });
+  Howler.volume(1);
+
 });
 
 
@@ -200,7 +214,8 @@ function playSound(size, type) {
 function playFromQueueExchange1(){
   var event = eventQueue.shift();
   if(event != null && event.message != null && svg != null){
-    playSound(event.message.length*1.1, event.type);
+    if(!mute)
+      playSound(event.message.length*1.1, event.type);
     if(!document.hidden)
       drawEvent(event, svg);
   }
@@ -211,7 +226,8 @@ function playFromQueueExchange1(){
 function playFromQueueExchange2(){
   var event = eventQueue.shift();
   if(event != null && event.message != null && svg != null){
-    playSound(event.message.length, event.type);
+    if(!mute)
+      playSound(event.message.length, event.type);
     if(!document.hidden)
       drawEvent(event, svg);
   }