HTML5 для веб-дизайнеров
вернуться

Джереми Кит
Шрифт:

На свете есть и другие аудиоформаты. Кодек Vorbis – обычно для него используется файл с расширением

.ogg
– никакими патентами не обременен. Firefox поддерживает Ogg Vorbis, а Safari – нет.

К счастью, есть способ использовать элемент

audio
, не делая при этом «выбор Софи» [10] между форматами файлов. Вместо того чтобы использовать атрибут
src
в открывающем теге
<audio>
, можно указать несколько форматов файлов с помощью элемента source:

10

В фильме «Выбор Софи» (Sophie’s Choice, 1982 год) главная героиня (Мэрил Стрип, получившая за эту роль «Оскар»), мать двоих детей, во время Второй мировой войны должна сделать выбор, кто из ее детей останется жить, а кто отправится в газовую камеру (если она откажется сделать выбор – погибнут оба). Прим. пер.

<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="#">Скачать песню</a>

</object>

</audio>

В этом примере четыре уровня постепенной деградации.

1. Браузер поддерживает элемент

audio
и формат Ogg Vorbis.

2. Браузер поддерживает элемент

audio
и формат MP3.

3. Браузер не поддерживает элемент

audio
, но в нем установлен Flash-плагин.

4. Браузер не поддерживает элемент

audio
, и в нем не установлен Flash-плагин.

Доступ на все уровни