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

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

Если вам не нравятся встроенные в браузер элементы управления, можете создать свои собственные. С помощью JavaScript вы можете взаимодействовать с Audio API, которое дает вам доступ к методам (play и pause) и свойствам (volume и др.). Вот быстрый и простой пример, как использовать элементы button и ужасные обработчики событий, написанные прямо в коде страницы (рис. 3.06):

onclick="document.getElementById(‘player’). play()">Проиграть

onclick="document.getElementById(‘player’). pause()">Пауза

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

Громче

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

Тише

^{Рис. 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 совсем. Угадаете, на который браузер я намекаю?