HTMLAudioElement

Программное управление аудио через <audio> или new Audio: play/pause/seek + события.

Что это

HTMLAudioElement (наследник HTMLMediaElement) — DOM-обёртка над <audio>. Те же API использует HTMLVideoElement. Управляется JS-методами и слушается через события. Не требует никаких пермишенов кроме autoplay-политики.

Базовое использование

const audio = new Audio('/episodes/ep-01.mp3');
// или document.querySelector('audio')

await audio.play();           // вернёт Promise
audio.pause();
audio.currentTime = 30;       // seek в секундах
audio.volume = 0.5;           // 0..1
audio.playbackRate = 1.5;     // скорость
audio.muted = true;

audio.addEventListener('timeupdate', () => {
  // ~4 раза в сек, обновить UI прогресс-бара
  const progress = audio.currentTime / audio.duration;
});

audio.addEventListener('ended', () => {
  // конец трека → следующий эпизод
});

Основные свойства / события

Свойство Что
currentTime Текущая позиция, сек (R/W — seek)
duration Длительность, сек (NaN пока не загружено)
paused Состояние плеера
volume 0..1
playbackRate 1 = норма
src URL источника
loop, muted, autoplay Флаги
Событие Когда
loadedmetadata duration стал известен
canplay / canplaythrough Готов к воспроизведению
play / pause Изменение состояния
timeupdate Тик прогресса (~4 Hz)
ended Достиг конца
error Ошибка загрузки/декодирования
waiting / playing Буферизация

Поддержка

Везде. Форматы: MP3 — везде; OGG/Opus — все кроме Safari; AAC — везде; FLAC — почти везде.

Подводные камни

  • play возвращает Promise → отлавливай NotAllowedError (autoplay policy: без user gesture браузер блокирует)
  • duration === NaN до события loadedmetadata
  • timeupdate тикает редко (~250ms) — для плавной анимации seek-бара используй requestAnimationFrame
  • На iOS Safari есть особенности с буферизацией и preload
  • Один <audio> нельзя одновременно играть в двух местах — используй Audio несколько раз

Используется в bootcamp

  • Podcast Player — основной плеер эпизодов, обновление прогресс-бара по timeupdate, автопереход по ended
  • JS30 — JavaScript Drum Kit — audio.currentTime = 0; audio.play() для запуска звука по клавише

Ссылки

См. также