Красивое радио для браузера22.03.2021 14:48

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

Что было и что стало

Разработка находится вот тут и выглядит вот так:

ed84bb2bf296bda9371f58555842c55d.png

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

c1e4fb5db82a97296a2b5020783b85f9.png

Мой вариант находится здесь.

Переделки

Новый список станций

В самом начале скрипта в переменную 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';

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

© Habrahabr.ru