Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0afbb5f439 | ||
|
|
1c4c1b7a45 |
@@ -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;
|
||||
|
||||
39
css/soc_link.css
Normal file
39
css/soc_link.css
Normal file
@@ -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;}
|
||||
128
css/style.css
128
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;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#RadioBox{
|
||||
width: 450px;
|
||||
height: 490px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 10px;
|
||||
#RadioBox {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
background-color: rgba(60, 60, 60, 0.9);
|
||||
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 {
|
||||
@@ -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;
|
||||
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{
|
||||
@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;
|
||||
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,9 +130,9 @@ h1 {
|
||||
}
|
||||
|
||||
.mute_btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
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: auto;
|
||||
margin-right: 0.7em;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
38
index.html
38
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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
38
js/radio.js
38
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);
|
||||
}
|
||||
|
||||
function showResults(results) {
|
||||
// $.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");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Процедура для формирования ссылки и картинки на 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);
|
||||
}
|
||||
|
||||
58
js/visual.js
Normal file
58
js/visual.js
Normal file
@@ -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();
|
||||
}
|
||||
BIN
pic/error.jpg
Normal file
BIN
pic/error.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
pic/kek.jpg
Normal file
BIN
pic/kek.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Reference in New Issue
Block a user