Слушаем 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 позиций ту, которая сейчас играет.
Дашь поюзать?
Так пожалуйста, вроде ничего не закрыто для общественности (;
ну я имел ввиду установить у себя на сайте :)
Привет! Не поделишься своей разработкой? Обещаю никому ее не давать!
Чет простая вставка фида в сайд ничего не дала, в принципе я и не ждал)) я так понял ты подключил каждый поток фида в флэш плеер и сунул все это в CSS
Привет.
Не, все немного сложнее. Флэш-плеер занимается только проигрыванием, фактически он даже визуально не присутствует на странице, чисто элемент в DOM-структуре. Пользователь нажимает на какую-нибудь кнопку Play, запускаяется javascript-функция, которая у проигрывателя вызывает метод, запускающий проигрывание соответствующего аудиопотока. Вся магия делается javascript’ои. Аяксом раз в минуту запрашивается с сервера список текущих композиций. Он там лежит уже в виде готового json-объекта, который генерируется скриптом, запускаемым по cron’у — это для увеличения производительности. Этот скрипт забирает rss-фид, парсит его и генерит, как я уже сказал, файлик с json-объектом, который далее уезжает в аякс-ответе.
Как время появится, постараюсь собрать все запчасти.
Буду ждать, молодец…уважуха за такое! Когда нить и я выучу коды, пока не до этого))
Привет! а я всё жду….и жду))
Привет. Я не забыл, просто, если честно, не знаю с какой стороны подступится. Последняя фраза
меня несколько вогнала в ступор. Пытаюсь осмыслить, в каком виде это все оформить, чтобы у тебя была получилось все это встроить к себе. На самом деле, любому мало-мальсокму php-кодеру было бы достаточно того описания, что я дал парой постов выше. Гораздо проще сделать все с нуля, делов то на самом деле не много, чем брать чью-то поделку и пытаться ее встроить в свой сайт. Куда ты это все собираешься вставлять? Есть какой-то сайт? На чем он построен? Какая-то CMS? Просто у меня движок написан с нуля мною лично, и основан он на Zend Framework — это библиотека php-классов, реализующая MVC-паттерн проектирования. Если я тупо отрежу этот кусок и выдам на скачивание, даже не представляю, что ты с этим будешь делать. Поэтому нужно для начала определиться, в каком виде это должно работать у тебя на сайте. Можно начать с того, что ты дашь мне ссылку на свой сайт.
PS. только без обид. У тебя нет времени на то, чтобы выучить коды, у меня нет времени, на то, чтобы писать подробную до мелочей инструкцию.
Привет! Какие обиды могут быть)) Моих знаний хватает на написание регеров на XHE. Правда, на сколько я знаю, сейчас даже школьник может на нем писать скрипты. Вот! Яву не знаю совсем. Прости, я чуть позже приведу в порядок свой блог. И дам тебе ссылку, а то ведь на него без слез и не взглянешь)) CMS WordPress 3. Спасибо за доброту!
сделал такое)) спасибо за идею!!! только вот наше радио не совпадает ((
а вот щас вроде норм )))) кому нужен код пишите sbtc@sibmail.com
Покажите хоть как получилось.
http://sbkportal.ru/
Прикольно. Молодец.
спасибо вам за идею! сам бы не нашёл откуда песни тягать)))
Перестало работать радио на главной.. firefox и flash последней версии. Проверьте пожалуйста!
Действительно. Еще на днях работало, а вчера обновил флэш-плагин, и перестало.
Будем разбираться, спасибо.
у меня заработало само)))))) ниче не делал )))
а Вы усовершенствовали да? смотрю громкость добавилась!!!
Да, было вдохновение, я его реанимировал и немного подрихтовал. Но еще не до конца все сделал, что задумывал. Во-первых поменял компонент-проигрыватель, этот действительно перестал работать видать в виду того, что какие-то используемые функции flash перестали существовать. Сейчас я выбрал современный плагин, основанный на jQuery, ко всему прочему он является гибридным flash-html5, то есть, если в браузере выключен флэш, он будет проигрывать контент средствами html5. А сейчас все современные браузеры поддерживают хтмл5. Такое используется во многих социальных проектах типа ютуб, соц. сети, в них музыка, видео проигрывается даже если в браузере выключена поддержка active-x элементов. Только вот у меня почему-то не завелся на html5, возможно, есть какая-то специфика воспроизведения потокового аудио. Пока не разобрался. Ну и из приятного, до чего руки не доходили, добавил наконец-то громкость — с новым компонентом это оказалось проще сделать, правда сам UI-контрол громкости я писал полностью с нуля на чистом html/css/js(jQuery). Уровень громкости кстати в куках запоминается. И еще одна фича. Прежний компонент создавался всегда, когда пользователь попадал на мой сайт, на любой странице. Сейчас я наконец-то сделал так, чтобы он создавался только в момент первого клика по кнопке play. Я это и в первой версии пытался предусмотреть, но тогда это решение не стабильно работало в FireFox, и я решил отложить до лучших времен)).
Доделаю, напишу апдейт к статье.
И вот еще, этот новый компонент поддерживает гораздо больше форматов в отличие от прежнего — тот поддерживал только mp3. То есть, можно будет пополнить список каналов, потому что некоторые радиоканалы используют специфичные форматы аудио, типа wma
Ну это просто супер же!!!! Жду жду жду апдейт!!!!!!