Плееры для комнаты вещания могут быть нескольких видов. Браузеры для прослушивания звука используют два метода: FlashPlayer и появившийся в HTML5 тэг <audio>. Мы разбирали особенности этих методов и поддерживаемые кодеки в бонусе «Сжатие звука». И видели, что в разных браузерах поддерживается разный набор кодеков. А FlashPlayer, хоть и поддерживает MP3 всегда, но работает не во всех браузерах. Например, он часто отсутствует в мобильных браузерах (на телефонах/планшетах).

В этом бонусе мы подробнее разберёмся с обоими методами воспроизведения звука, а также с их объединением. Познакомимся с плеерами и способами их добавления.

HTML5 audio

Самый простой способ добавить плеер — вставить на страницу тэг <audio> и указать в нём наш сервер в качестве источника звука. Выглядеть это может примерно так:

<audio controls preload="none">
    <source src="http://сервер:порт/имя" />
    <source src="http://сервер:порт/имя.m3u" />
</audio>

Этот код добавит на сайт стандартный аудио-плеер браузера. Атрибут controls говорит о необходимости показать элементы управления. А preload со значением none запрещает предварительную подгрузку, которая для вещания не полезна (вызывает задержку).

Далее в тэгах <source> (источник) заданы потоки. Уже тут видно необходимость подстраиваться под браузеры: некоторые поддерживают воспроизведение без указания .m3u, другим оно нужно. Браузер выберет один из источников. Первый, который сможет воспроизвести.

Такой плеер работает даже на мобильных браузерах. Но некоторые компьютерные браузеры не смогут воспроизвести mp3 файлы.

Информация

Внешний вид такого плеера можно менять с помощью HTML и CSS. А управлять им и менять поведение можно с помощью JavaScript.

Flash

Флэш-плеер воспроизводит MP3 без проблем во всех браузерах, где может запуститься. Но простым универсальным кодом его не вставить. Нужен именно mp3-плеер в SWF-формате (программа на flash). Таких плееров есть и их довольно много. Просто поищите в google/yandex/... flash mp3 player или mp3 плеер для сайта.

Большинство найденных плееров подойдут для вещания. (А найдётся их много, на любой вкус и цвет)

Для добавления плеера на сайт, в комнату вещания, есть несколько способов.

  1. Вставка плеера с внешнего сайта. Генераторы плееров
  2. Сервисы
  3. Загрузка swf к себе на сайт

C внешнего сайта, генераторы

Некоторые плееры можно подключить просто вставив HTML код на страницу комнаты вещания. Именно так мы подключали плеер, описанный в мини-книге. В самом коде вместо адреса MP3 файла следует задать адрес и порт сервера вещания, а также имя точки подключения. То есть путь к потоку. При этом расширение .m3u не указывается.

Плееры, которые можно подключить прямо с внешнего сайта, зачастую предлагают генераторы кода. В таком генераторе вы заполняете несколько полей, например, адрес MP3, указываете настройки оформления и поведения плеера. Иногда есть возможность выбрать тему оформления (стиль, скин). И в результате вы получаете HTML-код для вставки на свой сайт.

Вот несколько подобных плееров:

Несмотря на свою простоту, это не самый лучший способ добавления плеера по несколким причинам:

  1. Код, находящийся на стороннем сайте может измениться в любой момент. Например, сайт плеера могут взломать и заменить код на вредоносный.
  2. Сайт с плеером может просто закрыться. Или владелец может удалить swf-файл плеера.
  3. Авторы плеера платят за трафик, который генерируют ваши слушатели, когда скачивают swf со стороннего сайта. А проекты эти обычно некоммерческие.

Сервисы

Последний плеер из списка прошлого раздела превратился в сервис Uppod. Сервис на русском языке, позволяет бесплатно создавать разные плееры (и видео, и звуковые) для сайта. Есть и платные услуги, а также тех.поддержка.

Для создания плеера нужно зарегистрироваться. И сам процесс создания мне показался довольно запутанным. Но есть инструкции на русском языке.

Сервис довольно известный. В основоном он заточен на видеоплееры и плееры с плейлистами. Но может вам понравится.

Загрузка swf к себе на сайт

Чтобы не зависеть от сторонних сайтов/сервисов, MP3-плеер на flash можно разместить у себя на сайте. Для этого как правило достаточного простого сайта, поддержка PHP и других серверных технологий не нужна.

Установка плеера заключается в загрузке (upload) его файлов в какую-либо папку на сайте. И вставки на страницу HTML-кода, очень похожего на код генераторов. Единственное отличие в том, что адрес к swf-файлу (flash программе) будет локальный, а не внешний. То есть swf-файл плеера будет находиться на вашем сайте.

Кстати, для таких плееров тоже встречаются генераторы. И все плееры, описыанные выше, можно разместить на своём, а не на внешнем сайте.

Для этого найдите на сайте плеера кнопку скачать (Download). Обычно скачивается zip-архив. Его следует распаковать и поместить содержимое на сайт. После этого осанется добавить HTML-код на страницу, правильно указав путь к swf. На сайте плеера и в самом архиве обычно есть подробная инструкция по установке.

Видео установки добавлю позже, если кому надо. Пишите.

В дополнение к перечисленным плеерам добавлю ещё несколько, которые можно установить только на сайт:

  1. Dewplayer (есть генератор)

  2. WordPress Audio Player (Standalone version)

CMS

Как видите, второй плеер изначально был сделан для WordPress, а потом появилась и независимая (Standalone) версия. Для WordPress, Joomla, Drupal и других движков сайтов также существуют и другие расширения MP3-плееры. Если у вас сайт на базе одного из таких движков, можете поискать плеер среди плагинов-дополнений. Установка в таком случае ещё проще.

Все вышеперечисленные плееры бесплатные. Кроме них есть ещё куча платных.

SWFObject

SWFObject. Техническая штука. Возможно расскажу позже.

Особенности flash

В старых версиях MP3-декодер во flash плеере имел некоторые ограничения. Он поддерживал только три частоты дискретизации звукового потока:

  • 11025 Hz
  • 22050 Hz
  • 44100 Hz

Поэтому для совместимости используйте одну из них.

В новой версии вроде бы также работает 48000 Hz, возможно починили и другие.

Вторая особенность — не поддерживается формат MP3Pro. В программах вещания я его не встречал. Но на всякий случай, предупреждаю.

И ещё одна особенность, уже не flash, а именно большинства (старых) MP3 плееров на нём. Плееры не всегда как следует реагируют на переключение потока. Например, при переходе на «запасную точку подключения».

Информация

Дело в том, что для потокового аудио (как вещание) следует немного иначе делать плеер, а разработчики это не учитывают. Подробности для разработчиков на сайте Adobe.

Для большинства вещаний это не имеет значения. Но если вы используете «запасные точки», помогут продвинутые flash-плееры.

Продвинутые плееры на flash

Эти плееры отличаются от простых:

  • Часто умеют переподключаться при обрыве связи.
  • Часто умеют обрабатывать переходы на «запасные точки», в т.ч. и смену характеристик mp3.
  • Иногда поддерживают другие форматы, такие как Ogg Vorbis и AAC.

Вот пара таких плееров:

 Muses Radio PlayerWimpy Button*
Цена Бесплатный $29
Переподключение Да Да
MP3 Да Да
Ogg Vorbis Да Нет
AAC Да Да
Скины Да Да
Генератор Есть Есть
Тех.поддержка Нет Есть

* Есть также несколько других плееров Wimpy

Для кодеков, отличных от MP3 может понадобится добавление файла crossdomain.xml на вебсервер айскаста. Нужно сделать так, чтобы файл был доступен по адресу http://вашсервер:порт/crossdomain.xml. То есть достаточно просто положить файл в папку файл-сервера айскаста, как описано в уроке «Запись вещания» в разделе про раздачу записи.

Файл может иметь такое содержимое:

<cross-domain-policy>
    <allow-access-from domain="*" />
</cross-domain-policy>

В атрибуте domain лучше настраивать именно тот адрес, где будет расположен плеер. Обычно это сайт, где находится ваша комната вещания (без указания порта и пути). Значение * разрешает доступ с любого сайта.

Объединённые flash-HTML5 плееры

jPlayer — бесплатный HTML5 плеер, с поддержкой flash. То есть он содержит оба плеера и поэтому работает в большинстве браузеров. Там где не сработал HTML5 используется flash.

Плеер подходит для вещаний. Он настраивается как угодно, полностью может управляться скриптами. Но настройка его сложная. Как настраивать для вещаний указано на демо-странице. Но придётся также прочитать и общую документацию.

Видео установки, настройки добавлю позже, если кому надо. Пишите.

Дополнительные возможности

  • как брать заголовки проигрываемой музыки