Home > Blog, News > Слушаем online-радио у себя на сайте

Слушаем online-радио у себя на сайте

Больше месяца уже не обновлял блог – ай-ай-ай. Исправляюсь… Одной из задач, поставленных на 2011 год в подведении итогов 2010 было добавление на сайт функциональности по прослушиванию Online радио. Зачем мне это нужно? По нескольким причинам. Самая первая – люблю послушать радио, когда неохота ничего из своей собственной коллекции. Во-вторых, если сделал ТВ-программу, то логично и радио до кучи, так сказать. Ну и в-третьих, я уже несколько раз пытался к этому делу подступиться, изучить вопрос, но картина никак не хотела складываться воедино. То я не мог понять, где брать программу передач и то, что идет в прямом эфире, то не мог сообразить, откуда брать собственно сам аудиоконтент. Как только появилось достаточно времени, я приступил к очередному штурму. В начале стоит сделать одну оговорку. Меня на данном этапе интересовали только FM-станции, то есть те, которые реально вещают в FM-диапазоне, и которые можно слушать через обычный радиоприемник. Такие, например, как Наше Радио, РетроФМ, Радио Зенит, Эльдорадио. Количество таких станций исчисляется десятками. Существуют также чисто интернет радио станции, которые не вещают в ФМ-диапазоне, ибо удовольствие это не из дешевых (лицензия на использование частот, оборудование, офис итд). Их количество, пожалуй, исчисляется тысячами, если не миллионами. Такую станцию интернет-радио может сделать любой желающий. Для этого необходим сервер (чем мощнее, тем лучше), интернет-канал (чем толще, тем лучше) и специализированный софт (бесплатного полно). Ну и сам контент (музыка, аудиокниги). В поисках источника аудиоконтента онлайн ФМ радио и их программ передач я изучил несколько десятков интернет-ресурсов, которые предоставляют подобный сервис (онлайн-радио), и вот, что мне удалось выяснить. Во-первых, каждая уважающая себя радиостанция имеет собственный сайт и раздел типа “Слушать Онлайн”. Эта функция может быть реализована либо через специализированный Flash-плеер, который соединяется с сервером радио и получает от него аудиоконтент в каком-то своем формате, либо сайт может дать ссылку на плейлист .m3u, который можно открыть, например, в WinAmp’е и не зависеть от Flash и от самого сайта. Внутри этого m3u содержиться ссылка на потоковое аудио. К примеру, Наше радио дает возможность слушать через винамп. У них ссылка потокового аудио выглядит так: http://94.25.53.133:80/nashe-128 (128-битрейт, таких ссылок может быть несколько для разных полос пропускания). По уму, раз они выдают этот плейлист, то подразумевается, что он будет всегда актуален, поэтому я решил отталкиваться от этой аксиомы. Некторые плейлисты содержат сразу несколько ссылок на разные сервера – видимо распределение нагрузки, типа если два сервера не позволят создать коннекцию из-за лимита подключений, то третий даст. Некоторые сайты выдают ссылку для потокового аудио, которые можно проиграть только в Windows Media Player. Таким образом, из всех интересующих меня фм-каналов ссылки удалось раздобыть где-то для 40%. В остальном мне помог ресурс http://online.fm – на нем я нашел ссылки для потокового аудио всех остальных интересующих меня каналов. Существует также очень серьезный ресурс – piter.fm и его собрат moskva.fm. Суть этого ресурса в следующем. Он записывает эфиры всех радиостанций с фм-приемника, сохраняет естественно в цифре и затем с помощью проприетарного Flash-плеера предоставляет своим пользователям возможность все это дело прослушать. Это можно услышать по качеству аудио. Если родной аудиопоток какой-нибудь станции имеет изначально цифровую природу, то при прослушивании питер.фм эфира порой бывают слышны радиопомехи, да и вообще, заметно ощущается двойное цифро-аналоговое и обратно аналого-цифровое преобразование. То есть, питер.фм хорош тем, что не зависит от нагруженности сервера онлайн – радио, из-за чего сигнал может прерываться. Кроме того, этот сервис занимается тем, что распознает в реальном времени почти все музыкальные композиции, играющие на том или ином канале, и сохраняет все в базе. Делает он это с помощью сервиса TrackId, механизм которого для меня до сих пор остается загадкой. И еще одна хорошая функция у питер.фм – он откуда то берет программы передач некоторых радиостанций. Я как ни искал, не нашел ни на одном сайте ни одной станции раздела с передачами. Позже я взял этот факт на вооружение и написал небольшой парсер на манер того, который делает мне на сайте тв-программу. Кстати, оформление FM-программы не заняло много времени, потому что стало абсолютной калькой тв-программы. Питер.фм ко всему прочему оказался весьма не жадным сервисом. Он предоставляет rss-фид с информацией о том, что в данный момент играет на той или иной станции. Эту фичу я использовал для обновления информации о текущей композиции, выводимой в сайдбаре. Вот как это выглядит:

Есть конечно в этом всем один существенный недочет. Композиции обновляются с опозданием, поскольку на питер.фм существует задержка засчет TrackId распознавания. Сам питер.фм благополучно решил эту проблему тем, что в его распоряжении есть весь записанный контент, и он может выдавать его с такой же задержкой пользователю, в следствие чего у последнего не возникнет никаких подозрений. Если влючить фм-приемник и плеер питер.фм на одной станции, то эта задержка сразу станет заметна. В их навороченном плеере на таймлайне можно выбрать ранее проигранную композицию и послушать ее хоть сто раз. Не знаю пока, что с такой рассинхронизацией делать, но решил пока оставить так. Главное, что уже можно пользоваться. Вообще, давно у меня назревает мыслшика поэкспериментировать с облачным хостингом, например, Amazon S3. С помощью него можно легко сделать такой же сервис, как питер.фм. Он будет записывать все фм-эфиры, а на своем сайте я буду получать аудиоконтент уже не с кучи разных ссылок, а со своего облачного сервера. Придется, конечно покодить, но куда уж без этого…

На последок немножко о внутренностях моей fm-игралки. Структура программы фм-передач абсолютно такая же, как у тв. В качестве проигрывателя я использовал бесплатный Flash-компонентик – отличная вещь, ничего лишнего. Иконки play и pause я торжественно позаимствовал у Вконтакте – уж очень они вписались в мой дизайн, ну а остальное – дело фантазии и jQuery. Кстати, у того же вконтакте подсмотрел полезную штуковину: когда слушаешь аудиозапись снизу страницы прикрепляется небольшой фреймик с контролами управления и информацией о проигрываемой композиции. В любой момент можно остановить проигрываение, чтоб не искать в плейлисте из 200 позиций ту, которая сейчас играет.

  1. December 1st, 2011 at 12:04 | #1

    Дашь поюзать?

  2. December 1st, 2011 at 19:58 | #2

    Так пожалуйста, вроде ничего не закрыто для общественности (;

  3. petrik
    December 1st, 2011 at 20:55 | #3

    ну я имел ввиду установить у себя на сайте :)

  4. prixod
    January 11th, 2012 at 12:35 | #4

    Привет! Не поделишься своей разработкой? Обещаю никому ее не давать!

  5. prixod
    January 11th, 2012 at 12:40 | #5

    Чет простая вставка фида в сайд ничего не дала, в принципе я и не ждал)) я так понял ты подключил каждый поток фида в флэш плеер и сунул все это в CSS

  6. January 11th, 2012 at 19:23 | #6

    Привет.
    Не, все немного сложнее. Флэш-плеер занимается только проигрыванием, фактически он даже визуально не присутствует на странице, чисто элемент в DOM-структуре. Пользователь нажимает на какую-нибудь кнопку Play, запускаяется javascript-функция, которая у проигрывателя вызывает метод, запускающий проигрывание соответствующего аудиопотока. Вся магия делается javascript’ои. Аяксом раз в минуту запрашивается с сервера список текущих композиций. Он там лежит уже в виде готового json-объекта, который генерируется скриптом, запускаемым по cron’у – это для увеличения производительности. Этот скрипт забирает rss-фид, парсит его и генерит, как я уже сказал, файлик с json-объектом, который далее уезжает в аякс-ответе.
    Как время появится, постараюсь собрать все запчасти.

  7. prixod
    January 11th, 2012 at 20:18 | #7

    Буду ждать, молодец…уважуха за такое! Когда нить и я выучу коды, пока не до этого))

  8. prixod
    February 7th, 2012 at 12:14 | #8

    Привет! а я всё жду….и жду))

  9. February 7th, 2012 at 19:45 | #9

    Привет. Я не забыл, просто, если честно, не знаю с какой стороны подступится. Последняя фраза

    prixod :
    Когда нить и я выучу коды, пока не до этого))

    меня несколько вогнала в ступор. Пытаюсь осмыслить, в каком виде это все оформить, чтобы у тебя была получилось все это встроить к себе. На самом деле, любому мало-мальсокму php-кодеру было бы достаточно того описания, что я дал парой постов выше. Гораздо проще сделать все с нуля, делов то на самом деле не много, чем брать чью-то поделку и пытаться ее встроить в свой сайт. Куда ты это все собираешься вставлять? Есть какой-то сайт? На чем он построен? Какая-то CMS? Просто у меня движок написан с нуля мною лично, и основан он на Zend Framework – это библиотека php-классов, реализующая MVC-паттерн проектирования. Если я тупо отрежу этот кусок и выдам на скачивание, даже не представляю, что ты с этим будешь делать. Поэтому нужно для начала определиться, в каком виде это должно работать у тебя на сайте. Можно начать с того, что ты дашь мне ссылку на свой сайт.

    PS. только без обид. У тебя нет времени на то, чтобы выучить коды, у меня нет времени, на то, чтобы писать подробную до мелочей инструкцию.

  10. prixod
    February 9th, 2012 at 14:37 | #10

    Привет! Какие обиды могут быть)) Моих знаний хватает на написание регеров на XHE. Правда, на сколько я знаю, сейчас даже школьник может на нем писать скрипты. Вот! Яву не знаю совсем. Прости, я чуть позже приведу в порядок свой блог. И дам тебе ссылку, а то ведь на него без слез и не взглянешь)) CMS WordPress 3. Спасибо за доброту!

  11. Andrey
    May 15th, 2012 at 11:46 | #11

    сделал такое)) спасибо за идею!!! только вот наше радио не совпадает ((

  12. Andrey
    May 19th, 2012 at 04:48 | #12

    а вот щас вроде норм )))) кому нужен код пишите sbtc@sibmail.com

  13. May 20th, 2012 at 17:25 | #13

    Покажите хоть как получилось.

  14. Andrey
    May 22nd, 2012 at 06:39 | #14
  15. May 22nd, 2012 at 11:49 | #15

    Прикольно. Молодец.

  16. Andrey
    May 22nd, 2012 at 12:10 | #16

    спасибо вам за идею! сам бы не нашёл откуда песни тягать)))

  17. September 19th, 2012 at 10:32 | #17

    Перестало работать радио на главной.. firefox и flash последней версии. Проверьте пожалуйста!

  18. September 19th, 2012 at 11:55 | #18

    Действительно. Еще на днях работало, а вчера обновил флэш-плагин, и перестало.
    Будем разбираться, спасибо.

  19. September 21st, 2012 at 15:20 | #19

    у меня заработало само)))))) ниче не делал )))

  20. September 21st, 2012 at 15:37 | #20

    а Вы усовершенствовали да? смотрю громкость добавилась!!!

  21. September 22nd, 2012 at 13:14 | #21

    Да, было вдохновение, я его реанимировал и немного подрихтовал. Но еще не до конца все сделал, что задумывал. Во-первых поменял компонент-проигрыватель, этот действительно перестал работать видать в виду того, что какие-то используемые функции flash перестали существовать. Сейчас я выбрал современный плагин, основанный на jQuery, ко всему прочему он является гибридным flash-html5, то есть, если в браузере выключен флэш, он будет проигрывать контент средствами html5. А сейчас все современные браузеры поддерживают хтмл5. Такое используется во многих социальных проектах типа ютуб, соц. сети, в них музыка, видео проигрывается даже если в браузере выключена поддержка active-x элементов. Только вот у меня почему-то не завелся на html5, возможно, есть какая-то специфика воспроизведения потокового аудио. Пока не разобрался. Ну и из приятного, до чего руки не доходили, добавил наконец-то громкость – с новым компонентом это оказалось проще сделать, правда сам UI-контрол громкости я писал полностью с нуля на чистом html/css/js(jQuery). Уровень громкости кстати в куках запоминается. И еще одна фича. Прежний компонент создавался всегда, когда пользователь попадал на мой сайт, на любой странице. Сейчас я наконец-то сделал так, чтобы он создавался только в момент первого клика по кнопке play. Я это и в первой версии пытался предусмотреть, но тогда это решение не стабильно работало в FireFox, и я решил отложить до лучших времен)).
    Доделаю, напишу апдейт к статье.

  22. September 22nd, 2012 at 13:20 | #22

    И вот еще, этот новый компонент поддерживает гораздо больше форматов в отличие от прежнего – тот поддерживал только mp3. То есть, можно будет пополнить список каналов, потому что некоторые радиоканалы используют специфичные форматы аудио, типа wma

  23. September 23rd, 2012 at 10:36 | #23

    Ну это просто супер же!!!! Жду жду жду апдейт!!!!!!