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