Теперь на ринг, чтобы сразиться с действующим чемпионом, входит HTML5.
Встроить аудиофайл в HTML5-документ очень просто:
<audio src="witchitalineman.mp3">
</audio>
Наверное, это даже слишком просто. Наверняка вы хотите несколько более конкретно указать, что должен делать элемент
audio
.
Предположим, что живет на свете злой урод, который ненавидит веб и всех пользователей Интернета. Этому господину наверняка плевать, что встраивать на страницу аудиофайл, который начинает проигрываться автоматически, невероятно грубо и глупо. С помощью атрибута
autoplay
можно удовлетворить его глубоко порочные желания.
<audio src="witchitalineman.mp3" autoplay>
</audio>
Если
вы когда-нибудь будете так использовать атрибут
autoplay
, знайте: я вас найду.
Обратите внимание, что у атрибута
autoplay
нет значения. Такие атрибуты называются булевыми, в честь Джорджа Буля, великого математика из Корка [8] .
Компьютерная логика целиком основана на булевой логике: электрический ток либо течет, либо нет; двоичное значение – либо единица, либо ноль; результат расчета – либо истина (true), либо ложь (false).
8
Джордж Буль (1815–1864) – один из предтеч математической логики, был профессором математики в университете Корка с 1849 года. Прим. перев.
Не перепутайте булевы атрибуты и булевы значения. Вас можно понять, если вы подумаете, что булев атрибут будет принимать значения true и false. В действительности булево по природе само существование элемента: присутствует он или нет. Даже если напишете атрибуту значение, никакого эффекта это иметь не будет. Написать
autoplay="false"
или
autoplay="no thanks"
– то же самое, что написать
autoplay
.
Если вы используете синтаксис XHTML, можете написать
autoplay="autoplay"
. Этот синтаксис используется в официальных документах Управления по управлению управлением избыточной информацией.
Если ставить аудиофайл на автоматическое проигрывание не кажется вам достаточно зловредным, вы можете принести еще больше скорби в этот мир, заставив аудиофайл бесконечно повторяться. Другой булев атрибут,
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):
Рис. 3.06. Элементы управления (Проиграть, Пауза, Громче, Тише), сделанные с помощью элементов button
Буферизация
В какой-то момент спецификация HTML5 включала еще один булев атрибут для элемента
audio
. Атрибут
autobuffer
был более вежливым и продуманным вариантом неприятного атрибута
autoplay
. Он позволял авторам сообщить браузеру, что хотя аудиофайл и не нужно начинать проигрывать автоматически, скорее всего в какой-то момент пользователь начнет его проигрывать, поэтому браузеру стоит начать подгружать файл в фоновом режиме.
Это был бы полезный атрибут, но, к сожалению, Safari сделал лишний шаг вперед. Этот браузер начал подгружать аудиофайлы вне зависимости от того, присутствует атрибут
autobuffer
или нет. Не забывайте, что из-за того, что
autobuffer
– булева переменная, не было никакого способа сказать Safari, что подгружать аудиофайл не нужно:
Если у вас на странице только один элемент audio, возможно, стоит использовать
preload="auto"
, но чем больше элементов audio появляется, тем больше интернет-канал посетителей вашей странички будет загружен из-за излишней предварительной подгрузки.
Его вам сразу включат, а может быть, включ'aт
Элемент
audio
выглядит практически идеальным. Где-то должен быть подвох, правда? Он есть.
Проблемы с элементом
audio
не в спецификации. Главная проблема – с форматами аудиофайлов.
Хотя формат MP3 и распространен повсеместно, это не открытый формат. Из-за того, что на этот формат навешано множество патентов, нельзя написать декодер MP3, не заплатив отчислений по патенту. У корпораций вроде Apple или Adobe с этим нет проблем, но для маленьких компаний или опенсорс-групп это не так просто. Поэтому Safari будет с удовольствием проигрывать MP3-файлы, a Firefox – нет.