Add mute button, change slider

2020-04-05 23:01:33 +03:00
parent c1bac8ba2a
commit b512cec38d
6 changed files with 149 additions and 75 deletions
--- a/css/msgbox.css
+++ b/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;
--- a/css/scroll_text.css
+++ b/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;
+}
--- a/css/style.css
+++ b/css/style.css
@@ -3,17 +3,17 @@ body {
 }

 .parent {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    background: url(/pic/bg.jpg) no-repeat center center / cover;
-    left: 0;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-    overflow: auto;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background: url(/pic/bg.jpg) no-repeat center center / cover;
+  left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  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;
 }

+.mute_btn {
+  width: 30px;
+	height: 30px;
+	border-radius: 5px;
+	border: #f54e4e;
+	background-color: #000;
+	color: #fff;
+	transition: 0.5s ease all;
+	outline: none;
+	cursor: pointer;
+	text-align: center;
+	margin: auto;
+	justify-content : center;
+}
+
 DIV {
  text-align: center
 }
-
-@-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;
-}
--- a/css/volume.css
+++ b/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 */
+}
--- a/index.html
+++ b/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:
-			<br>
-			<input id="volume" type="range" min="0" max="10" value="2" step="0.1" />
+			<button id="mute" class="mute_btn">
+				<i class="fas fa-volume-up"></i>
+			</button>
+			<input id="volume" type="range" class="slider" min="0" max="10" value="1" step="0.1" />
 		</div>

 		<div id="jGrowl"></div>
--- a/js/audio.js
+++ b/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);
+}