Используйте атрибут controls, для того чтобы отобразить элементы управления «проиграть», «пауза» и управления громкостью
Если вам не нравятся встроенные в браузер элементы управления, можете создать свои собственные. С помощью JavaScript вы можете взаимодействовать с Audio
API, которое дает вам доступ к методам (play и pause) и свойствам (volume и др.). Вот быстрый и простой пример, как использовать элементы button и ужасные обработчики событий, написанные прямо в коде страницы (рис. 3.06):
Элементы управления (Проиграть, Пауза, Громче, Тише), сделанные с помощью элементов button
Буферизация
В какой-то момент спецификация HTML5 включала еще один булев атрибут для элемента audio
. Атрибут autobuffer был более вежливым и продуманным вариантом неприятного атрибута autoplay. Он позволял авторам сообщить браузеру, что хотя аудиофайл и не нужно начинать проигрывать автоматически, скорее всего в какой-то момент пользователь начнет его проигрывать, поэтому браузеру стоит начать подгружать файл в фоновом режиме.
Это был бы полезный атрибут, но, к сожалению, Safari сделал лишний шаг вперед. Этот браузер начал подгружать аудиофайлы вне зависимости от того, присутствует атрибут autobuffer
или нет. Не забывайте, что из-за того, что autobuffer – булева переменная, не было никакого способа сказать Safari, что подгружать аудиофайл не нужно: autobuffer="false" – то же самое, что autobuffer="true" или любое другое значение (http://bkaprt.com/html5/5)[9].
В данный момент атрибут autobuffer
заменен атрибутом preload. Это не булев атрибут. Он принимает одно из трех возможных значений: none, auto и metadata. Написав preload="none", вы можете явным образом указать браузеру, что подгружать аудиофайл заранее не нужно:
Если у вас на странице только один элемент audio, возможно, стоит использовать preload="auto"
, но чем больше элементов audio появляется, тем больше интернет-канал посетителей вашей странички будет загружен из-за излишней предварительной подгрузки.
Его вам сразу вклю́чат, а может быть, включáт
Элемент audio
выглядит практически идеальным. Где-то должен быть подвох, правда? Он есть.
Проблемы с элементом audio
не в спецификации. Главная проблема – с форматами аудиофайлов.
Хотя формат MP3 и распространен повсеместно, это не открытый формат. Из-за того, что на этот формат навешано множество патентов, нельзя написать декодер MP3, не заплатив отчислений по патенту. У корпораций вроде Apple или Adobe с этим нет проблем, но для маленьких компаний или опенсорс-групп это не так просто. Поэтому Safari будет с удовольствием проигрывать MP3-файлы, a Firefox – нет.
На свете есть и другие аудиоформаты. Кодек Vorbis – обычно для него используется файл с расширением .ogg
– никакими патентами не обременен. Firefox поддерживает Ogg Vorbis, а Safari – нет.
К счастью, есть способ использовать элемент audio
, не делая при этом «выбор Софи»[10] между форматами файлов. Вместо того чтобы использовать атрибут src в открывающем теге , можно указать несколько форматов файлов с помощью элемента source:
Браузер, который может проигрывать файлы Ogg Vorbis, не станет смотреть дальше первого элемента source
. Браузер, который может проигрывать файлы MP3, но не может Ogg Vorbis, пропустит первый элемент source и проиграет файл во втором элементе source.
Можно помочь браузерам и указать MIME-типы для каждого исходного файла:
type="audio/ogg">
type="audio/mpeg">
Элемент source
– самостоятельный (или «пустой») элемент, так что если вы используете синтаксис XHTML, не забудьте включить закрывающий слэш в конца каждого тега .
Запасной вариант
Возможность указывать несколько элементов source
очень удобна. Но есть браузеры, которые пока не поддерживают элемент audio совсем. Угадаете, на который браузер я намекаю?
