HTML тег audio
Тег <audio> позволяет в браузере проигрывать звуковые файлы.
В настоящее время поддерживается три звуковых формата — MP3, WAV, OGG.
| Браузер | MP3 | WAV | OGG |
|---|---|---|---|
| Internet Explorer | Да | Нет | Нет |
| Chrome | Да | Да | Да |
| Firefox | Да | Да | Да |
| Safari | Да | Да | Нет |
| Opera | Да | Да | Да |
Любой текст между тегами <audio> и </audio> будет отображен в том случае, если тег <audio> не поддерживается браузером.
MIME-типы для аудио форматов
| Формат | MIME-тип |
|---|---|
| MP3 | audio/mpeg |
| WAV | |
| OGG | audio/ogg |
Разница между HTML 4.01 и HTML5
Тег <audio> был добавлен в HTML5.Атрибуты тега <audio>
| Атрибут | Описание |
|---|---|
| autoplay | Автоматически запускает медиа-файл на воспроизведение |
| controls | Включает элементы управления воспроизведением аудиофайла |
| loop | Включает бесконечный цикл воспроизведения аудиофайла |
| muted | Отключает звук у аудиофайла |
| preload | Определяет, следует ли загружать аудиофайл во время загрузки страницы |
| src | Определяет URL аудиофайла |
Общие атрибуты
Тег <audio> поддерживает общие атрибуты и атрибуты-события.
HTML пример
Проигрываем звуковой файл:
<audio controls>
<source src='horse.ogg' type="audio/ogg">
<source src='horse.mp3' type="audio/mpeg">
Ваш браузер не поддерживает тег audio.
</audio>
HTML Аудио
Аудио в Интернете
До HTML5 аудиофайлы можно было воспроизводить только в браузере с подключаемым модулем (например: flash).
Элемент <audio> HTML5 задает стандартный способ встраивания аудио в веб страницу.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент <audio>.
| Элемент | |||||
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Элемент <audio> HTML
Для воспроизведения аудиофайла в формате HTML используйте элемент <audio>:
Пример
<audio controls>
<source src=»horse.ogg» type=»audio/ogg»>
<source src=»horse.mp3″ type=»audio/mpeg»>
Ваш браузер не поддерживает элемент audio.
</audio>
Аудио HTML — Как это работает?
Атрибут controls добавляет элементы управления звуком, такие как воспроизведение, пауза и громкость.
Элемент <source> позволяет указать альтернативные аудиофайлы, которые браузер может выбрать. Браузер будет использовать первый распознанный Формат.
Текст между тегами <audio> и </audio> будет отображаться только в браузерах, которые не поддерживает элемент <audio>.
Аудио HTML — Поддержка браузеров
HTML5 поддерживаются 3 аудио формата: MP3, Wav и Ogg.
Поддержка браузером различных форматов:
| Браузер | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | Да | Нет | Нет |
| Chrome | Да | Да | Да |
| Firefox | Да | Да | Да |
| Safari | Да | Да | Нет |
| Opera | Да | Да | Да |
Аудио HTML — Тип носителя
| Формат файла | Тип носителя |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav |
Аудио HTML — Методы, свойства и события
HTML5 определяет методы, свойства и события DOM для элемента <audio>.
Это позволяет загружать, воспроизводить и приостанавливать аудио, а также устанавливать продолжительность и громкость.
Есть также события DOM , что может сообщить Вам, когда звук начинает проигрывать, паузы и т. д.
Для полной справки DOM, перейдите на наш Справочник Audio/Video DOM HTML5.
Тег audio HTML5
| Тег | Описание |
|---|---|
| <audio> | Определяет звуковое содержание |
| <source> | Определяет несколько ресурсов мультимедиа для элементов мультимедиа, таких как <video> и <audio> |
Атрибут preload | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 3.0+ | 10.5+ | 3.1+ | 4.0+ | 2.2+ | 3.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Используется для загрузки аудиофайла вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay.
Синтаксис
<audio preload="none | metadata | auto">
</audio>Значения
- none
- Не загружать аудиофайл.
- metadata
- Загрузить только служебную информацию (продолжительность звучания и др.).
- auto
- Загрузить аудиофайл целиком при загрузке страницы.
Пустое значение атрибута воспринимается как auto.
Значение по умолчанию
none
Пример
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>preload</title> </head> <body> <audio autoplay preload="metadata"> <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'> <source src="audio/music.mp3" type="audio/mpeg"> Тег audio не поддерживается вашим браузером. <a href="audio/music.mp3">Скачайте музыку</a>. </audio> </body> </html>
Браузеры
Opera вместо preload поддерживает атрибут autobuffer.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 4.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <bgsound> определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Громкость, продолжительность звучания музыки и другие характеристики определяются с помощью атрибутов тега, а также могут управляться через скрипты. Этот тег должен размещаться только в контейнере <head>.
Тег <bgsound> не входит в спецификацию HTML и при его использовании код не пройдет валидацию. К тому же пользователи, как правило, отрицательно относятся к музыке, которая играет на сайте, поэтому используйте эту возможность с осторожностью и по необходимости.
Синтаксис
<head> <bgsound атрибуты> </head>
Атрибуты
- balance
- Управляет балансом звука между правой и левой колонками.
- loop
- Устанавливает, сколько раз проигрывать музыкальный файл.
- src
- Путь к музыкальному файлу.
- volume
- Задает громкость звучания музыки.
Закрывающий тег
Не обязателен.
Валидация
Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег BGSOUND</title>
<bgsound src="town.mid" loop="-1">
</head>
<body>
...
</body>
</html>Примечание
В браузере Internet Explorer можно отключить возможность воспроизведения звуков в свойствах обозревателя. Для этого во вкладке «Дополнительно» в блоке «Мультимедиа» уберите галочку у пункта «Воспроизводить звуки на веб-страницах» (рис. 1).
Рис. 1. Отключение звуков в настройках браузера Internet Explorer
В браузере Opera отключить звуки можно через меню Инструменты (рис. 2). Настройка применяется после обновления страницы.
Рис. 2. Отключение звука в браузере Opera