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

   <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';

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

Красивое радио для браузера