Walking through the Internet, I stumbled upon a rather interesting development. It is called "Russian Radio Player". The user chooses a station to listen to, listens to music, and beautiful pictures replace each other on the screen. I really liked the appearance, but since I prefer the space theme, I decided to remake this player for myself. Read what came out of all this in this post.
What was and what became
The development is located here and looks like this:
As you can see, there are few stations. There are also few images and they are all in the Amazonian cloud. I decided to place the images locally and add more stations. Here's what happened:
My version is here .
Alterations
New station list
stations 15- :
var stations = [
{
"title": " ",
"stream": "http://air.volna.top/Retro"
},
{
"title": " ",
"stream": "http://78.111.244.206/euro32.mp3"
},
{
"title": "NonStopPlay",
"stream": "http://stream.nonstopplay.co.uk/nsp-128k-mp3"
},
{
"title": "Radio Record",
"stream": "http://air.radiorecord.ru:8101/rr_320"
},
{
"title": "Jazz FM Legends",
"stream": "http://jazz128legends.streamr.ru/"
},
{
"title": "Trancemission",
"stream": "http://air.radiorecord.ru:8102/tm_320"
},
{
"title": " 90-",
"stream": "http://air.radiorecord.ru:8102/sd90_320 "
},
{
"title": "Joy Radio",
"stream": "http://airtime.joyradio.cc:8000/airtime_192.mp3"
},
{
"title": "Fip Radio",
"stream": "http://direct.fipradio.fr/live/fip-midfi.mp3"
},
{
"title": "Dubstep",
"stream": "http://air.radiorecord.ru:8102/dub_320"
},
{
"title": " FM",
"stream": "http://icecast.stranafm.cdnvideo.ru/stranafm_128"
},
{
"title": "Music Radio",
"stream": "http://ice-the.musicradio.com/CapitalXTRANationalMP3"
},
{
"title": "Classical Music",
"stream": "http://stream.srg-ssr.ch/m/rsc_de/mp3_128"
},
{
"title": "Live Icy",
"stream": "http://live-icy.gss.dr.dk:8000/A/A05H.mp3"
},
{
"title": " ",
"stream": "http://195.91.237.50:8000/music32"
}
];
. overflow-y: scroll
:
.stations {
height: 100vh;
background-color: #262831;
box-shadow: 0 0 15px #262831;
z-index: 100;
overflow-y: scroll;
}
"" . ? .
backgrounds 14- :
var backgrounds = [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg',
'images/6.jpg',
'images/7.jpg',
'images/8.jpg',
'images/9.jpg',
'images/10.jpg',
'images/11.jpg',
'images/12.jpg',
'images/13.jpg',
'images/14.jpg'
];
Pixabay. , , galaxy.png, . , , . :
<div class="logo">
<svg id="bear" viewBox="-8 -10 90 95"><path id="head" d="m76.6 41.34-10.629-32.47 5.211-5.637v-9.478l-9.478-3.755-7.927 6.348-18.063 2.951-17.716-2.921-8.163-6.377-9.478 3.04v10.193l5.172 5.859-10.443 32.261-0.883 2.727 2.182 1.86 36.598 31.194 2.779 2.366 2.782-2.361 36.754-31.193 2.199-1.866-0.897-2.741zm-40.833 29.489-36.598-28.154 13.303-41.092l23.242-0.405 23.353 0.401 13.453 41.096-36.753 28.154z"/><polygon id="left-eye" points="29.359 41.058 28.957 36.677 40.67 39.494 38.345 43.606 32.4 44.429" transform="translate(-14.15 -15.249)"/><polygon id="right-eye" points="70.082 41.058 70.484 36.677 58.771 39.494 61.096 43.606 67.15 44.429" transform="translate(-14.15 -15.249)"/><polygon id="snout" points="58.771 39.494 58.771 39.494 60.297 58.059 62.753 69.227 49.92 77.195 37.239 69.227 39.521 57.949 40.67 39.494 40.67 39.494 40.938 58.108 38.826 68.592 49.925 74.611 61.148 68.595 58.883 58.243" transform="translate(-14.15 -15.249)"/><polygon id="nose" points="44.171 67.748 46.364 61.875 53.471 61.875 55.664 67.748 49.922 70.923" transform="translate(-14.15 -15.249)"/></svg>
</div>
:
<div class="logo">
<img id="galaxy" src="images/galaxy.png">
</div>
? , favicon
:
station.favicon = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/194122/bear-paw.png';
:
station.favicon = 'images/galaxy.png';
, . , , . !