Вы можете встраивать аудиофайлы в HTML5 почти так же просто, как и видео. Для этого HTML5 предоставляет собственный элемент audio.
<audio src="song.mp3"> Браузер не поддерживает элемент аудио. </audio>
Элементу audio присваивается имя файла для воспроизведения через атрибут src. Однако это не означает, что файл будет автоматически воспроизводиться. Для этого нужны элементы управления.
Если вы хотите показать элементы управления, вы должны присвоить элементу audio атрибут controls.
<audio src="song.mp3" controls> Браузер не поддерживает элемент аудио. </audio>
В браузере это должно выглядеть следующим образом:
Если отсутствует controls, то встраиваемый элемент через audio не отображается. Разумно удалить этот атрибут, если вы хотите добавить собственное управление через JavaScript.
К сожалению, использование элемента audio не всегда происходит без проблем. Как обычно, в этом виноваты браузеры, каждый из которых поддерживает разные форматы. Вот текущая таблица на эту тему.
| Браузер | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | нет | да | да | нет | нет |
Safari | да | нет | да | да | да |
Chrome | да | да | нет | нет | нет |
Opera | нет | да | да | да | нет |
Что делать? Элемент audio также позволяет вам определить дополнительные элементы source. Затем этим элементам присваиваются различные форматы для разных браузеров. Пример:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Атрибутам src присваиваются соответствующие файлы в разных форматах для разных браузеров.
Помимо controls, у элемента audio есть и другие атрибуты. Один из них - autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Если атрибут установлен, воспроизведение аудиофайла начнется автоматически после загрузки. Обычно этот атрибут не устанавливается, так как посетителям следует решать, когда запускать аудиофайл.
Также интересен атрибут loop. Этот атрибут обеспечивает воспроизведение файла в цикле.
Как и при встраивании видео, у аудиофайлов есть атрибуты type и media. Здесь вы также можете указать соответствующие типы MIME и кодеки. В спецификации HTML5 перечислены следующие типичные значения атрибута type:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Обратите внимание, что эти два атрибута допускаются только в элементе source, а не в элементе audio.
Встраивание Flash и иных технологий
Flash-фильмы ранее можно было встраивать в старые версии HTML с помощью комбинации элементов embed и object. Результатом было, кстати, очень не красивое синтаксическое построение, которое выглядело, например, так:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
Это классический способ с использованием элементов object и embed, который существует в HTML уже очень долго.
Тем не менее, слово "классический" здесь не означает, что такой вариант был рекомендован W3C в прошлом. Ведь в HTML 4 предпочтение отдавалось элементу object, который правильно интерпретировался Internet Explorer. Но Netscape Navigator использовал элемент embed. Различное толкование требовало объединить элементы object и embed.
В HTML5 для встраивания активного контента официально предоставлены элементы object и embed.
Элемент embed является контейнером, предназначенным для отображения не-HTML-контента, не покрываемого другими элементами, такими как img, video, audio и т. д. Для воспроизведения встроенного контента обычно требуются браузерные плагины.
C помощью embed теперь можно стандартным образом встраивать Flash-фильмы. Вот пример того, как это может выглядеть:
<embed
src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
type="application/x-shockwave-flash"
width="384"
height="313"
allowscriptaccess="always"
allowfullscreen="true"
/>
Элементу embed могут быть присвоены различные атрибуты. Самым важным из них, конечно же, является снова атрибут src. Именно через него, в конечном итоге, указывается файл, который необходимо встроить. Через атрибут type указывается MIME-тип.
В случае Flash он равен application/x-shockwave-flash. Если же вы хотите встроить файл LaTeX, укажите application/x-latex. Ширина и высота встроенного файла управляются через атрибуты width и height.
Существуют также другие атрибуты, которые, однако, не входят в официальную спецификацию HTML5. Они позволяют управлять используемым плагином. Так в предыдущем примере через два "Flash-атрибута" allowscriptaccess и allowfullscreen было установлено, что доступно выполнение сценариев и полноэкранный режим. Также есть атрибут quality, через который можно управлять качеством Flash-фильма.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Элемент object
Элемент object подобно embed служит контейнером для содержимого. В отличие от embed, object имеет три различных модели содержимого. Если браузер определяет, что это должна быть прямо отображаемая графика, он будет обрабатывать это как элемент img. Если ссылочный объект представляет собой веб-содержимое, оно будет отображено внутри iFrames. (Больше о iFrames будет в дальнейшем в этом ряду). Для других типов содержимого object ведет себя также, как embed.
Следующий пример показывает встраивание Flash-фильма через элемент object.
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
width="400"
height="300">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<p>
В вашем браузере отсутствует плагин Flash.
</p>
</object>Наконец, возникает вопрос, использовать ли object или embed. На первый взгляд эти два элемента кажутся почти идентичными. И, действительно, элемент object может все то же, что и элемент embed.
Для встраивания содержимого - за исключением изображений - обычно следует использовать элемент object. Этот элемент позволяет указать альтернативное содержимое, которое будет отображаться, если встроенный элемент не сможет быть загружен.
