HTML5 для аудио приложений

Оригинал: HTML5 for Audio Applications
Автор: Paul Freitas
Дата публикации: май 2012 г.
Перевод: Семененко В.
Дата перевода: октябрь 2012 г.

Стандарт HTML5 позволяет проигрывать музыку в соответствующих браузерах - для этого не требуется каких-либо облачных технологий.

Аудиоплеер HTML5

В последнее время музыкальные сервисы, основанные на облачных технологиях, самыми крупными из которых являются Amazon, Google и Apple, привлекли внимание прессы. Они позволяют хранить музыку на корпоративных серверах и получать доступ к ней в любое время с любого устройства, подключенного к Интернет. Легко оценить привлекательность подобных служб. Это одна из возможностей, которые предоставляет Интернет.

Если вы читаете эту статью, то возможно вы являетесь пользователем операционной системы Linux. И как часто это бывает, поддержка Linux игнорируется тремя вышеназванными корпорациями. Например, сервисы Apple основаны на проприетарных приложениях под iTunes, у которых нет аналогов для Linux. Другие программные продукты имеют Web-интерфейс, но загрузка в таких приложениях работает только как проприетарное программное обеспечение, недоступное для пользователей Linux. Но ведь не все хотят пользоваться коммерческим программным обеспечением вообще? Насколько я знаю, поддержка различных типов файлов во всех корпоративных продуктах ограничена. Большинство моей музыкальной коллекции хранится в файлах Ogg Vorbis, и ни одна из компаний большой тройки не поддерживает такой формат, несмотря на отсутствие каких-либо патентов на него. Кроме того, предоставляемые корпорациями услуги требуют определенной платы (которая складывается из расходов на Интернет-хостинг и многих других составляющих), что также выглядит непривлекательно для обычных пользователей.

"Облачные" музыкальные сервисы помимо этого имеют несколько других негативных сторон. Все они предназначены для персонального использования. А что, если вы захотите предоставить доступ к своей музыке другим пользователям? (Конечно, я говорю только о распространении легальной музыки. Это относится к файлам, созданным под свободными лицензиями типа Creative Common. Или же о музыкальных альбомах, созданный в звукозаписывающих студиях при поддержке таких лицензионных агентств, как Harry Fox Agency, за которые вносится соответствующий авторский гонорар). Облачные сервисы не смогут вам помочь в этом. Еще одним моментом является факт, что передача музыки на такие сервисы происходит односторонне. Вы можете прослушивать музыкальные коллекции, которые были размещены на серверах, но если что-либо случиться с их копиями на вашем домашнем компьютере, у вас не получится просто так скачать их обратно, на локальную машину. А что, если вы захотите использовать другое решение для хранения данных, наподобие собственного (и должным образом защищенного) web-сервера? Или как быть, если вы живете не в Соединенных Штатах, а где-нибудь в другой стране, откуда недоступны большинство подобных сервисов?

Проигрывание музыки в браузере

Поддержка аудиофайлов различных типов в браузерах, вне зависимости от операционной системы, достаточно развита. Все они могут воспроизводить различные типы файлов, однако есть и некоторые интересные моменты. Одним из самых заметных среди которых является отсутствие поддержки файлов mp3 в браузерах Firefox/Iceweasel, связанное с лицензией на этот аудиоформат. Для пользователей Linux с этим нет больших проблем, так как эти браузеры поддерживают свободную от ограничений лицензию Ogg Vorbis. Браузер Google Chrome и даже Safari от Apple могут проигрывать файлы Ogg Vorbis с помощью плагина Xiph's QuickTime (см. раздел "Источники").

Давайте попробуем проиграть музыку в браузере. Представим, что у нас имеется файл в формате Ogg Vorbis с именем test.ogg, расположенный в директории /home/me/music/. Его можно открыть под Linux, например в Chrome или Firefox, введя в адресную строку путь file:///home/me/music/test.ogg. Браузер должен загрузить файл и начать его проигрывать. При этом в окне программы отобразится плеер, как изображено на рисунке ниже:

Аудиоплеер браузера Google Chrome

Рис.1 Аудиоплеер браузера Google Chrome с панелью управления

Разные браузеры отображают панель управления плеера по-разному, но у всех присутствует одинаковый набор элементов на этой панели: кнопка старт/стоп, ползунок позиционирования, индикатор текущего положения проигрываемого трека и управление громкостью. Заметьте, сколько возможностей дополнительно предлагает вам браузер - никаких! Если необходимо проиграть один файл за один раз и для вас не имеет значения, что при этом отображается в окне браузера, вы можете на этом и закончить чтение данной статьи.

Большинство пользователей Интернет обращают внимание на то, как выглядит аудиоплеер в браузере. Поэтому тот небогатый набор элементов управления, который предлагает браузер по умолчанию, не удовлетворяет большинство из них. К счастью, вы можете вставить аудиоплеер в любую HTML-страницу. Во многом это очень похоже на то, как вы встраиваете изображение. Но вместо использования элемента img, в этом случае необходимо использовать элемент audio. Синтаксис у обоих элементов схожий, поэтому это еще больше упрощает задачу. Например, чтобы загрузить и проиграть музыкальный файл test.ogg в пустой HTML-странице, ее код должен быть таким:

При этом набор элементов управления подобного аудиоплеера будет стандартным. Обратите внимание, что стандарт HTML5 значительно упрощает синтаксис кода, в частности - корневого элемента html. Надпись "Get an HTML5 browser!" появится только в том случае, если страница загружена в браузере, не поддерживающим стандарт HTML5. Все остальные пользователи увидят в окне браузера аудиоплеер наподобие того, что изображен на рис.1, благодаря тому, что элемент audio применен совместно со своим атрибутом controls, который предписывает браузеру отобразить элементы управления плеером. По умолчанию, элемент audio используется без подобных элементов управления. (Стандарт HTML5 позволяет задавать атрибуты без указания значения для них. Если вы предпочитаете синтаксис, более похожий на XML, вы можете указать в качестве параметра атрибута его собственное имя, например, так - controls="controls").

Элемент audio позволяет легко изменять свой синтаксис для применения в различных целях. Например, если необходимо, что музыкальный клип проигрывался в качестве фона без каких-либо видимых элементов, можно опустить атрибут controls в коде:

<audio src="test.ogg" autoplay>Get an HTML5 browser!</audio>

Для автоматического возобновления проигрывания аудио-файла после его завершения, к элементу audio необходимо добавить атрибут loop:

<audio src="test.ogg" autoplay loop>Get an HTML5 browser!</audio>

Как я уже упоминал ранее, различные браузеры поддерживают разные форматы файлов, но ни один из них не может похвастаться поддержкой всех типов. К примеру, формат Ogg Vorbis поддерживается браузерами Chrome, Firefox и Safari (с помощью расширения Xiph), но другим браузерам требуется нечто другое, наподобие формата mp3. На момент написания статьи дело обстоит таким образом, что все браузеры поддерживают тот или иной формат, но не все необходимые форматы сразу. Что можно сделать, чтобы решить эту проблему?

В стандарте HTML5 имеется элемент source, который по своему назначению заменяет атрибут src элемента audio. В HTML коде он вставляется внутрь элемента audio. Но в отличие от атрибута src, элемент source может использоваться неоднократно. Браузер поочередно проверяет каждый файл, указанный в элементе source, начиная с первой записи. Тот формат аудио-файла, который поддерживается браузером, будет загружен и воспроизведен. Давайте рассмотрим видоизмененный код, на этот раз с использованием элемента source:

Сперва браузер попытается прочитать и воспроизвести файл с именем test.ogg. Если по каким-то причинам браузеру не удалось это сделать (файл не был найден, данный тип файла не поддерживается и т. д.), то он просто переходит на строку ниже и пытается выполнить те же действия, но с файлом test.mp3. Вы можете применять столько элементов source, сколько вам может потребоваться, но на практике обычно достаточно двух тегов source.

Добавление пользовательского интерфейса

Все вышеприведенные примеры являются полностью работоспособными и могут применяться на практике. Однако, большинство web-разработчиков предпочитают использовать несколько другой интерфейс, нежели тот, который представлен в данных примерах. Если в трех различных браузерах пользовательский интерфейс (UI) плеера отображается каждый раз по разному, это пагубно сказывается на юзабилити Интернет-страницы. Профессионально сделанный web-сайт должен и выглядеть профессионально. К счастью, элемент audio поддерживает JavaScript API, что позволяет контролировать плеер в реальном времени. Чтобы получить тот интерфейс плеера, который необходим, достаточно написать его, используя стандартные средства HTML, а затем установить обработчики событий для доступа к нему, применив JavaScript API.

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

После загрузки страницы нажмите кнопку "Старт" (Play) для воспроизведения файла test.ogg в циклическом режиме. Когда пользователь нажимает на кнопку, браузер вызывает объектную функцию play() аудиоплеера для запуска проигрывания трека. При этом наименование кнопки изменяется на "Пауза" (Pause). Когда будет снова нажата таже самая кнопка, будет вызвана объектная функция pause() для приостановки проигрывания аудио.

Для аудио-плеера существует множество атрибутов и методов. Можно изменить время проигрывания аудиофайлов в плеере, задав значение для свойства currentTime. Громкость звучания изменяется с помощью атрибута volume. Помимо этого, существует еще множество других свойств и атрибутов, но не все они поддерживаются большинством браузеров на данный момент. Для более подробной информации обратитесь к спецификации W3C HTML5, ссылка на которую приведена в разделе "Источники" данной статьи, а также к документации по предпочитаемому вами браузеру.

Playlist HTML5 Audio Player

Дочитав статью до данного места, вы познакомились с основами создания аудиоплеера в HTML5. Но вам могут понадобиться более сложные примеры. К сожалению, статьи в журнале имеют ограничение по размеру и HTML-код имеет свойство занимать достаточно много места в них. Вместо этого я бы посоветовал вам обратиться к написанному мною open-source проекту, который называется Playlist HTML5 Audio Player, ссылка на который представлена в разделе "Источники". В этой статье же я опишу только основы этого проекта.

Преимуществом Playlist HTML5 Audio Player является пользовательский интерфейс, в котором отображаются все проигрываемые на данный момент файлы в заданном порядке. В этом смысле такой список похож на аудиоальбом с записанной музыкой. Все, что нужно для использования подобного интерфейса - это коллекция аудиофайлов и текстовый файл, называемый плейлист (playlist). В этом файле перечислены аудиофайлы по порядку. Если доступна обложка альбома, то она будет отображена в списке воспроизведения. Playlist HTML5 Audio Player также может вывести на вкладку About дополнительную информацию о коллекции музыки. Ни одна из двух вышеназванных возможностей не является необходимой. На рис.2 изображен Playlist HTML5 Audio Player, воспроизводящий образцы свободно распространяемой музыки:

Playlist HTML5 Audio Player

Рис.2 Playlist HTML5 Audio Player, воспроизводящий образцы свободно распространяемой музыки

Приложение Playlist HTML5 Audio Player поддерживает все основные функции управления, имеющиеся в обычном CD-проигрывателе автомобиля, включая кнопку "Смешивание" (Shuffle). Воспроизведение музыки внутри выбранного плейлиста производится по кругу до тех пор, пока вы сами не остановите его. Элементы управления и вкладки созданы с помощью библиотеки jQuery, поэтому можно легко изменить их внешний вид благодаря инструменту Themeroller, входящему в состав данной библиотеки. Благодаря возможности табличной организации и пересоздания списка, можно переопределять порядок вкладок в Playlist таким образом, какой вам нравитёся, причем во время проигрывания музыки. Например, в Wikipedia говорится, что песня "Ее Величество" (Her Majesty) группы Beatle's первоначально появилась в альбоме "Abbey Road" между песнями "Mean Mr. Mustard" и "Polythene Pam". В Playlist можно перетащить ее из конца альбома и поместить между двумя другими треками, чтобы услышать, как она звучит. Playlist является исключительно клиентским приложением, поэтому в следующий раз, когда вы загрузите страницу "Abbey Road", песня "Her Majesty" снова окажется в самом конце альбома.

С помощью приложения Playlist HTML5 можно прослушивать музыкальные коллекции, расположенные на локальном компьютере, используя для этого локальный сервер. Если же необходимо полноценное "облачное" решение, можно воспользоваться собственным web-сайтом, размещенном на хостинге, поддерживающим необходимые службы. Для этого не потребуются какие-либо специальные серверные решения, типа PHP или MySQL, так как в Playlist HTML5 не содержится ни одной строчки серверного кода. Вы можете получить доступ к музыкальной коллекции, расположенной как локально, так и удаленно, с помощью HTML5-совместимого браузера, поддерживающего предпочитаемый вами формат аудиофайлов. Я использую приложение Playlist для прослушивания собственной музыки и для меня оно работает также хорошо или даже лучше, как и популярные плеера под Linux, такие как Phythmbox, Exaile и Amarok.

Плеер Playlist также может быть полезен для коммерческих приложений. Оркестры, музыканты и авторы песен часто хотят распространять записанные ими альбомы, как часть общей рекламной компании своих произведений. Если музыкальные записи являются оригинальными, приложение Playlist может проигрывать их беспрепятственно. Но если песни являются перезаписью других авторов, то необходимо приобрести соответствующие лицензии для их прослушивания, такие как технические лицензии для распространения на территории США от агентства Harry Fox. Получение подобной лицензии может быть частью стратегии самого web-сервера, что не мешает при этом использовать плеер Playlist HTML5 с графическим интерфейсом (UI).

Установка плеера Playlist предельно проста. В наиболее общем виде, Playlist HTML5 Audio Player состоит из набора обычных web-файлов, включая файл Playlist.html (файл формата HTML5), Playlist.js (файл формата JavaScript) и ряда вспомогательных файлов, таких как изображения и элементы тем jQuery. Все эти файлы располагаются в директории jsapps (сокращение от JavaScript Applications). Поместите данную директорию на web-сервер в место, где можно получить быстрый доступ к ней. Содержимое, которое будет проигрываться (естественно, такое содержимое должно находится в другом месте и отделено от плеера) по логическим соображениям располагается в специально предназначенном для этого месте, например в папке с именем music, находящейся на одном уровне с директорией jsapps.

Когда аудиофайлы размещены в нужном месте, потребуется текстовый файл с именем Playlist.m3u в той же самой директории, что и музыка. В нем в виде списка перечислены все музыкальные файлы, которые будут воспроизводиться. Например, если у вас есть два трека с именами Track1.ogg и Track2.ogg, то такой файл будет выглядеть таким образом:

Для быстрого и удобного создания файла Playlist.m3u можно воспользоваться утилитой командной строки наподобие ls или программой с графическим интерфейсом (GUI) Audio Tag Tool.

И наконец, требуется еще один файл, который перенаправляет браузер на файл Playlist.html, расположенный в директории jsapps. Такой файл можно использовать с параметрами, соответствующими файлу Playlist. На ваш выбор, один такой файл с именем redirect.html, написанный на JavaScript, находится в папке jsapps/playlist. Скопируйте или создайте на него ссылку в директорию, где располагается музыкальная коллекция, поместив рядом с файлом Playlist.m3u. Я часто даю этому файлу имя index.html. Если хотите, добавьте в эту папку обложку (файл Cover.jpg) и дополнительную информацию, отформатированную в HTML-стандарте (файл About.xml). Если у вас все прошло без ошибок, то вы справились с задачей. Откройте файл redirect.html в браузере и посмотрите, что произойдет.

Я установил плеер Playlist на своей собственном web-сайте, поэтому вы легко можете опробовать его в работе (см. раздел "Источники"). Для того, чтобы попробовать Playlist на своей собственной машине, скачайте приложение со страницы домашнего проекта, расположенного на SourceForge (см. раздел "Источники"). Я упаковал его внутрь одной из версий Jetty, созданного на Java web-сервера, который может запускаться на любой платформе с установленным на ней Java Runtime Environment. Я добавил Jetty в виде бонуса, но вы можете не пользоваться им, если хотите. Вы можете скачать исходный код со страницы проекта с помощью Git или же получить полный комплект вместе с Jetty и скопировать музыку и директорию jsapps вне директории Jetty webapps в предназначенное для этого место на вашем собственном web-сервере. Запускается сервер Jetty с помощью скрипта start.sh (или же файла start.bat под Windows). После того, как сервер запуститься, откройте в браузере порт 8080 (например, введя такой адрес http://localhost:8080/music). Во всех приведенных примерах использовались свободно распространяемые образцы музыки с целью продемонстрировать возможности плеера Playlist.

Заключение (и Предостережение)

Стандарт HTML5 является мощным инструментом для прослушивания аудио через Интернет. Настолько же мощным, как любые "облачные" сервисы, но еще более гибким и разносторонним. Создание web-страниц с поддержкой аудио в HTML5 представляет из себя очень простое дело. Если написание HTML-кода вас не интересует и вы ищете готовое решение, то можете воспользоваться моим open-source плеером Playlist HTML5 Audio Player.

Теперь я хочу предупредить вас. Обратной стороной больших возможностей стандарта HTML5 является не меньшая ответственность, которая касается в первую очередь вас и только вас. Все мы слышали о судебных процессах и арестах, связанных с нарушениями авторских прав и распространением файлов. Вам не следует идти тем же путем.

Для того, чтобы обезопасить самого себя, используете HTML5 обдуманно и осторожно. Не размещайте музыку, не предназначенную для свободного распространения в тех местах вашего web-сервера, где она будет доступна для всеобщего доступа или же для роботов поисковых машин. Файерволы, сертификаты SSL, должным образом настроенные файлы сервера (это касается файлов сервера Apache htaccess и norobots.txt), система идентификации пользователя и другие стратегии защиты позволят вам наслаждаться собственной музыкой везде, оставляя при этом ее исключительно вашей собственной коллекцией. Если вы распространяете музыку легально, удостоверьтесь в том, что вы обладаете всеми соответствующими правами и лицензиями, оригиналами и тому подобное.

Источники

Общие вопросы по HTML5: http://www.w3.org/TR/html5

Подробный обзор элемента audio стандарта HTML5: http://www.w3.org/TR/html5/the-iframe-element.html#the-audio-element

Компонент QuickTime Xiph.org: http://www.xiph.org/quicktime

Приложение Playlist HTML5 Audio Palyer: https://sourceforge.net/projects/playlistplayer

Библиотека jQuery: http://jquery.com

Экземпляр приложения Playlist, работающего на моем собственном сайте и проигрывающем музыку со свободной лицензией:
http://paulfreitas.com/jsapps/playlist/Playlist.html?/music/Brad%20Sucks/I%20Don't%20Know%20What%20I'm%20Doing/Playlist.m3u

Web-сайт агентства Harry Fox (для приобретения альбомной музыки): http://www.harryfox.com

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100