Кит Джереми - HTML5 для веб-дизайнеров

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

Internet Explorer и его родню нужно кормить аудиофайлами с ложечки, по старинке, через Flash. Модель содержимого элемента audioпозволяет это сделать. Все, что находится между открывающим и закрывающим тегами – и что при этом не является элементом source– будет показываться браузерам, которые не понимают элемента audio:

data="player.swf?soundFile=witchitalineman.mp3">

value="player.swf?soundFile=witchitalineman.mp3">

В этом примере элемент objectбудет доступен только тем браузерам, которые не поддерживают элемент audio.

Можно пойти еще дальше. Элемент object, включающийся при «запасном варианте», тоже предоставляет вам возможность включить содержимое. Это значит, что, если больше ничего не срабатывает, можно дать старый проверенный вариант – гиперссылку:

data="player.swf?soundFile=witchitalineman.mp3">

value="player.swf?soundFile=witchitalineman.mp3">

Скачать песню

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

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

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

3. Браузер не поддерживает элемент audio, но в нем установлен Flash-плагин.

4. Браузер не поддерживает элемент audio, и в нем не установлен Flash-плагин.

Модель содержимого элемента audioочень удобна для предоставления «запасного варианта» содержимого. Запасное содержимое – не то же самое, что содержимое для технологий специальных возможностей.

Предположим, что вместе с аудиофайлом идет его транскрипция. Вот так не нужно размечать эти данные:

I am a lineman for the county…

Транскрипция в этом примере будет видна только тем браузерам, которые поддерживают элемент audio. Размечать незвуковое содержимое таким образом никак не поможет глухому пользователю с хорошим браузером. Кроме того, так называемое содержимое для технологий специальных возможностей часто полезно для всех – так что зачем его прятать?

I am a lineman for the county…

Если родное для браузера воспроизведение аудио – это воодушевляюще, то перспектива родного отображения видео в браузере заставляет веб-разработчиков пускать слюнки от нетерпения. По мере того как пропускная способность интернет-каналов возросла, видеосодержимое начало становиться все более и более популярным. Сейчас главная технология для показа видео в вебе – Flash-плагин. Но HTML5 может все это изменить.