Раньше вставлять аудио в веб-страницу было непросто, поскольку в веб-браузерах не было единого стандарта для определения встроенных медиа-файлов.

В этой главе мы продемонстрируем некоторые способы встраивания аудио в веб-страницу, от использования простой ссылки до использования новейшего HTML5-элемента <audio>.

Использование тега <audio> для встраивания audio

Недавно появившийся в HTML5 элемент <audio> обеспечивает стандартный способ встраивания аудио в веб-страницы. Элемент <audio> является относительно новым, но он работает в большинстве современных веб-браузеров.

В следующем примере просто вставляется аудио в HTML5-документ с использованием набора элементов управления браузера по умолчанию с одним источником, определенным атрибутом src.

<audio controls="controls" src="media/birds.mp3">
    Your browser does not support the HTML5 Audio element.
</audio>

Аудио, использующее набор элементов управления по умолчанию браузера, с альтернативными источниками.

<audio controls="controls">
    <source src="media/birds.mp3" type="audio/mpeg">
    <source src="media/birds.ogg" type="audio/ogg">
    Your browser does not support the HTML5 Audio element.
</audio>

Дорожка .ogg в приведенном выше примере работает в Firefox, Opera и Chrome, в то время как та же дорожка в формате .mp3 добавлена для обеспечения работы звука в Internet Explorer и Safari.

Встраивание audio как ссылку

Вы можете делать ссылки на свои аудио файлы и воспроизводить их по клику.

Посмотрим следующий пример, чтобы понять, как это работает:

<a href="media/sea.mp3">Track 1</a>
<a href="media/wind.mp3">Track 2</a>

Использование тега <object> для встраивания audio

Элемент <object> используется для встраивания различных типов медиафайлов в HTML-документы. Первоначально этот элемент использовался для вставки элементов управления ActiveX, но в соответствии со спецификацией, объектом может быть любой медиа-объект, такой как аудио, видео, PDF-файл, Flash-анимация и даже изображения.

В следующем примере кода встраивается простой аудиофайл в веб-страницу.

<object data="media/sea.mp3"></object>
<object data="media/sea.ogg"></object>

Элемент <object> не везде поддерживается и очень зависит от типа внедряемого объекта. Другие методы, такие как элемент HTML5 <audio> или сторонние проигрыватели HTML5 во многих случаях могут быть лучшим выбором.

Использование тега <embed> для встраивания audio

Элемент <embed> используется для встраивания мультимедийного контента в HTML-документ.

Следующий фрагмент кода встраивает аудиофайлы в веб-страницу.

<embed src="media/wind.mp3">
<embed src="media/wind.ogg">

Элемент <embed> очень хорошо поддерживается в текущих браузерах и определен как стандартный в HTML5, но ваше аудио может не воспроизводиться из-за отсутствия поддержки браузером этого формата файла или недоступности плагинов.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.