Add mute button, change slider

css/msgbox.css

@@ -2,7 +2,8 @@
     position: fixed;
     padding: 10px;
     margin: 0px;
-    width: 299px;
+    width: auto;
+    height: auto;
     top: 20px;
     right: 20px;
     text-align: center;

css/scroll_text.css

@@ -0,0 +1,45 @@
+@-webkit-keyframes scroll {
+    0% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+    100% {
+        -webkit-transform: translate(-100%, 0);
+        transform: translate(-100%, 0)
+    }
+}
+
+@-moz-keyframes scroll {
+    0% {
+        -moz-transform: translate(0, 0);
+        transform: translate(0, 0);
+    }
+    100% {
+        -moz-transform: translate(-100%, 0);
+        transform: translate(-100%, 0)
+    }
+}
+
+@keyframes scroll {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(-100%, 0)
+    }
+}
+
+.marquee {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.marquee span {
+  display: inline-block;
+  padding-left: 100%;
+  -webkit-animation: scroll 15s infinite linear;
+  -moz-animation: scroll 15s infinite linear;
+  animation: scroll 15s infinite linear;
+}

css/style.css

@@ -3,17 +3,17 @@ body {
 }
 
 .parent {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    position: fixed;
+  position: fixed;
-    top: 0;
+  top: 0;
-    background: url(/pic/bg.jpg) no-repeat center center / cover;
+  background: url(/pic/bg.jpg) no-repeat center center / cover;
-    left: 0;
+  left: 0;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    align-content: center;
+  align-content: center;
-    justify-content: center;
+  justify-content: center;
-    overflow: auto;
+  overflow: auto;
 }
 
 #RadioBox{
@@ -113,7 +113,6 @@ h1 {
 }
 
 .btn-wrap {
-	//max-width: 250px;
 	margin: auto;
 	display: -webkit-flex;
 	display: -moz-flex;
@@ -122,52 +121,21 @@ h1 {
 	display: flex;
 }
 
-DIV {
+.mute_btn {
-  text-align: center
+  width: 30px;
-}
+	height: 30px;
-
+	border-radius: 5px;
-@-webkit-keyframes scroll {
+	border: #f54e4e;
-    0% {
+	background-color: #000;
-        -webkit-transform: translate(0, 0);
+	color: #fff;
-        transform: translate(0, 0);
+	transition: 0.5s ease all;
-    }
+	outline: none;
-    100% {
+	cursor: pointer;
-        -webkit-transform: translate(-100%, 0);
+	text-align: center;
-        transform: translate(-100%, 0)
+	margin: auto;
-    }
+	justify-content : center;
-}
-
-@-moz-keyframes scroll {
-    0% {
-        -moz-transform: translate(0, 0);
-        transform: translate(0, 0);
-    }
-    100% {
-        -moz-transform: translate(-100%, 0);
-        transform: translate(-100%, 0)
-    }
-}
-
-@keyframes scroll {
-    0% {
-        transform: translate(0, 0);
-    }
-    100% {
-        transform: translate(-100%, 0)
-    }
-}
-
-.marquee {
-  display: block;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
 }
 
-.marquee span {
+DIV {
-  display: inline-block;
+  text-align: center
-  padding-left: 100%;
-  -webkit-animation: scroll 15s infinite linear;
-  -moz-animation: scroll 15s infinite linear;
-  animation: scroll 15s infinite linear;
 }

css/volume.css

@@ -0,0 +1,38 @@
+#volume {
+  width: 40%; /* Width of the outside container */
+}
+
+/* The slider itself */
+.slider {
+  -webkit-appearance: none;  /* Override default CSS styles */
+  appearance: none;
+  width: 40%; /* Full-width */
+  height: 20px; /* Specified height */
+  background: #d3d3d3; /* Grey background */
+  outline: none; /* Remove outline */
+  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+  transition: opacity .2s;
+}
+
+/* Mouse-over effects */
+.slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
+
+/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #000;
+  cursor: pointer; /* Cursor on hover */
+}
+
+.slider::-moz-range-thumb {
+  width: 25px; /* Set a specific slider handle width */
+  height: 25px; /* Slider handle height */
+  background: #000; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}

index.html

@@ -6,6 +6,8 @@
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
 	<link rel="stylesheet" type="text/css" href="/css/style.css">
 	<link rel="stylesheet" type="text/css" href="/css/msgbox.css">
+	<link rel="stylesheet" type="text/css" href="/css/scroll_text.css">
+	<link rel="stylesheet" type="text/css" href="/css/volume.css">
 	<title>My Test Radio</title>
 	<script
 		src="https://code.jquery.com/jquery-3.4.1.js"
@@ -60,9 +62,10 @@
 		<br>
 
 		<div>
-			vol:
+			<button id="mute" class="mute_btn">
-			<br>
+				<i class="fas fa-volume-up"></i>
-			<input id="volume" type="range" min="0" max="10" value="2" step="0.1" />
+			</button>
+			<input id="volume" type="range" class="slider" min="0" max="10" value="1" step="0.1" />
 		</div>
 
 		<div id="jGrowl"></div>

js/audio.js

@@ -1,17 +1,19 @@
 var stream_url = 'http://stream.santic-zombie.ru';
-
+var audio      = new Audio(stream_url);
-var audio = new Audio(stream_url);
+audio.volume   = 0.05;
-
-audio.volume = 0.01;
 
 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');
+var copyClipBoard = document.getElementById('buff');
-button.addEventListener('click', function () {
+copyClipBoard.addEventListener('click', function () {
-
+  var   MsgText    = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>');
-  var MsgText = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>'),
+  PopUpMsg(MsgText);
-      MsgData = $('#jGrowl');
-  MsgData.html(MsgText).fadeIn();
-  setTimeout(function() {MsgData.fadeOut();}, 2000);
-
   //нашли наш контейнер
   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);
+}