Вруби дискотеку на сайте с радио плеером онлайн!

/, сайтостроение/Вруби дискотеку на сайте с радио плеером онлайн!

Здарова! Ребята, поставил я себе на сайт радио плеер онлайн (см. в подвале сайта), давно хотел чего-то эндакого развлекательного забацать. И вот вам дискотека. :) Это специальный плагин радио для wordpress, который позволяет установить абсолютно любые радиостанции, поддерживающие потоки типа MP3 через серверы Shoutcast и Icecast. А таких радиостанций видимо-невидимо, как всеми известных и популярных, так и очень крутых, редко встречающихся.

Сначала я искал бесплатные варианты подобных плагинов, но как всегда, бесплатно бывает только «сыр в мышеловке» или попросту говоря — полная фигня. То дизайн радио плеера никудышный, то куча ссылок проставлена с такого радио плеера онлайн на сайт разработчиков, то вообще чудо-юдо-рыба-кит))). :(

В результате многих тестирований и просмотров работы плагинов в демо-режимах, я нашел для себя самый идеальный вариант плагина радио, функционал которого предлагает шикарные возможности. Это платный плагин — Radio Player Shoutcast & Icecast WordPress Plugin. На что же он способен?

Возможности плагина Radio Player Shoutcast & Icecast

  • Достаточно добавить ссылку на поток нужной радиостанции в настройках плагина — и автоматически появится название радиостанции, песни, имя и фото текущего исполнителя или группы, жанр музыки в категориях.
  • Адаптивный дизайн радио плеера онлайн — его можно включить и отключить. Радио будет отлично выглядеть на экранах планшетов и смартфонов. Также радио плеер совместим с операционными системами IOS и Android.
  • Вы можете выбрать любую цветовую гамму дизайна radio player online прямо как в фотошопе.
  • Встроенный поиск — найти нужную радиостанцию легко.
  • Поделиться в соц.сети — понравилась песня? Жмите на кнопки Facebook или Twitter, расскажите друзьям.
  • Можно вручную по своему желанию установить названия категорий музыки и радиостанций.
  • Бесчисленное количество настроек — показать/скрыть кнопки звука, воспроизведения и др.; установка любой ширины и длины плеера, автозапуска, цветовых параметров, списка воспроизведения.
  • При необходимости на разных страницах сайта поставить отличающиеся по форме, дизайну, набору радиостанций, — радио плееры онлайн, без проблем! Установка с помощью шорткодов — проще не бывает!
  • Ну и, конечно же, после покупки вы всегда бесплатно и автоматически будете получать обновления этого плагина как и для всех wordpress-овских плагинов.

А теперь я побуду хирургом со скальпелем в руках!

Испугались? Не бойтесь, будет не больно! ;) Я проведу операцию нашему подопечному — плагину для радио онлайн, чтобы показать вам его «кишечки» изнутри, то есть настройки. Сам интерфейс настроек на английском, но там даже школьник разберется, все просто и понятно.

Устанавливается плагин Radio Player Shoutcast & Icecast стандартно через админку вордпресс — добавить новый и далее загрузите его с компьютера. После установки увидите слева в админ-панели.

html5-радио-плеер-для-сайта

Жмем на эту заморскую надпись и получаем.

радио-плеер

Как видите, все очень просто, нажав на списки плееров или категорий, откроются вами созданные и рядом с ними потом увидите настройки и т.д. Но сначала, к примеру, нажмем Add New и добавим новый радио плеер онлайн.

radio-player

Нажимаем внизу Add New  — сохраняем.

Теперь сохраненные радио плееры вы будете видеть в списке Manage Players (скриншот выше). Я уже заранее создал один плеер по имени — White Controllers и, нажимая на наш список видим следующее.

плагин-радио

Давайте нажмем Player Settings и посмотрим как выглядят настройки радио плеера. В один скриншот у меня не влезло и получилось аж 6 скринов по порядку.

Сначала идут — General Settings (основные настройки).

radio-плагин

плагин-радио-wordpress

плагин-для-радио-онлайн

В продолжении идут настройки плейлистов и категорий — Playlist & Categories Settings.

radio-player-online

радио-плеер-для-сайта

плеер-онлайн-радио-для-сайта

Настроек просто вагон. Вы можете все что хотите изменять: дизайн радио, его длину и ширину и много-много чего. Притом, перед сохранением настроек всегда есть возможность нажать на предпросмотр Preview Player (он почти на всех страницах настроек есть — вверху), и заранее, до установки на сайте, увидеть внешний вид радио плеера и проверить его работу.

А теперь рассмотрим, где добавлять игроков, то есть сами радиостанции. Как я уже показывал на скриншотах выше, для этого напротив имени радио плеера жмем Playlist и вот что увидят ваши глаза. 8O

радио-онлайн-ссылки-для-плеера

Все интуитивно очень понятно. Категории (направления музыки) добавляются в Manage Categories кнопкой Add new, тут во всем разберетесь как плюнуть, не будем это разбирать по косточкам, есть дела поважнее!

И вот мы плавно так подошли к одному из главных моментов — а где же брать эти самые ссылки на потоки радиостанций? А мы их просто будем красть, благо за это на «зону» не пойдем))). :D

Эй, радиостанция, ссылка на поток есть? Нет. А если найду!

Вообще, таких ссылок для радио плеера онлайн ой как много в интернете, достаточно вбить в поиск «ссылки на потоки радиостанций» и выбирай что душе угодно. Окей, Гугл))

Но что если вам очень приглянулась какая-нибудь радиостанция, на поток которой вы не можете найти ссылку, так как некоторые сайты радио прячут ссылки на свои потоки в целях поднятия собственного имиджа. Тогда мы просто зайдем на эту радиостанцию и тупо возьмем сами, так сказать, вырежем скальпелем под угрозой жизни. :evil: Для этого нам понадобится браузер Google Chrome и его панель инструментов разработчика. Можно и с других браузеров заходить, в интернете можете поюзать на эту тему, но я расскажу на примере Гугл браузера, потому как я с него постоянно в интернете сижу…

Итак, мне понравилась вот такая радиостанция — Радио Дискотека 90-ых. Я захожу на ее сайт с браузера Google Chrome. Далее проделываем следующее:

  1. Нажимаете F12 — откроется панель инструментов для разработчиков, или правой кнопкой тачпада по экрану (на ноутбуке) — просмотреть код — тоже откроется наша панель.
  2. Потом перезагружаем страницу сайта радиостанции.
  3. Включаем радио плеер.
  4. В открывшейся панели идем в раздел Network и именно в Timeline ищем самое длинное соединение (оно будет самой длинной цветной полосой). Вниз/вверх прокручивайте мышкой в разделе Timelime и найдете самую длинную полосу.
  5. Далее жмем правой кнопкой мыши или тачпада по этой полосе и копируем ссылку на наш радиопоток (copy link address).

радио-плеер-купить

Все, ссылку для плагина радио украли. И тут еще такой нюанс есть. На нашем примере я получил вот такую ссылку.

http://air.radiorecord.ru:8102/sd90_128?type=.flv&file=http://air.radiorecord.ru:8102/sd90_128?type=.flv&start=0

Ссылка должна быть без «хвостов», которые начинаются с вопросительного знака «?», иначе она не заработает. То есть, просто берем и удаляем все то, что начинается с «?». В итоге правильная ссылка должна иметь следующий вид.

http://air.radiorecord.ru:8102/sd90_128

Но часто ссылки бывают уже без хвостов и все отлично работает, просто не забывайте этот нюанс.

Проверить работоспособность ссылки на поток довольно легко. Вставляем ссылку в верхнюю строку браузера (url), открываем ее (жмем Enter) и у нас должен появиться аудио-плеер, нажав Play которого, заиграет сама радиостанция. Вот и все. Далее вставляем эту ссылку в настройки плагина радио и танцуем под супер-дискотеку 90-ых. 8)

В итоге, вы можете создать радио плеер онлайн под свои вкусы как музыкальные, так и придумать различные дизайнерские решения. Плагин Radio Player Shoutcast & Icecast на данный момент стоит 16$, нажав кнопку ниже — вы перейдете на официальный сайт покупки плагина. Также под этой статьей пример мною созданного радио плеера, включайте Play и наслаждайтесь любимой музыкой! На этом извольте раскланяться, всем хорошего настроения!


 

Об авторе:

2 комментария

  1. Евгений 02.09.2016 в 23:37 - Ответить

    Хорошую штуковину замутил на блоге , Янис!

    мне очень нравиться твое радио и твой блог! )))

    спасибо!

  2. Александр Макаров 13.11.2016 в 00:25 - Ответить

    Одно время тоже думал о радио или ТВ, но так дело до установки и не дошло. Считаю это бесполезными штучками на блоге, а что думает вебвизор метрики?

Оставить комментарий