Исполняемые доки HTML: Аудио в HTML

Q: Как добавить аудио на HTML-страницу?

Используйте . Атрибут controls показывает плеер браузера с кнопкой воспроизведения, шкалой времени и громкостью. Без него элемент невидим.

Q: Как зациклить аудио в HTML?

Добавьте атрибут loop: . Когда файл заканчивается, он начинается сначала.

Q: Как воспроизвести звук через JavaScript?

Создайте или выберите элемент audio и вызовите play(), например new Audio('click.mp3').play() внутри обработчика клика. play() возвращает промис, который отклоняется, если браузер блокирует воспроизведение.

Как вставить аудио

Укажите элементу <audio> звуковой файл и добавьте controls:

<audio src="song.mp3" controls></audio>

controls показывает плеер браузера: воспроизведение и пауза, шкала времени, время и регулятор громкости. Без controls элемент вообще не занимает места. Превью не может загружать файлы с вашего компьютера, поэтому этот пример создает скриптом короткий файл WAV прямо в браузере и использует его как src. Нажмите воспроизведение:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <audio id="player" controls></audio>
  <p>Four notes, 1.8 seconds.</p>
  <script>
    // Builds a tiny WAV file in the browser (stand-in for song.mp3)
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    document.getElementById('player').src = makeWav([[523, 0.4], [659, 0.4], [784, 0.4], [1047, 0.6]]);
  </script>
</body>
</html>

В Chrome, Firefox и Safari плеер выглядит по-разному, потому что каждый браузер рисует свой. Удалите controls, и плеер исчезнет, хотя аудио по-прежнему доступно для воспроизведения из JavaScript.

Атрибуты audio

Атрибут	Что делает
`controls`	Показывает плеер браузера
`autoplay`	Пытается начать воспроизведение при загрузке (со звуком блокируется, см. ниже)
`loop`	Начинает сначала, когда файл заканчивается
`muted`	Запускает с выключенной громкостью
`preload`	`none` (ничего не скачивать до воспроизведения), `metadata` (только длительность) или `auto` (решает браузер)
`src`	Файл для воспроизведения; или используйте дочерние `<source>` для нескольких форматов

Используйте preload="none" или "metadata" на страницах с множеством плееров, например в списке выпусков подкаста, чтобы страница не скачивала заранее каждый файл.

Форматы и запасные варианты

Перечислите несколько файлов в <source>, и браузер воспроизведет первый поддерживаемый. Текст внутри элемента показывается только в браузерах без поддержки <audio>:

<audio controls preload="metadata">
  <source src="episode.opus" type="audio/ogg; codecs=opus">
  <source src="episode.mp3" type="audio/mpeg">
  <p>Your browser cannot play audio. <a href="episode.mp3">Download the episode</a>.</p>
</audio>

Формат	MIME-тип	Примечания
MP3	`audio/mpeg`	Воспроизводится во всех современных браузерах; надежный выбор, если файл один
AAC (`.m4a`)	`audio/mp4`	Широко поддерживается, хорошее качество при небольшом размере
Opus или Vorbis (`.ogg`, `.webm`)	`audio/ogg`, `audio/webm`	Небольшие файлы; добавьте MP3 как запасной вариант, потому что поддержка в Safari зависит от версии
WAV	`audio/wav`	Без сжатия и большой; подходит для коротких звуковых эффектов

Почему не работает autoplay

Браузеры не позволяют странице самой начинать издавать звук. autoplay или вызов play() до того, как пользователь кликнул или коснулся экрана, отклоняется. Этот пример пытается воспроизвести звук при загрузке, выводит результат, а затем предлагает кнопку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 14px; }
  </style>
</head>
<body>
  <p id="result">Trying to play...</p>
  <button id="play">Play with a click</button>
  <script>
    // Builds a short beep as a WAV file (stand-in for a real sound file)
    function beep(freq, secs) {
      const rate = 8000, n = secs * rate;
      const view = new DataView(new ArrayBuffer(44 + n * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + n * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, n * 2, true);
      for (let i = 0; i < n; i++) view.setInt16(44 + i * 2, Math.sin(2 * Math.PI * freq * i / rate) * 12000, true);
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const sound = new Audio(beep(440, 0.5));
    const result = document.getElementById('result');
    sound.play()
      .then(() => { result.textContent = 'Autoplay worked this time.'; })
      .catch((err) => { result.textContent = 'Autoplay was blocked: ' + err.name; });
    document.getElementById('play').onclick = () => {
      sound.currentTime = 0;
      sound.play()
        .then(() => { result.textContent = 'Playing, because you clicked.'; })
        .catch((err) => { result.textContent = 'Still blocked: ' + err.name; });
    };
  </script>
</body>
</html>

Обычно вы увидите NotAllowedError, ошибку, которую браузер выдает, когда блокирует воспроизведение. Кнопка работает, потому что клик считается разрешением. У каждого браузера есть свои дополнительные правила (Chrome, например, запоминает сайты, где вы часто воспроизводите медиа), поэтому никогда не полагайтесь на autoplay: запускайте звук по действию пользователя и всегда обрабатывайте промис, который возвращает play().

new Audio(url) создает элемент audio в JavaScript, не добавляя его на страницу, и это удобно для звуковых эффектов.

Собственные элементы управления

Скройте встроенный плеер, не указывая controls, а затем управляйте элементом через его JavaScript API: play(), pause(), currentTime, duration, volume и события вроде timeupdate и ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom player</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .player { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 10px; border: 2px solid #e5e7eb; border-radius: 10px; }
    .player button { font: inherit; width: 72px; padding: 6px 0; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
    progress { flex: 1; }
    #time { font-variant-numeric: tabular-nums; font-size: 14px; color: #374151; }
  </style>
</head>
<body>
  <div class="player">
    <button id="toggle" aria-label="Play">Play</button>
    <progress id="bar" value="0" max="1"></progress>
    <span id="time">0.0 s</span>
  </div>
  <audio id="audio"></audio>
  <script>
    function makeWav(notes) {
      const rate = 8000, samples = [];
      for (const [freq, secs] of notes) {
        const n = secs * rate;
        for (let i = 0; i < n; i++) {
          samples.push(Math.sin(2 * Math.PI * freq * i / rate) * 0.4 * Math.min(1, (n - i) / 400));
        }
      }
      const view = new DataView(new ArrayBuffer(44 + samples.length * 2));
      const text = (at, s) => [...s].forEach((c, i) => view.setUint8(at + i, c.charCodeAt(0)));
      text(0, 'RIFF'); view.setUint32(4, 36 + samples.length * 2, true); text(8, 'WAVEfmt ');
      view.setUint32(16, 16, true); view.setUint16(20, 1, true); view.setUint16(22, 1, true);
      view.setUint32(24, rate, true); view.setUint32(28, rate * 2, true);
      view.setUint16(32, 2, true); view.setUint16(34, 16, true);
      text(36, 'data'); view.setUint32(40, samples.length * 2, true);
      samples.forEach((s, i) => view.setInt16(44 + i * 2, s * 32767, true));
      return URL.createObjectURL(new Blob([view], { type: 'audio/wav' }));
    }
    const audio = document.getElementById('audio');
    const toggle = document.getElementById('toggle');
    audio.src = makeWav([[392, 0.5], [440, 0.5], [494, 0.5], [523, 1]]);
    toggle.onclick = () => {
      if (audio.paused) audio.play().catch((err) => { toggle.textContent = err.name; });
      else audio.pause();
    };
    audio.addEventListener('play', () => { toggle.textContent = 'Pause'; toggle.setAttribute('aria-label', 'Pause'); });
    audio.addEventListener('pause', () => { toggle.textContent = 'Play'; toggle.setAttribute('aria-label', 'Play'); });
    audio.addEventListener('timeupdate', () => {
      document.getElementById('bar').value = audio.currentTime / audio.duration || 0;
      document.getElementById('time').textContent = audio.currentTime.toFixed(1) + ' s';
    });
  </script>
</body>
</html>

Кнопка это настоящий <button>, поэтому она работает с клавиатуры, а ее подпись переключается между Play и Pause. В конце файла браузер ставит элемент на паузу и вызывает ended, поэтому кнопка сама возвращается к Play. Если вы делаете свои элементы управления, то берете на себя и то, что встроенные давали бесплатно: поддержку клавиатуры, подписи и регулятор громкости.

Доступность

Никогда не запускайте звук сами. Он прерывает программы чтения с экрана и пугает людей. Запускайте аудио по клику.
Предлагайте расшифровку для подкастов и устной речи. Достаточно ссылки на текстовую версию под плеером, и поисковики смогут ее прочитать.
Оставляйте controls или делайте элементы управления из настоящих кнопок, чтобы аудио можно было поставить на паузу с клавиатуры.

Про видео со звуком, субтитры и постеры читайте на странице видео в HTML; у <audio> большая часть атрибутов и весь JavaScript API такие же.

Частые ошибки

Забытый controls. Без него элемент невидим, и кажется, что ничего не произошло.
Ожидание, что autoplay сработает. Запускайте воспроизведение по клику и обрабатывайте промис от play().
Неправильный путь или тип файла. Откройте URL файла напрямую, чтобы проверить его, и указывайте type в соответствии с реальным форматом (audio/mpeg для MP3).
Загрузка каждого файла в длинном списке. Используйте preload="none" или "metadata".
Фоновая музыка, которую нельзя остановить. Всегда давайте видимый способ поставить на паузу.

Часто задаваемые вопросы

Как добавить аудио на HTML-страницу?

Используйте <audio src="song.mp3" controls></audio>. Атрибут controls показывает плеер браузера с кнопкой воспроизведения, шкалой времени и громкостью. Без него элемент невидим.

Почему аудио не воспроизводится автоматически?

Браузеры блокируют аудио, которое начинается со звуком до того, как пользователь взаимодействовал со страницей. Запускайте воспроизведение по клику через audio.play(). Беззвучный элемент может воспроизводиться автоматически, но для аудио это редко полезно.

Какой формат аудио использовать в HTML?

MP3 воспроизводится во всех современных браузерах, поэтому это надежный выбор для одного файла. AAC в файле .m4a тоже широко поддерживается. Чтобы предложить несколько форматов, используйте элементы <source>.

Как зациклить аудио в HTML?

Добавьте атрибут loop: <audio src="rain.mp3" controls loop>. Когда файл заканчивается, он начинается сначала.

Как воспроизвести звук через JavaScript?

Создайте или выберите элемент audio и вызовите play(), например new Audio('click.mp3').play() внутри обработчика клика. play() возвращает промис, который отклоняется, если браузер блокирует воспроизведение.

Можно ли оформить аудиоплеер HTML?

Лишь немного: можно задать ширину, отступы и display, но кнопки внутри рисует браузер, и в каждом они выглядят по-своему. Для своего вида скройте controls и сделайте собственные элементы управления из кнопок и JavaScript API аудио.

Связанные концепции