HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
HTML Audio — How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
Example
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after autoplay to let your audio file start playing automatically (but muted):
Example
Browser Support
The numbers in the table specify the first browser version that fully supports the <audio> element.
| Element | |||||
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Audio Formats
There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Audio — Media Types
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
HTML Audio — Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios, as well as set duration and volume.
There are also DOM events that can notify you when an audio begins to play, is paused, etc.
Урок 14. Как вставить аудио или музыку на сайт в html
1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html
Как вставить аудио (музыку) на сайт в html
Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:
1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
2. Далее нужно скачать файлы плеера .
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.
4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:
И всё готово! Можете посмотреть и работу примера.
Как установить фоновую музыку в html
Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.
Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.
Синтаксис довольно-таки прост:
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз
| Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true. |
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега <bgsound> :
src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.
Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.
Вставка аудио и музыки в HTML5 — тег audio
audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.
| Для каждого браузера проигрыватель и панель управления может отличаться. Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3. |
Атрибуты тега audio
autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)
<audio>¶
Тег <audio> (от англ. audio — звук, аудио) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source> .
Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.
Для универсального воспроизведения в браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент <source> .
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Изображения и мультимедиа
Поддержка браузерами¶
Can I Use audio? Data on support for the audio feature across the major browsers from caniuse.com.
Поддержка MP3 аудио-кодека:
Can I Use mp3? Data on support for the mp3 feature across the major browsers from caniuse.com.
Поддержка WAV аудио-кодека:
Can I Use wav? Data on support for the wav feature across the major browsers from caniuse.com.
Поддержка FLAC аудио-кодека:
Can I Use flac? Data on support for the flac feature across the major browsers from caniuse.com.
Поддержка AAC аудио-кодека:
Can I Use aac? Data on support for the aac feature across the major browsers from caniuse.com.
Поддержка Ogg Vorbis аудио-кодека:
Can I Use ogg-vorbis? Data on support for the ogg-vorbis feature across the major browsers from caniuse.com.
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
autoplay¶
При наличии этого атрибута аудио начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие атрибута preload .
Синтаксис
Значения
В качестве значения указывается autoplay , также допустимо вообще не указывать никакое значение.
Значение по умолчанию
По умолчанию этот атрибут выключен.
controls¶
Добавляет панель управления к аудиотреку. Вид панели и её содержимое зависит от браузера и может в себя включать: кнопку воспроизведения, паузы, перемотки, ползунок для изменения уровня громкости и др.
Синтаксис
Значения
В качестве значения указывается controls , также допустимо писать атрибут без значения.
Значение по умолчанию
По умолчанию этот атрибут выключен.
Зацикливает воспроизведение аудио, чтобы оно бесконечно повторялось после завершения.
Синтаксис
Значения
В качестве значения указывается loop , также допустимо писать атрибут без значения.
Значение по умолчанию
По умолчанию этот атрибут выключен.
muted¶
Отключает звук при воспроизведении музыки.
Синтаксис
Значения
В качестве значения указывается muted , также допустимо вообще не указывать никакое значение.
Значение по умолчанию
По умолчанию этот атрибут выключен.
preload¶
Этот перечисляемый аттрибут предназначен для предоставления подсказки браузеру о том, что автор считает лучшим для сайта. Тег может иметь следующие значения
Синтаксис
Значения
none указывает, что аудио не должно предварительно загружаться metadata указывает, что загрузить нужно только метаданные; auto указывает на то, что весь звуковой файл может быть загружен, даже если пользователь не будет использовать его;
Значение по умолчанию
Если он не указан, это будет определенное браузером значение. Спецификация советует использование аттрибута metadata .
Примечания
- Аттрибут autoplay имеет приоритет над preload . Если autoplay указан, браузер, должен начать загрузку для воспроизведения.
- Браузер не принуждается спецификацией следовать значению этого аттрибута; это просто подсказка.
Указывает путь к воспроизводимому аудиофайлу. Для этой же цели также можно использовать элемент <source> .
<audio> — элемент добавления аудио на страницу
HTML-элемент <audio> используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента <source> – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс MediaStream .
Интерактивный пример
Приведённый выше пример показывает простое использование элемента <audio> . По аналогии с элементом <img> мы добавляем путь к мультимедиа, которое мы хотим встроить, в атрибут src . Мы можем добавить другие атрибуты, чтобы указать сведения, такие как автовоспроизведение и повтор, хотим ли мы отображать стандартные элементы управления звуком браузера и т.д.
Контент между открывающим и закрывающим тегами элемента <audio> (см. выше) отображается в браузерах, которые не поддерживают этот элемент.
Не все браузеры поддерживают одинаковые форматы аудио. Вы можете предоставить множество источников внутри вложенных элементов <source> , и тогда браузер будет использовать первый, который он понимает:
Другие примечания по использованию:
- если вы не укажете атрибут controls , тогда аудиоплеер не будет добавлять стандартные элементы управления звуком браузера. Вы можете создать ваши собственные элементы управления в помощью JavaScript и HTMLMediaElementAPI;
- чтобы обеспечить точный контроль над вашим аудиоконтентом, HTMLMediaElement инициирует (вызывает) множество различных событий;
- вы так же можете использовать Web Audio API для непосредственной генерации и управления потоками аудио из кода JavaScript;
- элементы <audio> не могут иметь субтитры, в отличие от элементов <video> . Смотрите «WebVTT и аудио» для более подробной информации.
Хороший источник информации по использованию HTML-элемента <audio> – это руководство для начинающих «Видео- и аудиоконтент».
Атрибуты
К этому элементу применимы глобальные атрибуты.
Атрибут логического типа. Если он указан, аудио начнёт автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла.
Примечание: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.
Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением аудио, в том числе громкостью, перемоткой и паузой.
Этот атрибут указывает, следует ли использовать CORS при загрузке мультимедиа или нет. Допустимые значения:
- anonymous : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация);
- use-credentials : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка Origin ). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous . Для получения дополнительной информации смотрите «Настройки атрибутов CORS».
Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.
Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию является false .
Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведёт к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:
- none : указывает, что аудио не должно предварительно загружаться;
- metadata : указывает, что предварительно загружаются только метаданные аудио (например, продолжительность аудио);
- auto : указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;
- пустая строка: синоним значения auto .Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение metadata .
Примечание:
- Атрибут autoplay имеет приоритет над preload . Если autoplay указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.
- Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.
URL аудио для встраивания. Это является темой контроля доступа HTTP. Этот атрибут является необязательным; вы можете вместо него использовать элемент <source> внутри блока audio ( <audio></audio> ), чтобы указать аудио для встраивания.
События
Этот элемент может инициировать (вызывать) различные события (en-US) .
Взаимодействие с CSS
Элемент <audio> не имеет собственного визуального вывода, если только не указан атрибут controls , в этом случае отображаются стандартные элементы управления браузера.
Стандартные элементы управления имеют значение свойства display , равное inline , и зачастую хорошей идеей является установка этого свойства в значение block , чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.
Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задать border и border-radius , padding , margin и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиоплеера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.
Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использован JavaScript вместе с API HTMLMediaElement для объединения функций, которые они выполняют.
«Основы стилизации видеопроигрывателя (en-US) » предоставляют некоторые полезные методы стилизации – они написаны в контексте <video> , но в значительной степени применимы и к <audio> .
Примеры
Базовое использование
Следующий пример показывает простое использования элемента <audio> для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибута autoplay . Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента <audio> .
Элемент <audio> с элементом <source>
В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибута src во вложенный элемент <source> , а не в непосредственно элемент <audio> . Всегда полезно включать MIME-тип файла в атрибут type , так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.
Элемент <audio> с множеством элементов <source>
Этот пример включает множество элементов <source> . Браузер попытается загрузить источник из первого элемента <source> (Opus), если он не в состоянии воспроизвести его, тогда он перейдёт ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:
Проблемы доступности
Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording’s content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording’s content at a pace and format that is comfortable for them.
If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.
In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone: