company_banner

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

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

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

    ITSOFT
    Дата-центры: размещение и аренда серверов и стоек.

    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое