[UPDATE] changed behavior and use jQuery

templates/bootstrap/dashboard/blocks/default.tpl

@@ -38,8 +38,8 @@
         </table>
       </div>
       <div class="panel-footer text-right">
-        Blocknotify Sound <a href="#" id="mute_false" onclick="myMute(this, false);">on</a> / <a href="#" id="mute_true" onclick="myMute(this, true);">off</a>
+        <button id="muteButton" type="button" class="btn-xs btn-success"><i class="fa fa-volume-up"></i></button>
       </div>
     </div>
   </div>
-{/if}
+{/if}

templates/bootstrap/dashboard/default.tpl

@@ -1,19 +1,6 @@
 {if $smarty.session.AUTHENTICATED|default}
 <script src="{$PATH}/js/plugins/date.format.js"></script>
 <script src="{$PATH}/js/plugins/soundjs-0.5.2.min.js"></script>
-<script type="text/javascript">
-  function myMute(obj,flag) {
-    if(flag!==createjs.Sound.getMute()) {
-      createjs.Sound.setMute(flag);
-      obj.style.textDecoration="underline";
-      obj.style.color="#FFFF00";
-      flag=!flag;
-      obj=document.getElementById("mute_"+flag.toString());
-      obj.style.textDecoration="none";
-      obj.style.color="#FF0000";
-    }
-  }
-</script>
 
 <div class="row">
   <div class="col-lg-12">

templates/bootstrap/dashboard/js/api.tpl

@@ -5,6 +5,7 @@
 $(document).ready(function(){
   var audioPath = "{/literal}{$PATH}{literal}/audio/";
   var manifest = [ {id:"ding", src:"ding.ogg"} ];
+  var muteFlag = 1;
   createjs.Sound.alternateExtensionseExtensions = ["mp3"];
   createjs.Sound.registerManifest(manifest, audioPath);
 
@@ -250,6 +251,23 @@ $(document).ready(function(){
       }
     });
   })();
+  
+  // Mute Button
+  $('#muteButton').click(function(){
+    if(muteFlag == 2) {
+      muteFlag = 1;
+      createjs.Sound.setMute(false);
+      $(this).toggleClass("btn-xs btn-danger").toggleClass("btn-xs btn-success");
+      //$(this).find($(".fa")).removeClass('fa-volume-off').addClass('fa-volume-up');
+    } else {
+      muteFlag = 2;
+      createjs.Sound.setMute(true);
+      $(this).toggleClass("btn-xs btn-success").toggleClass("btn-xs btn-danger");
+      //$(this).find($(".fa")).removeClass('fa-volume-up').addClass('fa-volume-off');
+    }
+  });
+  
+  
 });
 {/literal}
 </script>