Главная » Полезные статьи » HTML-верстка » Нативное аудио в браузере
Распечатать статью

Нативное аудио в браузере

Эта статья была обновлена 14 октября 2010, чтоб отобразить изменения в спецификации.

До недавнего времени возможность воспроизведения любого вида аудио в браузере включала использование Adobe Flash или других плагинов. Несмотря на то, что Flash-плейер от Adobe по праву считается наиболее популярным, большинство разработчиков и дизайнеров согласятся, что лучше вообще не зависеть от плагинов.

HTML5-элемент <audio>

Одно из самых волнующих и долгожданных свойств HTML5 – элемент <audio>, позволяющий нативно воспроизводить аудио в браузере. Мы уже можем ощутить преимущества его использования, так как практически все основные браузеры поддерживают его – на данный момент Firefox, Chrome, Safari и Opera, а скоро к ним присоединится и Internet Explorer 9, который сейчас на этапе беты (прим. пер.: уже давно релиз). В браузерах, которые не поддерживают <audio> нативно, мы легко можем использовать Flash.

 

Согласно спецификации

На сегодняшний день в спецификации есть определения пяти атрибутов для элемента <audio>:

  1. src — валидный URL, указывающий источник контента
  2. autoplay — булевый атрибут, указывающий, должен ли файл воспроизводиться сразу же
  3. loop — булевый атрибут, указывающий, должен ли файл воспроизводиться повторно
  4. controls — булевый атрибут, указывающий, должен ли браузер отображать свои стандартные медиа-контролы
  5. preload none / metadata / auto — где metadata значит, что нужно предварительно загрузить только метаданные, а auto оставляет решение, загружать ли весь файл, за браузером.

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

Кстати, это те же атрибуты, что и для элемента <video>.

Примеры

Давайте возьмем пару этих атрибутов и создадим простой пример, который будет воспроизводить аудиофайл:

<audio src="elvis.ogg" controls preload="auto" autobuffer></audio>

(Этот пример будет работать в последних версиях Firefox, Chrome и Opera. Чтоб он заработал в Safari, вам нужно заменить OGG-файл на MP3)

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

Поддержка кодеков в современных браузерах
Браузер Ogg MP3 WAV
FireFox 3.6+
Safari 5+
Chrome 6
Opera 10.5+
Internet Explorer 9 (beta)

 

Чтобы создать собственные контролы, мы можем воспользоваться API-методами, описанными в спецификации:

  • play ( ) – воспроизводит аудио
  • pause ( ) — приостанавливает аудио
  • canPlayType ( ) – запрашивает, чтоб браузер определил, может ли воспроизводиться данный mime-тип
  • buffered ( ) – атрибут, который указывает время начала и конца буферизированной части файла

Используйте <source>

Наилучший способ заставить браузер воспроизводить аудио (или видео, если на то пошло) – это использовать элемент <source>. Браузер будет пытаться загрузить первый источник аудио, а если у него не получится или если он не поддерживает, браузер перейдет к следующему источнику аудио. Помимо этого, мы легко можем установить Flash-плейер, если больше ничего не помогает:

<audio controls preload="auto" autobuffer>
  <source="elvis.mp3" />
  <source="elvis.ogg" />
  <!-- а теперь flash-вариант -->
</audio>

Однако, предупреждаем: обращайте внимание на порядок элементов <source>. На момент написания, сообщались проблемы с Mobile Safari и ранними версиями Firefox.

Кросс-браузерная реализация

Когда мы создавали jPlayer, аудио-плагин для jQuery, мы пытались побороть некоторые ограничения большинства аудио-плейеров на основе Flash. Многие используют Flash для разработки графического интерфейса плейера, эффективно изолируя его от процесса веб-дизайна.

Первоначальный jPlayer использовал Flash непосредственно для воспроизведения аудио, при этом стиль можно было задавать при помощи HTML и CSS. С увеличением поддержки HTML5 современными браузерами мы решили избавиться от Flash-зависимости и использовать нативное аудио в тех случаях, когда оно поддерживается.

Самой значимой проблемой является кросс-браузерная реализация, так как отсутствие общепринятого браузерами аудиоформата вызывает сложности. Если разработчики хотят в полной мере использовать преимущества всех браузеров, которые поддерживают HTML5 <audio>, им будет необходимо создавать обе версии аудиофайла, который они хотят воспроизводить – MP3 и Ogg (а также WAV в случае с Opera).

Так как HTML5-стандарт все еще находится в процессе разработки (прим. пер.: текущее состояние спецификации – ready for first implementations), несколько аспектов элемента <audio> отличаются от браузера к браузеру. Например, судя по всему, не существует способа определить прогресс загрузки аудиофайла во всех браузерах, потому что это предполагает использование DOM-атрибута buffered. Chrome поддерживает buffered, в Safari он есть, но ведет себя несколько иначе, а текущие версии Opera и Firefox его не поддерживают (хотя поддерживает Firefox 4 beta).

Хоть эти несоответствия и не являются накладками, с целью эффективной конкуренции с решениями, основанными на плагинах, имплементация HTML5 <audio> должна быть последовательной во всех браузерах и соответствовать текущим требованиям в будущем.

JavaScript-решения

Если мы стремимся получить преимущества от способностей каждого браузера воспроизводить аудио, нам нужно создать разные решения для разных браузеров. Мы можем определять браузер пользователя, но учитывая стремительное развитие информационных технологий, лучше выяснить, какие возможности поддерживает конкретный браузер, и приспособиться соответственно.

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

Используя JavaScript, вы можете проверить, поддерживается ли тег <audio>:

// возвращает булевский атрибут
var
 audioTagSupport =
!!(document.createElement('audio').canPlayType);

или проверить совместимость с типом файла:

// Нужно сначала проверить canPlayType или исключение
  // будет выброшен для тех браузеров, которые его не поддерживают

  var myAudio = document.createElement('audio');

  if (myAudio.canPlayType) {

    // На данный момент canPlayType(type) возвращает: "", "maybe" или "probably"

    var canPlayMp3 = !!myAudio.canPlayType && "" !=myAudio.canPlayType('audio/mpeg');
    var canPlayOgg = !!myAudio.canPlayType && "" !=myAudio.canPlayType('audio/ogg; codecs="vorbis"');
  }

Учтите, что для того чтобы изменить атрибут src объекта audio или элемента вам необходимо пересоздать этот объект или элемент с новым значением атрибута src или изменить URL атрибута src и выполнить команду myAudio.load.

Таким образом, для создания решения, которое полностью использует преимущества HTML5 аудио, вам, как правило, необходимо:

  1. проверить поддерживается ли HTML5 <audio> и, если нет, использовать Flash,
  2. проверить уровень поддержки HTML5 <audio> и адаптировать свой код соответственно для каждого браузера,
  3. проверить, какие типы файлов поддерживаются, и привязать необходимые форматы файлов.

Предстоящий путь

Несмотря на то, что HTML5 аудио – это относительно сырой компонент стандарта, если будут развиваться текущие тенденции и пользователи будут использовать последние версии Safari, Firefox, Chrome и Opera, поддержка браузеров может достичь 30%. Это значительная доля рынка браузеров, которым впредь не нужно будет зависеть от Adobe Flash, Microsoft Silverlight или других плагинов для поддержки аудио. Добавьте к этому факт, что Internet Explorer 9 поддерживает HTML5 <audio>, и мы в скором времени увидим, что большинство установленных браузеров также станут поддерживать его.

И когда мобильные и другие малогабаритные устройства, такие как планшеты, начнут поддерживать HTML5 аудио, вы убедитесь, какой важной становится нативная поддержка аудио.

Источник:  css-live.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи