jivo banner 468x60jivo banner 728x90jivo banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

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

В этой главе мы продемонстрируем некоторые способы встраивания аудио в веб-страницу, от использования простой ссылки до использования новейшего 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, но ваше аудио может не воспроизводиться из-за отсутствия поддержки браузером этого формата файла или недоступности плагинов.

beget banner 480x320beget banner 728x90beget banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

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

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

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

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

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

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

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

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

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

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

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