Настройка интернет-радио в формате aacplus в контейнере .flv для flash с автообновлением заголовков песен

Blog by admin
Этим летом я озадачился сделать интернет радио с возможностью показа названия текущей песни и артиста без дополнительных ajax запросов. Админы с форума uppod говорили мне что это не реально. К счастью Интернет богат умными людьми и решение было найдего мною сегодня, на хабре про такой способ до сих пор нет статьи на эту тему.
Кому интересно, добро пожаловать под кат.

Лучше один раз увидеть

Собственно благодаря этому сайту я и нашел решение
http://flv.bigrradio.com/player.xsl?mount=/di_progressive_aacplus.flv
Открывайте firebug и ждите следующий трек, никаких лишних запросов, всё читается из метаданных.
Два преимущества этой технологии:
1) качественный звук при низком битрейте (кодек aacplus)
2) считывание заголовков текущей песни на лету!

Что нам понадобится для реализации

  • icecast v2 KH branches (дополненная версия icecast 2, автор Karl Heyes за что ему большое спасибо! )
  • flash player с поддержкой стримминга и чтением метаданных, я знаю только один такой — JW Player, в нём есть функция player.addModelListener(«META», «metatracker»), надеюсь uppod'овцы тоже это реализуют
icecast v2 KH branches
Скачиваем последнюю версию, на момент написания статьи это была icecast-2.3.2-kh28 и устанавливаем как обычно:
wget <a href="http://www.xiphicecast.webspace.virginmedia.com/icecast-2.3.2-kh28.tar.gz">www.xiphicecast.webspace.virginmedia.com/icecast-2.3.2-kh28.tar.gz</a>
 tar -zxf icecast-2.3.2-kh28.tar.gz
 cd icecast-2.3.2-kh28
 ./configure
 make && make install && make clean

У меня freebsd, и уже стоял icecast2 из портов, поэтому прежде чем ставить эту версию, я удалил старую, дабы не возникало конфликтов, но старый конфиг остался в /usr/local/etc/icecast.xml
У кого при configure вылезут error'ы, вероятно не хватает доп. зависимостей libvorbis, libogg и тд (читайте что напишут в ошибке, у меня не сразу поставилось)

После успешной установки icecast создался каталог /usr/local/share/icecast, в нём есть примеры конфигов (папка doc)
далее запускаем:
#icecast -c /usr/local/etc/icecast.xml -b;
у меня не сразу запустилось, по началу ругался на две директивы в конфиге 5 и <burst-on-connect>1</burst-on-connect>, видимо не поддерживаются в исправленной версии, пришлось закоментировать, после чего всё запустилось

Я предполагаю что вы уже знакомы с icecast и вы самостоятельно смонтировали себе поток в формате aacplus (можно и в другие MP3, AAC), например в mount-name /live_aacplus и ваше радио можно слушать через аудиоплеер по адресу: ваш_ip:8000/live_aacplus
А теперь самое интересное, если добавить в запрос ?type=.flv, вызывается триггер который заворачивает поток в .flv контейнер со всеми метаданными текущего трека — ваш_ip:8000/live_aacplus?type=.flv

Цитата с сайта разработчика:
Allow for per-listener wrapping of existing mp3/aac streams when requested with a type=.flv as a query arg. The actual trigger could be anything we want but this allows for using the existing mountpoint, with easy mapping for URL auth and for matching an extension in the player. Works with intro and fallback handling.
Ну всё наш поток готов, теперь осталось его засунуть в плеер и слушать.

JW Player
Скачиваем последнюю версию JW Player, на момент написание это была 5.4, пусть плеер будет в /player/player.swf
Скачиваем swfobject и устанавливаем в папку /player/swfobject.js
Ниже будет итоговый HTML, в нём есть особенность две функции metaTracker — для обновления метаданных и playerReady — для инициализации этой функции, что-то наподобие domReady только для JW Player (где player — ID контейнера)
Итоговый HTML, взятый из статьи с fastserv.com, разместим его в player.html:

<div id="metadata">
 <p> </p>
</div>

<script type="text/javascript" src="/player/swfobject.js"></script>
>
    var player;
    
    function metaTracker(obj) {
        if (obj.type == 'metadata') {
            if ( md = document.getElementById('metadata') )
            {
             meta = '';
     
             for(att in obj)
         {
            if ((att == 'artist') || (att == 'title')) 
            {
                  meta = meta + obj[att];
                 }
             }
     
         md.innerHTML = 'Now Playing: '+meta+'';
        }
    
        }
    };
    
    function playerReady(obj) {
        if ( md = document.getElementById('metadata') )
        {
         
         var id = obj['id'];
         var version = obj['version'];
         var client = obj['client'];
         player = document.getElementById(id);
         player.addModelListener("META","metaTracker");
     }
    };
</script>
"player">"http://www.macromedia.com/go/getflashplayer">Get the Flash Player to hear this stream.
>
    // SET THE FOLLOWING VARIABLES ACCORDING TO YOUR STREAM
     var stream = '/live_aacplus';
     var autostart = 'true';
    // DO NOT EDIT ANYTHING BELOW THIS POINT
     var so = new SWFObject('/player/player.swf','mpl','470','20','9');
     so.addParam('allowscriptaccess','always');
     so.addParam('allowfullscreen','false');
     so.addVariable('autostart', autostart);
     so.addVariable('file', stream+'%3Ftype%3D.flv'); // ?type=.flv
     so.write('player'); // id player object
</script>


Готово, открываем player.html, если радио прослушивается, то наблюдаем за сменой трека, который будет обновляться в P.S. радио в таком формате можно слушать и через другие плееры, например через uppod, однако из-за отсуствия поддержки метатегов, посмотреть текущий трек пока не получится, надеюсь разработчики будут внедрять эту финчу в свои плееры

С удовольствием отвечу на вопросы и помогу с настройкой, если что не понятно спрашивайте, icq: 5102025

Используемые сайты и софт:


0 комментариев

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