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

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

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

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

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

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