Как добавить звук на сайт html
Перейти к содержимому

Как добавить звук на сайт html

  • автор:

Как добавить звук на сайт 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>      

    Музыка и звуки на 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

    Тег (от англ. audio — звук, аудио) добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент .

    Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим элементом.

    Для универсального воспроизведения в браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через элемент .

    Управление воспроизведением аудио различается между браузерами по своему виду, но основные элементы совпадают. Это кнопка воспроизведения/паузы, длина трека, прошедшее и суммарное время звучания, а также уровень громкости.

    Демо¶

    Изображения и мультимедиа

    Поддержка браузерами¶

    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.

    Синтаксис¶

    1 2 3 4
    audio src="URL">audio> audio> source src="URL" /> audio> 

    Закрывающий тег обязателен.

    Атрибуты¶

    Звук начинает играть сразу после загрузки страницы.

    Добавляет панель управления к аудиофайлу.

    Повторяет воспроизведение звука с начала после его завершения.

    Отключает звук при воспроизведении музыки.

    Управляет предварительной загрузкой аудио данных.

    Указывает путь к воспроизводимому файлу.

    Громкость воспроизведения, в диапазоне от 0.0 (самая тихая) до 1.0 (самая громкая).

    autoplay¶

    При наличии этого атрибута аудио начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие атрибута preload .

    Синтаксис

    audio autoplay="autoplay">audio> 

    Значения

    В качестве значения указывается autoplay , также допустимо вообще не указывать никакое значение.

    Значение по умолчанию

    По умолчанию этот атрибут выключен.

    controls¶

    Добавляет панель управления к аудиотреку. Вид панели и её содержимое зависит от браузера и может в себя включать: кнопку воспроизведения, паузы, перемотки, ползунок для изменения уровня громкости и др.

    Синтаксис

    audio controls="controls">audio> 

    Значения

    В качестве значения указывается controls , также допустимо писать атрибут без значения.

    Значение по умолчанию

    По умолчанию этот атрибут выключен.

    loop¶

    Зацикливает воспроизведение аудио, чтобы оно бесконечно повторялось после завершения.

    Синтаксис

    audio loop="loop">audio> 

    Значения

    В качестве значения указывается loop , также допустимо писать атрибут без значения.

    Значение по умолчанию

    По умолчанию этот атрибут выключен.

    muted¶

    Отключает звук при воспроизведении музыки.

    Синтаксис

    audio muted="muted">audio> 

    Значения

    В качестве значения указывается muted , также допустимо вообще не указывать никакое значение.

    Значение по умолчанию

    По умолчанию этот атрибут выключен.

    preload¶

    Этот перечисляемый аттрибут предназначен для предоставления подсказки браузеру о том, что автор считает лучшим для сайта. Тег может иметь следующие значения

    Синтаксис

    audio preload="auto">audio> 

    Значения

    указывает, что аудио не должно предварительно загружаться

    указывает, что загрузить нужно только метаданные;

    указывает на то, что весь звуковой файл может быть загружен, даже если пользователь не будет использовать его;

    Значение по умолчанию

    Если он не указан, это будет определенное браузером значение. Спецификация советует использование аттрибута metadata .

    Примечания

    • Аттрибут autoplay имеет приоритет над preload . Если autoplay указан, браузер, должен начать загрузку для воспроизведения.
    • Браузер не принуждается спецификацией следовать значению этого аттрибута; это просто подсказка.

    src¶

    Указывает путь к воспроизводимому аудиофайлу. Для этой же цели также можно использовать элемент .

    Синтаксис

    audio src="">audio> 

    Значения

    В качестве значения принимается полный или относительный путь к файлу.

    Значение по умолчанию

    Спецификации¶

    • WHATWG HTML Living Standard
    • HTML5

    Описание и примеры¶

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
     html> head> meta charset="utf-8" /> title>audiotitle> head> body> p>Александр Клименков - Четырнадцатьp> audio controls> 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> 
     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
     audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay > Ваш браузер не поддерживает code>audiocode> элемент. audio> audio src="foo.ogg"> track kind="captions" src="foo.en.vtt" srclang="en" label="English" /> track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska" /> audio> 

    Аудио элемент с элементом источника:

    1 2 3 4
    audio controls="controls"> Ваш браузер не поддерживает code>audiocode> элемент. source src="foo.wav" type="audio/wav" /> audio> 

    Освоение HTML5 тега audio

    С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.

    Используем для вставки звукового файлу на страницу

    Ниже приведен простейший пример использования тега , он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.

    Воспроизведение звука в цикле

    Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.

    Отображение элементов управления

    Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .

    Различные форматы файлов

    поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.

    Указываем MIME-тип файлов

    При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type .

    Для старых браузеров

    А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег

    ? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .  

    Буферизация файлов

    • none — если вы не хотите использовать буфер файлов;
    • auto — если вы хотите, чтобы браузер беферизировал файл целиком;
    • metadata — для загрузки лишь служебной информации (продолжительность звучания и др.).

    Управление воспроизведением через JavaScript

    Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:

      

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *