Add mute button, change slider

js/audio.js

@@ -1,17 +1,19 @@
 var stream_url = 'http://stream.santic-zombie.ru';
-
-var audio = new Audio(stream_url);
-
-audio.volume = 0.01;
+var audio      = new Audio(stream_url);
+audio.volume   = 0.05;
 
 var play = document.getElementById('play');
 play.addEventListener('click', function() {
+  var   MsgText    = $('<div id="message-success"><p>Play</p></div>');
+  PopUpMsg(MsgText);
   $("#PlayStat").text("Now playing");
   audio.play();
   }, false);
 
 var pause = document.getElementById('pause');
 pause.addEventListener('click', function() {
+  var   MsgText    = $('<div id="message-success"><p>Pause</p></div>');
+  PopUpMsg(MsgText);
   $("#PlayStat").text("Paused");
   audio.pause();
   }, false);
@@ -20,14 +22,10 @@ $("#volume").mousemove(function(){
   audio.volume = parseFloat(this.value / 10);
   });
 
-var button = document.getElementById('buff');
-button.addEventListener('click', function () {
-
-  var MsgText = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>'),
-      MsgData = $('#jGrowl');
-  MsgData.html(MsgText).fadeIn();
-  setTimeout(function() {MsgData.fadeOut();}, 2000);
-
+var copyClipBoard = document.getElementById('buff');
+copyClipBoard.addEventListener('click', function () {
+  var   MsgText    = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>');
+  PopUpMsg(MsgText);
   //нашли наш контейнер
   var ta = document.getElementById('trackname');
   //производим его выделение
@@ -44,4 +42,25 @@ button.addEventListener('click', function () {
   window.getSelection().removeAllRanges();
   });
 
-//audio.muted = true;
+  var mute = document.getElementById('mute');
+  mute.addEventListener('click', function() {
+      $(this)
+      .find("i")
+      .toggleClass('fas fa-volume-up')
+      .toggleClass('fas fa-volume-mute');
+      if (audio.muted === false) {
+        var   MsgText    = $('<div id="message-success"><p>Mute Sound</p></div>');
+        PopUpMsg(MsgText);
+        audio.muted = true;
+      } else {
+        var   MsgText    = $('<div id="message-success"><p>unmute Sound</p></div>');
+        PopUpMsg(MsgText);
+        audio.muted = false;
+      }
+    }, false);
+
+function PopUpMsg(MsgText) {
+  const MsgData    = $('#jGrowl');
+  MsgData.html(MsgText).fadeIn();
+  setTimeout(function() {MsgData.fadeOut();}, 2000);
+}