HTML-тег <audio>

Характеристики

• Тип: медиа, блочный, статичный, семантический
• Назначение: Воспроизводит аудиоконтент на странице.
• Родители: Любые HTML-теги, которые могут содержать фразовый или встроенный контент.
• Потомки: Элементы <source>, <track>, альтернативный контент (текст).
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• src — URL аудиофайла.
• controls — Показывает элементы управления воспроизведением.
• autoplay — Автоматически начинает воспроизведение аудио.
• loop — Зацикливает воспроизведение аудио.
• muted — Отключает звук аудио по умолчанию.
• preload — Указывает, как загружать аудио (auto, metadata, none).
• crossorigin — Управляет поведением CORS для загрузки аудио.
• disablepictureinpicture — Отключает режим «картинка в картинке».
• disableremoteplayback — Отключает удалённое воспроизведение аудио.

Пример использования

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

Использование в JavaScript

// Получение элемента <audio>
const audioElement = document.querySelector('audio');

// Воспроизведение аудио
audioElement.play();

// Пауза аудио
audioElement.pause();

// Изменение источника аудио
audioElement.src = 'new-audio.mp3';

Рекомендации по обеспечению доступности (a11y)

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

Полезные ссылки