Аудио в HTML

Аудио HTML

Элемент <audio> используется для воспроизведения аудиофайла на веб-странице.

Элемент HTML <audio>

Чтобы воспроизвести аудиофайл в HTML, используйте элемент <audio> с одним или несколькими элементами <source> для аудиофайлов.

Пример

Аудиоплеер с элементами управления и двумя форматами источника.

Аудиоплеер с атрибутом controls и двумя файлами-источниками (horse.ogg и horse.mp3), а также резервный текст для браузеров, не поддерживающих элемент audio.

> Вывод: полная HTML-страница

Prompt

Аудиоплеер с атрибутом controls и двумя файлами-источниками (horse.ogg и horse.mp3), а также резервный текст для браузеров, не поддерживающих элемент audio.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовое аудио</title>
</head>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает элемент audio.
</audio>

</body>
</html>

Аудио HTML - Как Это Работает

Атрибут controls добавляет элементы управления аудио, такие как воспроизведение, пауза и громкость. Элемент <source> позволяет предложить несколько аудиофайлов; браузер использует первый распознанный формат. Текст между <audio> и </audio> отображается только в браузерах, не поддерживающих этот элемент.

Автовоспроизведение <audio> HTML

Чтобы аудиофайл запускался автоматически, используйте атрибут autoplay.

Примечание: Браузеры на базе Chromium обычно блокируют автовоспроизведение, но автовоспроизведение без звука всегда разрешено. Добавьте muted после autoplay, чтобы аудио запускалось автоматически (но без звука).

Автовоспроизведение

Аудиоплеер, который запускается автоматически.

Аудиоплеер с элементами управления, который также запускается автоматически с помощью атрибута autoplay, с источниками ogg и mp3 и резервным текстом.

> Вывод: полная HTML-страница

Prompt

Аудиоплеер с элементами управления, который также запускается автоматически с помощью атрибута autoplay, с источниками ogg и mp3 и резервным текстом.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Автовоспроизведение аудио</title>
</head>
<body>

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает элемент audio.
</audio>

</body>
</html>

Автовоспроизведение без звука

Аудиоплеер с автовоспроизведением без звука, чтобы работать в браузерах Chromium.

Аудиоплеер с элементами управления, который автоматически воспроизводится без звука (атрибуты autoplay и muted), с источниками ogg и mp3 и резервным текстом, чтобы он мог запускаться автоматически в браузерах на Chromium.

> Вывод: полная HTML-страница

Prompt

Аудиоплеер с элементами управления, который автоматически воспроизводится без звука (атрибуты autoplay и muted), с источниками ogg и mp3 и резервным текстом, чтобы он мог запускаться автоматически в браузерах на Chromium.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Автовоспроизведение аудио без звука</title>
</head>
<body>

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает элемент audio.
</audio>

</body>
</html>

Поддержка Браузеров

Элемент <audio> поддерживается всеми современными браузерами (начиная с Chrome 4, Edge 9, Firefox 3.5, Safari 4 и Opera 10.5).

Форматы Аудио HTML

HTML поддерживает три аудиоформата: MP3, WAV и OGG. MP3 работает во всех основных браузерах; WAV и OGG работают во всех, кроме того, что OGG не поддерживается в Safari (а поддержка WAV и OGG в Edge начинается с Edge 79).

Аудио HTML - Типы Медиа

Типы медиа для поддерживаемых форматов: MP3 — это audio/mpeg, OGG — это audio/ogg, а WAV — это audio/wav.

Аудио HTML - Методы, Свойства и События

HTML DOM определяет методы, свойства и события для элемента <audio>. Они позволяют загружать, воспроизводить и приостанавливать аудио, задавать длительность и громкость, а также реагировать на такие события, как запуск или приостановка аудио.

Теги Аудио HTML

Связанные с аудио теги: <audio> (определяет звуковое содержимое) и <source> (определяет несколько медиаресурсов для <video> и <audio>).