HTML5 для веб-дизайнеров

Джереми Кит

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

loop

, позволит вам совершить этот низкий поступок:

<audio src="witchitalineman.mp3" autoplay loop>

</audio>

Использование атрибута

loop

вместе с атрибутом

autoplay

заставит меня искать вас с удвоенной энергией.

Вырваться из-под контроля

Элемент

audio

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

только для злых, но и для благих целей. Дать пользователю контроль над управлением проигрывания аудиофайла – здравая идея, которую легко осуществить с помощью булева атрибута

controls

:

<audio src="witchitalineman.mp3" controls>

</audio>

Присутствие атрибута

controls

заставляет браузер отобразить встроенные элементы управления того, чтобы проигрывать аудиофайл и ставить его на паузу – и для того, чтобы настраивать громкость (рис. 3.05).

^{Рис. 3.05. Используйте атрибут controls, для того чтобы отобразить элементы управления «проиграть», «пауза» и управления громкостью}

Если вам не нравятся встроенные в браузер элементы управления, можете создать свои собственные. С помощью JavaScript вы можете взаимодействовать с

Audio

API, которое дает вам доступ к методам (

play

и

pause

) и свойствам (

volume

и др.). Вот быстрый и простой пример, как использовать элементы

button

и ужасные обработчики событий, написанные прямо в коде страницы (рис. 3.06):

<audio id="player" src="witchitalineman.mp3">

</audio>

<div>

<button

onclick="document.getElementById(‘player’). play">

Проиграть

</button>

<button

onclick="document.getElementById(‘player’). pause">

Пауза

</button>

<button

onclick="document.getElementById(‘player’). volume

+= 0.1">

Громче

</button>

<button

onclick="document.getElementById(‘player’). volume

– = 0.1">

Тише

</button>

</div>

^{Рис. 3.06. Элементы управления (Проиграть, Пауза, Громче, Тише), сделанные с помощью элементов button}

Буферизация

В какой-то момент спецификация HTML5 включала еще один булев атрибут для элемента

audio

. Атрибут

autobuffer

был более вежливым и продуманным вариантом неприятного атрибута

autoplay

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

Это был бы полезный атрибут, но, к сожалению, Safari сделал лишний шаг вперед.

Этот браузер начал подгружать аудиофайлы вне зависимости от того, присутствует атрибут

autobuffer

или нет. Не забывайте, что из-за того, что

autobuffer

– булева переменная, не было никакого способа сказать Safari, что подгружать аудиофайл не нужно:

autobuffer="false"

– то же самое,

что autobuffer="true"

или любое другое значение [9] .

9

Полная ссылка: https://bugs.webkit.org/show_bug.cgi?id=25267

В данный момент атрибут

autobuffer

заменен атрибутом

preload

. Это не булев атрибут. Он принимает одно из трех возможных значений:

none

,

auto

и

metadata

. Написав

preload="none"

, вы можете явным образом указать браузеру, что подгружать аудиофайл заранее не нужно:

<audio src="witchitalineman.mp3" controls preload="none">

</audio>

Если у вас на странице только один элемент audio, возможно, стоит использовать

preload="auto"

, но чем больше элементов audio появляется, тем больше интернет-канал посетителей вашей странички будет загружен из-за излишней предварительной подгрузки.

Его вам сразу включат, а может быть, включ'aт

Элемент

audio

выглядит практически идеальным. Где-то должен быть подвох, правда? Он есть.

Проблемы с элементом

audio

не в спецификации. Главная проблема – с форматами аудиофайлов.

Хотя формат MP3 и распространен повсеместно, это не открытый формат. Из-за того, что на этот формат навешано множество патентов, нельзя написать декодер MP3, не заплатив отчислений по патенту. У корпораций вроде Apple или Adobe с этим нет проблем, но для маленьких компаний или опенсорс-групп это не так просто. Поэтому Safari будет с удовольствием проигрывать MP3-файлы, a Firefox – нет.

На свете есть и другие аудиоформаты. Кодек Vorbis – обычно для него используется файл с расширением

.ogg

– никакими патентами не обременен. Firefox поддерживает Ogg Vorbis, а Safari – нет.

К счастью, есть способ использовать элемент

audio

, не делая при этом «выбор Софи» [10] между форматами файлов. Вместо того чтобы использовать атрибут

src

в открывающем теге

<audio>

, можно указать несколько форматов файлов с помощью элемента source:

10

В фильме «Выбор Софи» (Sophie’s Choice, 1982 год) главная героиня (Мэрил Стрип, получившая за эту роль «Оскар»), мать двоих детей, во время Второй мировой войны должна сделать выбор, кто из ее детей останется жить, а кто отправится в газовую камеру (если она откажется сделать выбор – погибнут оба). Прим. пер.

<audio controls>

<source src="witchitalineman.ogg">

<source src="witchitalineman.mp3">

</audio>

Браузер, который может проигрывать файлы Ogg Vorbis, не станет смотреть дальше первого элемента

source

. Браузер, который может проигрывать файлы MP3, но не может Ogg Vorbis, пропустит первый элемент

source

и проиграет файл во втором элементе

source

.