Читать онлайн книгу «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] .
Полная ссылка: 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 – нет.
