Помоги проекту - поделись книгой:
<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>
<buttononclick="document.getElementById(‘player’). play()">Проиграть
</button>
<buttononclick="document.getElementById(‘player’). pause()">Пауза
</button>
<buttononclick="document.getElementById(‘player’). volume+= 0.1">
Громче
</button>
<buttononclick="document.getElementById(‘player’). volume-= 0.1">
Тише
</button>
</div>
Рис. 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 src="witchitalineman.mp3" controls preload="none">
</audio>
Если у вас на странице только один элемент audio, возможно, стоит использовать preload="auto", но чем больше элементов audio появляется, тем больше интернет-канал посетителей вашей странички будет загружен из-за излишней предварительной подгрузки.
Его вам сразу вклю́чат, а может быть, включáт
Элемент audio выглядит практически идеальным. Где-то должен быть подвох, правда? Он есть.
Проблемы с элементом audio не в спецификации. Главная проблема – с форматами аудиофайлов.
Хотя формат MP3 и распространен повсеместно, это не открытый формат. Из-за того, что на этот формат навешано множество патентов, нельзя написать декодер MP3, не заплатив отчислений по патенту. У корпораций вроде Apple или Adobe с этим нет проблем, но для маленьких компаний или опенсорс-групп это не так просто. Поэтому Safari будет с удовольствием проигрывать MP3-файлы, a Firefox – нет.
На свете есть и другие аудиоформаты. Кодек Vorbis – обычно для него используется файл с расширением .ogg – никакими патентами не обременен. Firefox поддерживает Ogg Vorbis, а Safari – нет.
К счастью, есть способ использовать элемент audio, не делая при этом «выбор Софи»[10] между форматами файлов. Вместо того чтобы использовать атрибут src в открывающем теге <audio>, можно указать несколько форматов файлов с помощью элемента source:
<audio controls>
<source src="witchitalineman.ogg">
<source src="witchitalineman.mp3">
</audio>
Браузер, который может проигрывать файлы Ogg Vorbis, не станет смотреть дальше первого элемента source. Браузер, который может проигрывать файлы MP3, но не может Ogg Vorbis, пропустит первый элемент source и проиграет файл во втором элементе source.
Можно помочь браузерам и указать MIME-типы для каждого исходного файла:
<audio controls>
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
</audio>
Элемент source – самостоятельный (или «пустой») элемент, так что если вы используете синтаксис XHTML, не забудьте включить закрывающий слэш в конца каждого тега <source />.
Запасной вариант
Возможность указывать несколько элементов source очень удобна. Но есть браузеры, которые пока не поддерживают элемент audio совсем. Угадаете, на который браузер я намекаю?
Internet Explorer и его родню нужно кормить аудиофайлами с ложечки, по старинке, через Flash. Модель содержимого элемента audio позволяет это сделать. Все, что находится между открывающим и закрывающим тегами <audio> – и что при этом не является элементом source – будет показываться браузерам, которые не понимают элемента audio:
<audio controls>
<source src="witchitalineman.ogg» type="audio/ogg">
<source src="witchitalineman.mp3» type="audio/mpeg">
<object type="application/x-shockwave-flash"data="player.swf?soundFile=witchitalineman.mp3">
<param name="movie"value="player.swf?soundFile=witchitalineman.mp3">
</object>
</audio>
В этом примере элемент object будет доступен только тем браузерам, которые не поддерживают элемент audio.
Можно пойти еще дальше. Элемент object, включающийся при «запасном варианте», тоже предоставляет вам возможность включить содержимое. Это значит, что, если больше ничего не срабатывает, можно дать старый проверенный вариант – гиперссылку:
<audio controls>
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"data="player.swf?soundFile=witchitalineman.mp3">
<param name="movie"value="player.swf?soundFile=witchitalineman.mp3">
<a href="witchitalineman.mp3">Скачать песню</a>
</object>
</audio>
В этом примере четыре уровня постепенной деградации.
1. Браузер поддерживает элемент audio и формат Ogg Vorbis.
2. Браузер поддерживает элемент audio и формат MP3.
3. Браузер не поддерживает элемент audio, но в нем установлен Flash-плагин.
4. Браузер не поддерживает элемент audio, и в нем не установлен Flash-плагин.
Доступ на все уровни
Модель содержимого элемента audio очень удобна для предоставления «запасного варианта» содержимого. Запасное содержимое – не то же самое, что содержимое для технологий специальных возможностей.
Предположим, что вместе с аудиофайлом идет его транскрипция. Вот так не нужно размечать эти данные:
<audio controls>
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
<p>I am a lineman for the county…</p>
</audio>
Транскрипция в этом примере будет видна только тем браузерам, которые поддерживают элемент audio. Размечать незвуковое содержимое таким образом никак не поможет глухому пользователю с хорошим браузером. Кроме того, так называемое содержимое для технологий специальных возможностей часто полезно для всех – так что зачем его прятать?
<audio controls>
Поделиться книгой: