Some Improves

css/msgbox.css

@@ -8,7 +8,7 @@
     right: 20px;
     text-align: center;
     border-radius: 10px;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(60, 60, 60, 0.9);
 }
 #jGrowl{
     margin: 0 12px 0 12px;

css/soc_link.css

@@ -0,0 +1,39 @@
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
+.social a {
+  text-align: center;
+  width:  2.3em;
+  height: 2.3em;
+  float: left;
+  background: #000;
+  border: 0.1em solid #ccc;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
+  border-radius: 2em;
+  margin: 0 1em 1em 0;
+  padding:        0.6em;
+  padding-top:    0.6em;
+  padding-right:  0.6em;
+  padding-bottom: 0.6em;
+  padding-left:   0.6em;
+  color: #fff;
+  font-size: 0.8vw;
+}
+/* .github a:hover {background: #191919; color: #fff;}
+.youtube a:hover {background: #c4302b; color: #fff;}
+.google-pluse a:hover {background: #DD4B39; color: #fff;}
+.twitter a:hover {background: #00acee; color: #fff;}
+.instagram a:hover {background: #3f729b; color: #fff;}
+.facebook a:hover {background: #3b5998; color: #fff;}
+.skype a:hover {background: #00aff0; color: #fff;}
+.vk a:hover {background: #5d84ae; color: #fff;}
+.odnoklassniki a:hover {background: #f93; color: #fff;}
+.pinterest a:hover {background: #c8232c; color: #fff;}
+.linkedin a:hover {background: #0e76a8; color: #fff;}
+.telegram a:hover {background: #249bd7; color: #fff;}
+.tumblr a:hover {background: #34526f; color: #fff;}
+.windows a:hover {background: #125acd; color: #fff;}
+.whatsapp a:hover {background: #50b154; color: #fff;}
+.weibo a:hover {background: #d52b2b; color: #fff;}
+.dropbox a:hover {background: #1087dd; color: #fff;} */
+
+.telegram a:hover {background: #fff; color: #000;}
+.lastfm a:hover {background: #fff; color: #000;}

css/style.css

@@ -10,29 +10,35 @@ body {
   background: url(/pic/bg.jpg) no-repeat center center / cover;
   left: 0;
   display: flex;
-  align-items: center;
+  flex-direction: row;
-  align-content: center;
-  justify-content: center;
-  overflow: auto;
 }
 
-#RadioBox{
+#RadioBox {
-  width: 450px;
+  width:  25%;
-  height: 490px;
+  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(60, 60, 60, 0.9);
-  border-radius: 10px;
   padding: 0 5px;
   color: #fff;
 }
 
-.tagBOX{
+#spec {
-  width: 410px;
+  width:  75%;
-  height: 150px;
+  height: 100%;
+}
+
+.canvas {
+  width:  100%;
+  height: 100%;
+}
+
+.youtubeIMG {
+  max-width:60%;
+  height:auto;
 }
 
 .tagA {
   width: 100%;
-	height: 20px;
+	/* height: 20px; */
 	border-radius: 5px 5px 0 0;
 	border: #f54e4e;
 	background-color: #000;
@@ -42,7 +48,8 @@ body {
 	cursor: pointer;
 	text-align: center;
   margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
+  font-size: 1vw;
 }
 
 .tagA:hover {
@@ -52,7 +59,7 @@ body {
 
 .tagB {
   width: 100%;
-	//height: 20px;
+	/* height: 20px; */
 	border-radius: 0 0 5px 5px;
 	border: #f54e4e;
 	background-color: #fff;
@@ -67,17 +74,17 @@ body {
 h1::before {
   content: '';
   display: inline-block;
-  margin:0 10px;
+  margin: 0 10px;
-  width: 25px;
+  width:  0.8em;
-  height: 25px;
+  height: 0.8em;
-  -webkit-border-radius: 25px;
+  -webkit-border-radius: 0.8em;
-  -moz-border-radius: 25px;
+  -moz-border-radius: 0.8em;
-  border-radius: 25px;
+  border-radius: 0.8em;
   background: red;
   animation: blink 3s linear infinite;
 }
 
-@keyframes blink{
+@keyframes blink {
   0%{opacity:   0;}
   25%{opacity: .5;}
   50%{opacity:  1;}
@@ -88,13 +95,14 @@ h1::before {
 h1 {
   text-align: center
   float:left;
-  margin:10px 50px;
+  /* margin:10px 50px; */
+  font-size: 2vw;
 }
 
 .btn {
-  width: 100px;
+  width: 7em;
-	height: 60px;
+  height: 4.5em;
-	border-radius: 5px;
+	border-radius: 0.4em;
 	border: #f54e4e;
 	background-color: #000;
 	color: #fff;
@@ -103,7 +111,7 @@ h1 {
 	cursor: pointer;
 	text-align: center;
 	margin: auto;
-	justify-content : center;
+	font-size: 0.8vw;
 
 }
 
@@ -122,9 +130,9 @@ h1 {
 }
 
 .mute_btn {
-  width: 30px;
+  width: 2em;
-	height: 30px;
+  height: 2em;
-	border-radius: 5px;
+  border-radius: 0.4em;
   border: #f54e4e;
   background-color: #000;
   color: #fff;
@@ -132,8 +140,13 @@ h1 {
   outline: none;
   cursor: pointer;
   text-align: center;
-  margin-right: 10px;
+  margin-right: 0.7em;
-	//margin: auto;
+  font-size: 0.8vw;
+}
+
+.mute_btn:hover {
+  color: #000;
+	background-color: #fff;
 }
 
 .volume-wrap {
@@ -142,7 +155,56 @@ h1 {
 	display: flex;
 }
 
+.tcon {
+  width: 100%;
+  border-radius: 5px 5px 0 0;
+  border: #f54e4e;
+  background-color: #000;
+  color: #fff;
+  transition: 0.5s ease all;
+  outline: none;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.tlist {
+  width: 100%;
+  height: 33%;
+  border-radius: 0 0 5px 5px;
+  border: #f54e4e;
+  background-color: #fff;
+  color: #000;
+  transition: 0.5s ease all;
+  outline: none;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: auto;
+}
+
+.list_el {
+  border-bottom: 2px double #000;
+  background-color: #d3d3d3;
+  color: #000;
+}
+
+.list_el:nth-child(odd) {
+  border-bottom: 2px double #000;
+  background-color: #fff;
+  color: #000;
+}
+
+.soc_links {
+	margin: auto;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flex;
+	display: -o-flex;
+	display: inline-flex;
+}
 
 DIV {
-  text-align: center
+  text-align: center;
+  font-size: 1vw;
 }

css/volume.css

@@ -4,15 +4,15 @@
 
 /* The slider itself */
 .slider {
-  -webkit-appearance: none;  /* Override default CSS styles */
+  -webkit-appearance: none;
-  appearance: none;
+  width:  50%;
-  width: 40%; /* Full-width */
+  height: 1.6em;
-  height: 20px; /* Specified height */
+  background: #d3d3d3;
-  background: #d3d3d3; /* Grey background */
+  outline: none;
-  outline: none; /* Remove outline */
+  opacity: 0.7;
-  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+  -webkit-transition: .2s;
-  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
   transition: opacity .2s;
+  font-size: 0.8vw;
 }
 
 /* Mouse-over effects */
@@ -24,15 +24,17 @@
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
-  width: 25px; /* Set a specific slider handle width */
+  width:  2em;
-  height: 25px; /* Slider handle height */
+  height: 2em;
   background: #000;
-  cursor: pointer; /* Cursor on hover */
+  cursor: pointer;
+  font-size: 0.8vw;
 }
 
 .slider::-moz-range-thumb {
-  width: 25px; /* Set a specific slider handle width */
+  width:  2em;
-  height: 25px; /* Slider handle height */
+  height: 2em;
-  background: #000; /* Green background */
+  background: #000;
-  cursor: pointer; /* Cursor on hover */
+  cursor: pointer;
+  font-size: 0.8vw;
 }

index.html

@@ -3,18 +3,23 @@
 
 <head>
 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta property="og:title" content="Just Radio" />
+	<meta property="og:site_name" content="My Radio" />
+	<meta property="og:url" content="http://radio.santic-zombie.ru/" />
+	<meta property="og:description" content="My Simple Radio, enjoy!" />
+	<meta property="og:image" content="/pic/kek.jpg" />
 	<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">
+	<link rel="stylesheet" type="text/css" href="/css/soc_link.css">
 	<title>My Test Radio</title>
 	<script
 		src="https://code.jquery.com/jquery-3.4.1.js"
 		integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
 		crossorigin="anonymous">
 	</script>
-
 </head>
 
 <body>
@@ -25,16 +30,18 @@
 		<h1>Just Radio</h1>
 
 		<div id="PlayStat">Stopped</div>
+
 		<br>
 
 		<a name="YouTubeURL" href="" target="_blank">
-			<img name="YouTubeThumb" width="336" height="188"
+			<img class="youtubeIMG" name="YouTubeThumb" width="336" height="188"
 				src="">
 			</img>
 		</a>
 
 		<br>
 		<br>
+		
 		<div class="tagWindow">
 			<form name="artistURL" action="" target="_blank">
 				<button class="tagA">
@@ -74,13 +81,40 @@
 			<input id="volume" type="range" class="slider muteEl" min="0" max="10" value="1" step="0.1" />
 		</div>
 
+		<br>
+
+		<div class=tcon>
+			Last played tracks
+		</div>
+		<div id="track_list" class=tlist>
+		</div>
+
+		<br>
+
+		<div class=soc_links>
+			<div class="social telegram">
+    		<a href="https://t.me/santicsRadio" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
+			</div>
+			<div class="social lastfm">
+    		<a href="https://www.last.fm/ru/user/just-radio" target="_blank"><i class="fa fa-lastfm-square fa-2x" aria-hidden="true"></i></a>
+			</div>
+		</div>
+
 		<div id="jGrowl"></div>
 
 	</div>
+
+	<div id=spec>
+		<canvas id="canvas" class=canvas></canvas>
+	</div>
+
 </div>
 
+
+
 <script src="js/audio.js" type="text/javascript"></script>
 <script src="js/radio.js" type="text/javascript"></script>
+<script src="js/visual.js" type="text/javascript"></script>
 
 </body>
 

js/audio.js

@@ -2,6 +2,7 @@ var stream_url = 'http://stream.santic-zombie.ru';
 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>');
@@ -24,7 +25,7 @@ $("#volume").mousemove(function(){
 
 var copyClipBoard = document.getElementById('buff');
 copyClipBoard.addEventListener('click', function () {
-  var   MsgText    = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>');
+  var   MsgText    = $('<div id="message-success"><p>Track name copied to clipboard</p></div>');
   PopUpMsg(MsgText);
   //нашли наш контейнер
   var ta = document.getElementById('trackname');
@@ -49,11 +50,11 @@ copyClipBoard.addEventListener('click', function () {
       .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>');
+        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>');
+        var   MsgText    = $('<div id="message-success"><p>Unmute sound</p></div>');
         PopUpMsg(MsgText);
         audio.muted = false;
       }

js/radio.js

@@ -33,10 +33,12 @@ function show()
         getArtistURL(MPDartist);
         $("#trackname span").text(MPDartist+" - "+MPDsong);
         getYouTubeRequest(MPDfile);
+        addText(MPDfile);
       } else if (MPDCurr != MPDfile) {
           getArtistURL(MPDartist);
           $("#trackname span").text(MPDartist+" - "+MPDsong);
           getYouTubeRequest(MPDfile);
+          addText(MPDfile);
         }
       MPDCurr = MPDfile;
     });
@@ -77,14 +79,42 @@ function getYouTubeRequest(MPDfile) {
         key: 'AIzaSyCfkMY2Nk3QwEh1Tjdqm-8GueBqOS5jgeI',
         q: MPDfile
     };
-    $.getJSON(url, params, showResults);
+    // $.getJSON(url, params, showResults);
-}
+    $.getJSON(url, params, function() {
-
+      console.log( "success" );
-function showResults(results) {
+      })
+      .done(function(results) {
+        // showResults;
+        console.log( "second success" );
         var entries = results.items;
         thumb = entries[0].snippet.thumbnails.medium.url;
         YouURL = entries[0].id.videoId;
         document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', thumb);
         document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
         console.log("https://www.youtube.com/watch?v="+YouURL);
+      })
+      .fail(function() {
+        console.log( "error" );
+        document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', '/pic/error.jpg');
+        document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v=empty");
+      });
+
+}
+
+// Процедура для формирования ссылки и картинки на Youtube
+// function showResults(results) {
+//   var entries = results.items;
+//   thumb = entries[0].snippet.thumbnails.medium.url;
+//   YouURL = entries[0].id.videoId;
+//   document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', thumb);
+//   document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
+//   console.log("https://www.youtube.com/watch?v="+YouURL);
+// }
+
+// Процедура формирования списка проигрынных треков
+function addText(MPDfile) {
+  let last_track = document.createElement('div');
+  last_track.className = "list_el";
+  last_track.innerHTML = MPDfile;
+  track_list.prepend(last_track);
 }

js/visual.js

@@ -0,0 +1,58 @@
+window.onload = function() {
+
+  audio.src = 'http://stream.santic-zombie.ru';
+  audio.crossOrigin = "anonymous";
+  audio.load();
+
+  var context = new AudioContext();
+  var src = context.createMediaElementSource(audio);
+  var analyser = context.createAnalyser();
+
+  var canvas = document.getElementById("canvas");
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  var ctx = canvas.getContext("2d");
+
+  src.connect(analyser);
+  analyser.connect(context.destination);
+
+  analyser.fftSize = 256;
+
+  var bufferLength = analyser.frequencyBinCount;
+  console.log(bufferLength);
+
+  var dataArray = new Uint8Array(bufferLength);
+
+  var WIDTH = canvas.width;
+  var HEIGHT = canvas.height;
+
+  var barWidth = (WIDTH / bufferLength) * 2.5;
+  var barHeight;
+  var x = 0;
+
+  function renderFrame() {
+    requestAnimationFrame(renderFrame);
+
+    x = 0;
+
+    analyser.getByteFrequencyData(dataArray);
+
+    // ctx.fillStyle = "rgba(60, 60, 60, 0)";
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    for (var i = 0; i < bufferLength; i++) {
+      barHeight = dataArray[i];
+
+      var r = barHeight + (25 * (i/bufferLength));
+      var g = 250 * (i/bufferLength);
+      var b = 50;
+
+      ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
+      ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
+
+      x += barWidth + 1;
+    }
+  }
+
+  renderFrame();
+}