[Разработка веб-сайтов, JavaScript, Программирование, HTML] Красивое радио для браузера

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
22-Мар-2021 16:32

Цитировать

Прогуливаясь по просторам Интернета, я случайно наткнулся на довольно интересную разработку. Называется "Russian Radio Player". Пользователь выбирает станцию для прослушивания, слушает музыку, а на экране в это время сменяют друг друга красивые картинки. Внешний вид мне очень понравился, но так как мне больше по душе космическая тематика, то я решил этот плеер переделать под себя. Что из этого всего получилось читайте в этом посте.Что было и что сталоРазработка находится вот тут и выглядит вот так:

Как видим, станций немного. Изображений тоже мало и находятся они все в амазоновском облаке. Я решил изображения разместить локально и добавить больше станций. Вот, что получилось:

Мой вариант находится здесь.ПеределкиНовый список станцийВ самом начале скрипта в переменную 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, который отображается в списке рядом с названием станции. Это же изображение, только в увеличенном виде, расположено в шапке списка. В оригинале было векторное изображение головы медведя и его код располагался прямо в разметке страницы:

Я сделал без всяких векторов:

Зачем автору вообще мог понадобиться этот вектор? Может затем, что картинку для favicon он брал тоже с облака:

station.favicon = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/194122/bear-paw.png';

У меня все проще:

station.favicon = 'images/galaxy.png';

Переделок не так много, но благодаря им радио стало немножко интереснее. Может Вы, уважаемые читатели, сделаете его еще лучше. До встречи в следующих постах!
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_javascript, #_programmirovanie (Программирование), #_html, #_programmirovanie (программирование), #_radio (радио), #_html, #_javascript, #_vebrazrabotka (вебразработка), #_fork (форк), #_blog_kompanii_itsoft (
Блог компании ITSOFT
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_javascript, #_programmirovanie (
Программирование
), #_html

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 01:33
Часовой пояс: UTC + 5