santic
/
radio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Some Improves

Browse Source
new_ver
santic-zombie 5 years ago
parent 1c4c1b7a45
commit 0afbb5f439
9 changed files with 232 additions and 67 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 39
      css/soc_link.css
  2. 80
      css/style.css
  3. 32
      css/volume.css
  4. 30
      index.html
  5. 1
      js/audio.js
  6. 29
      js/radio.js
  7. 58
      js/visual.js
  8. BIN
      pic/error.jpg
  9. BIN
      pic/kek.jpg

39
css/soc_link.css
Unescape View 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;}

80
css/style.css
Unescape View File

@ -10,29 +10,35 @@ body {
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; flex-direction: row;
align-content: center;
justify-content: left;
overflow: auto;
} }
#RadioBox{ #RadioBox {
width: 450px; width: 25%;
height: 100%; height: 100%;
background-color: rgba(60, 60, 60, 0.9); background-color: rgba(60, 60, 60, 0.9);
/* border-radius: 10px; */
padding: 0 5px; padding: 0 5px;
color: #fff; color: #fff;
} }
.tagBOX{ #spec {
width: 410px; width: 75%;
height: 150px; height: 100%;
}
.canvas {
width: 100%;
height: 100%;
}
.youtubeIMG {
max-width:60%;
height:auto;
} }
.tagA { .tagA {
width: 100%; width: 100%;
height: 20px; /* height: 20px; */
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
border: #f54e4e; border: #f54e4e;
background-color: #000; background-color: #000;
@ -42,7 +48,8 @@ body {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-left: auto; margin-left: auto;
margin-right: auto margin-right: auto;
font-size: 1vw;
} }
.tagA:hover { .tagA:hover {
@ -67,17 +74,17 @@ body {
h1::before { h1::before {
content: ''; content: '';
display: inline-block; 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; background: red;
animation: blink 3s linear infinite; animation: blink 3s linear infinite;
} }
@keyframes blink{ @keyframes blink {
0%{opacity: 0;} 0%{opacity: 0;}
25%{opacity: .5;} 25%{opacity: .5;}
50%{opacity: 1;} 50%{opacity: 1;}
@ -88,13 +95,14 @@ h1::before {
h1 { h1 {
text-align: center text-align: center
float:left; float:left;
margin:10px 50px; /* margin:10px 50px; */
font-size: 2vw;
} }
.btn { .btn {
width: 100px; width: 7em;
height: 60px; height: 4.5em;
border-radius: 5px; border-radius: 0.4em;
border: #f54e4e; border: #f54e4e;
background-color: #000; background-color: #000;
color: #fff; color: #fff;
@ -103,7 +111,7 @@ h1 {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin: auto; margin: auto;
justify-content : center; font-size: 0.8vw;
} }
@ -122,9 +130,9 @@ h1 {
} }
.mute_btn { .mute_btn {
width: 30px; width: 2em;
height: 30px; height: 2em;
border-radius: 5px; border-radius: 0.4em;
border: #f54e4e; border: #f54e4e;
background-color: #000; background-color: #000;
color: #fff; color: #fff;
@ -132,8 +140,8 @@ h1 {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-right: 10px; margin-right: 0.7em;
//margin: auto; font-size: 0.8vw;
} }
.mute_btn:hover { .mute_btn:hover {
@ -162,7 +170,7 @@ h1 {
.tlist { .tlist {
width: 100%; width: 100%;
height: 35%; height: 33%;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
border: #f54e4e; border: #f54e4e;
background-color: #fff; background-color: #fff;
@ -187,6 +195,16 @@ h1 {
color: #000; color: #000;
} }
.soc_links {
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: inline-flex;
}
DIV { DIV {
text-align: center text-align: center;
font-size: 1vw;
} }

32
css/volume.css
Unescape View File

@ -4,15 +4,15 @@
/* The slider itself */ /* The slider itself */
.slider { .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; transition: opacity .2s;
font-size: 0.8vw;
} }
/* Mouse-over effects */ /* Mouse-over effects */
@ -24,15 +24,17 @@
.slider::-webkit-slider-thumb { .slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */ -webkit-appearance: none; /* Override default look */
appearance: none; appearance: none;
width: 25px; /* Set a specific slider handle width */ width: 2em;
height: 25px; /* Slider handle height */ height: 2em;
background: #000; background: #000;
cursor: pointer; /* Cursor on hover */ cursor: pointer;
font-size: 0.8vw;
} }
.slider::-moz-range-thumb { .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;
} }

30
index.html
Unescape View File

@ -3,18 +3,23 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <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" 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/style.css">
<link rel="stylesheet" type="text/css" href="/css/msgbox.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/scroll_text.css">
<link rel="stylesheet" type="text/css" href="/css/volume.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> <title>My Test Radio</title>
<script <script
src="https://code.jquery.com/jquery-3.4.1.js" src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"> crossorigin="anonymous">
</script> </script>
</head> </head>
<body> <body>
@ -25,16 +30,18 @@
<h1>Just Radio</h1> <h1>Just Radio</h1>
<div id="PlayStat">Stopped</div> <div id="PlayStat">Stopped</div>
<br> <br>
<a name="YouTubeURL" href="" target="_blank"> <a name="YouTubeURL" href="" target="_blank">
<img name="YouTubeThumb" width="336" height="188" <img class="youtubeIMG" name="YouTubeThumb" width="336" height="188"
src=""> src="">
</img> </img>
</a> </a>
<br> <br>
<br> <br>
<div class="tagWindow"> <div class="tagWindow">
<form name="artistURL" action="" target="_blank"> <form name="artistURL" action="" target="_blank">
<button class="tagA"> <button class="tagA">
@ -82,13 +89,32 @@
<div id="track_list" class=tlist> <div id="track_list" class=tlist>
</div> </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 id="jGrowl"></div>
</div> </div>
<div id=spec>
<canvas id="canvas" class=canvas></canvas>
</div>
</div> </div>
<script src="js/audio.js" type="text/javascript"></script> <script src="js/audio.js" type="text/javascript"></script>
<script src="js/radio.js" type="text/javascript"></script> <script src="js/radio.js" type="text/javascript"></script>
<script src="js/visual.js" type="text/javascript"></script>
</body> </body>

1
js/audio.js
Unescape View File

@ -2,6 +2,7 @@ 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.05;
var play = document.getElementById('play'); var play = document.getElementById('play');
play.addEventListener('click', function() { play.addEventListener('click', function() {
var MsgText = $('<div id="message-success"><p>Play</p></div>'); var MsgText = $('<div id="message-success"><p>Play</p></div>');

29
js/radio.js
Unescape View File

@ -79,18 +79,39 @@ function getYouTubeRequest(MPDfile) {
key: 'AIzaSyCfkMY2Nk3QwEh1Tjdqm-8GueBqOS5jgeI', key: 'AIzaSyCfkMY2Nk3QwEh1Tjdqm-8GueBqOS5jgeI',
q: MPDfile 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; var entries = results.items;
thumb = entries[0].snippet.thumbnails.medium.url; thumb = entries[0].snippet.thumbnails.medium.url;
YouURL = entries[0].id.videoId; YouURL = entries[0].id.videoId;
document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', thumb); document.querySelector('img[name="YouTubeThumb"]').setAttribute('src', thumb);
document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL); document.querySelector('a[name="YouTubeURL"]').setAttribute('href', "https://www.youtube.com/watch?v="+YouURL);
console.log("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) { function addText(MPDfile) {
let last_track = document.createElement('div'); let last_track = document.createElement('div');
last_track.className = "list_el"; last_track.className = "list_el";

58
js/visual.js
Unescape View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
pic/kek.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

Write Preview
Loading…
Cancel
Save