Как вставить аудио в html
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег . Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
| Кодек | Internet Explorer | Chrome | Opera | Safari | Firefox |
| ogg/vorbis | |||||
| wav | |||||
| mp3 | |||||
| AAC |
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег .
Синтаксис
Атрибуты
autoplay Звук начинает играть сразу после загрузки страницы. controls Добавляет панель управления к аудиофайлу. loop Повторяет воспроизведение звука с начала после его завершения. preload Используется для загрузки файла вместе с загрузкой веб-страницы. src Указывает путь к воспроизводимому файлу.
Закрывающий тег
HTML5 IE 8 IE 9+ Cr Op Sa Fx
audio Александр Клименков - Четырнадцать
Результат примера в браузере Opera показан на рис. 1.
Рис. 1. Воспроизведение аудиофайла
Браузеры
Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.
Музыка и звуки на HTML-странице
currentTime Позиция курсора проигрывателя, double (секунды) duration Длительность воспроизведения, double (секунды); только чтение muted Заглушен ли звук, boolean paused Остановлено ли воспроизведение, boolean volume Уровень громкости, double (от 0 до 1) played Были ли воспроизведены интервалы полностью, возвращает объект TimeRanges seekable Интервалы, которые готовы для немедленного воспроизведения, возвращает объект TimeRanges buffered Возвращает объект TimeRanges буферизованного файла
События тега
durationchange Обновлён атрибут duration ended Воспроизведение остановлено по достижению конца pause Воспроизведение было остановлено (обратите внимание на отсутствие события stop) play Файл начал проигрываться timeupdate Текущая позиция воспроизведения изменилась (обычно каждые 250 мс) volumechange Значение изменилось canplay Файл может быть воспроизведен, но, возможно, потребуется пауза, пока он загружается. canplaythrough При имеющемся темпе скачивания предполагается, что файл может быть проигран от начала до конца без перерыва. progress Браузер показывает состояние проигрывания (обычно каждые 250 мс)
Объект TimeRanges
Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:
length Число интервалов start(index Начальное время указанного интервала end(index) Конечное время указанного интервала (отсчитывается от начала воспроизведения)
Управление воспроизведением через JavaScript
Для создания объекта audio в javascript используется:
var audio = new Audio();Чтобы определить, поддерживается ли данный формат файла в браузере используйте метод canPlayType() , который возвращает одно из 3 значений:
- probably,
- maybe,
- «» (пустая строка).
var audio = new Audio(); var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') != "";var audio = document.getElementById('my-audio-id'); // получим доступ к объекту audio. audio.canPlayType('audio/ogg'); // или сразу задав кодек: // audio.canPlayType('audio/ogg; codecs="vorbis"');Как вариант, объект создаётся полностью на Javascript.
var audio = new Audio();Старые форматы вставки музыки:
Пример
Поддерживаемые форматы: Ogg Vorbis, WAV PCM, MP3, AAC, Speex (зависит от конкретного браузера).
Подробнее на Wiki: Audio format support
Как вставить аудио в html
Включите музыку, подкаст или аудио-подсказку.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 7 июня 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Встраивает аудиофайл на страницу ��
Пример
Скопировать ссылку «Пример» Скопировано
Попробуем добавить на нашу страницу приветствие Алисы и текст, который появится, если браузер не поддерживает встроенное аудио на странице:
Привет, я Алиса Ваш браузер не поддерживает встроенное аудио. Попробуйте скачать его по ссылке.figure> figcaption>Привет, я Алисаfigcaption> audio controls src="hi-alice.mp3"> Ваш браузер не поддерживает встроенное аудио. Попробуйте скачать его a href="hi-alice.mp3" download>по ссылкеa>. audio> figure>
Как понять
Скопировать ссылку «Как понять» Скопировано
Тег добавляет на страницу аудиоплеер, который может воспроизвести звуковой файл. Можно добавить несколько форматов одного файла, чтобы браузер воспроизвёл тот формат, который он поддерживает — для этого нужно добавить вложенные теги .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег всегда закрывается парным тегом < / audio>.
Внутри контейнера пишется текст, который появится, если браузер не поддерживает встроенное аудио.
Ваш браузер не поддерживает встроенное аудио. Попробуйте скачать файл.audio controls> source src="audio.mp3" type="audio/mpeg"> source src="audio.ogg" type="audio/ogg"> p> Ваш браузер не поддерживает встроенное аудио. Попробуйте a href="audio.mp3" download>скачатьa> файл. p> audio>
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
С помощью атрибутов мы можем настроить кнопки управления, зацикливание файла и другие параметры:
- autoplay — аудио начнёт играть в момент загрузки страницы, не дожидаясь, когда файл скачается полностью. Но лучше так не делать, потому что никто не любит, когда что-то начинает играть без предупреждения, а браузеры типа Chrome вообще выключают такие звуки;
- controls — добавляет стандартные элементы управления аудиоплеером: кнопку воспроизведения и паузы, полосу прокрутки, уровень громкости и другие элементы, в зависимости от браузера;
- loop — зацикливает воспроизведение аудио, так что оно снова начинает играть каждый раз после завершения;
- muted — звук будет на нуле, пока пользователь его не увеличит;
- preload — подсказывает браузеру, нужно ли загружать аудио или информацию о нём сразу со страницей. Без этого атрибута предварительная загрузка файла будет зависеть от настроек конкретного браузера. У этого атрибута несколько значений:
- none — аудиофайл не загружается предварительно;
- metadata — загружается только информация о файле, например, размер и продолжительность. Рекомендуем использовать именно этот параметр, чтобы не загружать аудио, пока пользователь не захочет его прослушать;
- auto — аудиофайл загружается со страницей, чтобы пользователь мог сразу начать его слушать. Если не указывать никакое значение preload , то атрибут будет работать как auto . Учти, что если стоит атрибут autoplay , то preload не работает.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если не указать атрибут controls , то браузер не будет показывать стандартные элементы управления аудиоплеером. Создать свои элементы управления можно с помощью JavaScript.
�� Значение свойства display у тега по умолчанию inline , а значит внизу может появиться отступ, который зависит от высоты строки. Чтобы убрать этот отступ, напиши для плеера display : block .
�� Используйте CSS-свойства, чтобы настроить общий внешний вид и расположение аудиоплеера. Например, border и border — radius , padding , margin и другие параметры. Отдельные элементы внутри плеера изменить не получится. К тому же, в разных браузерах они выглядят по-разному.
�� С 2017 года практически все браузеры запретили автопроигрывание аудио.
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Мы также добавили несколько форматов одного аудиофайла. Если браузер не поддерживает формат Opus, он попробует воспроизвести OGG. Если и с ним не получится, то воспроизведёт файл в MP3. Атрибут type поможет браузеру быстрее определить формат файла:
Ваш браузер не поддерживает встроенные аудио. Попробуйте скачать файл.audio controls> source src="audio.opus" type="audio/ogg; codecs=opus"> source src="audio.ogg" type="audio/ogg; codecs=vorbis"> source src="audio.mp3" type="audio/mpeg"> Ваш браузер не поддерживает встроенные аудио. Попробуйте a href="audio.mp3" download>скачатьa> файл. audio>Как вставить на сайт аудио файл (музыку) с помощью HTML5
Здравствуйте, дорогие читатели блога. Не удивительно, что в последнее время медийные сайты становятся всё более популярными. На таких сайтах очень интересно находится, например можно посмотреть какое нибудь видео или же послушать отличную музыку. Но в этот раз мы будем с Вами слушать музыку, а именно научимся вставлять аудио файлы на наш сайт с помощью HTML5.
Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.
Демо
Поддержка браузеров
Все браузеры, которые поддерживают тег — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.
Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.
Chrome после 6 версии поддерживает практически все форматы.
Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.
С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.
Safari поддерживает все форматы аудио кроме ogg.
Добавление аудио файла на сайт
Чтобы добавить аудио файл на Ваш сайт нужно между тегами указать прямую ссылку на файл. Ссылка указывается с помощью тега . Вот как будет выглядеть готовый код:
Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.
А если браузер вообще не поддерживает тег то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».
Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.
Демо
Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.