diff --git a/css/soc_link.css b/css/soc_link.css
new file mode 100644
index 0000000..e56442f
--- /dev/null
+++ b/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;}
diff --git a/css/style.css b/css/style.css
index a3ed0d5..9c9b711 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,36 +3,42 @@ body {
}
.parent {
- width: 100%;
+ 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: left;
- overflow: auto;
+ flex-direction: row;
}
-#RadioBox{
- width: 450px;
+#RadioBox {
+ width: 25%;
height: 100%;
background-color: rgba(60, 60, 60, 0.9);
- /* border-radius: 10px; */
padding: 0 5px;
color: #fff;
}
-.tagBOX{
- width: 410px;
- height: 150px;
+#spec {
+ width: 75%;
+ 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 {
@@ -67,20 +74,20 @@ body {
h1::before {
content: '';
display: inline-block;
- margin:0 10px;
- width: 25px;
- height: 25px;
- -webkit-border-radius: 25px;
- -moz-border-radius: 25px;
- border-radius: 25px;
+ margin: 0 10px;
+ width: 0.8em;
+ height: 0.8em;
+ -webkit-border-radius: 0.8em;
+ -moz-border-radius: 0.8em;
+ border-radius: 0.8em;
background: red;
animation: blink 3s linear infinite;
}
-@keyframes blink{
- 0%{opacity: 0;}
+@keyframes blink {
+ 0%{opacity: 0;}
25%{opacity: .5;}
- 50%{opacity: 1;}
+ 50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}
@@ -88,13 +95,14 @@ h1::before {
h1 {
text-align: center
float:left;
- margin:10px 50px;
+ /* margin:10px 50px; */
+ font-size: 2vw;
}
.btn {
- width: 100px;
- height: 60px;
- border-radius: 5px;
+ width: 7em;
+ height: 4.5em;
+ 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,18 +130,18 @@ h1 {
}
.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-right: 10px;
- //margin: auto;
+ width: 2em;
+ height: 2em;
+ border-radius: 0.4em;
+ border: #f54e4e;
+ background-color: #000;
+ color: #fff;
+ transition: 0.5s ease all;
+ outline: none;
+ cursor: pointer;
+ text-align: center;
+ margin-right: 0.7em;
+ font-size: 0.8vw;
}
.mute_btn:hover {
@@ -162,7 +170,7 @@ h1 {
.tlist {
width: 100%;
- height: 35%;
+ height: 33%;
border-radius: 0 0 5px 5px;
border: #f54e4e;
background-color: #fff;
@@ -187,6 +195,16 @@ h1 {
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;
}
diff --git a/css/volume.css b/css/volume.css
index 026ba51..b4e30fd 100644
--- a/css/volume.css
+++ b/css/volume.css
@@ -4,15 +4,15 @@
/* 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 */
+ -webkit-appearance: none;
+ width: 50%;
+ height: 1.6em;
+ background: #d3d3d3;
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: .2s;
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 */
- height: 25px; /* Slider handle height */
+ width: 2em;
+ 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 */
- height: 25px; /* Slider handle height */
- background: #000; /* Green background */
- cursor: pointer; /* Cursor on hover */
+ width: 2em;
+ height: 2em;
+ background: #000;
+ cursor: pointer;
+ font-size: 0.8vw;
}
diff --git a/index.html b/index.html
index c4dd93b..3dfb051 100755
--- a/index.html
+++ b/index.html
@@ -3,18 +3,23 @@
+
+
+
+
+
+
My Test Radio
-
@@ -25,16 +30,18 @@
Just Radio
Stopped
+
- ![]()
+
+
+
+
+
+
+
+
+
diff --git a/js/audio.js b/js/audio.js
index e007f60..97ec517 100644
--- a/js/audio.js
+++ b/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 = $('');
diff --git a/js/radio.js b/js/radio.js
index ea2b31a..eb338af 100644
--- a/js/radio.js
+++ b/js/radio.js
@@ -79,18 +79,39 @@ function getYouTubeRequest(MPDfile) {
key: 'AIzaSyCfkMY2Nk3QwEh1Tjdqm-8GueBqOS5jgeI',
q: MPDfile
};
- $.getJSON(url, params, showResults);
-}
+ // $.getJSON(url, params, showResults);
+ $.getJSON(url, params, function() {
+ console.log( "success" );
+ })
+ .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");
+ });
-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);
}
+// Процедура для формирования ссылки и картинки на 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";
diff --git a/js/visual.js b/js/visual.js
new file mode 100644
index 0000000..9438702
--- /dev/null
+++ b/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();
+}
diff --git a/pic/error.jpg b/pic/error.jpg
new file mode 100644
index 0000000..e0f47b0
Binary files /dev/null and b/pic/error.jpg differ
diff --git a/pic/kek.jpg b/pic/kek.jpg
new file mode 100644
index 0000000..31271c6
Binary files /dev/null and b/pic/kek.jpg differ