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

Быстрый ответ

Чтобы установить, идет ли сейчас воспроизведение аудио на вашем HTML5 сайте, используйте свойство paused объекта HTMLAudioElement в JavaScript:

var audio = document.getElementById('myAudio');
console.log(audio.paused ? 'Воспроизведение аудио приостановлено' : 'Аудио воспроизводится');

Если свойство audio.paused имеет значение false, это значит, что аудио в данный момент воспроизводится.

Глубокое понимание аудио-состояний в HTML5

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

Слежение за этапом воспроизведения

Есть и некоторые другие полезные свойства помимо audio.paused. Вот такие, как audio.currentTime и audio.ended, они позволяют определить, находиться ли аудио в начале, еще в процессе воспроизведения или уже закончило играть.

if (!audio.paused) {
  console.log('Производится воспроизведение аудио.');
} else if (audio.ended) {
  console.log('Воспроизведение аудио завершено.');
} else if (audio.currentTime > 0) {
  console.log('Аудио в состоянии паузы, но воспроизведение уже начиналось.');
} else {
  console.log('Воспроизведение ещё не начиналось.');
}

Подробнее об этом расскажет наш спикер на видео

Проверка готовности аудио к воспроизведению

Перед началом воспроизведения убедитесь, что аудиофайл готов к воспроизведению. Свойство HTMLMediaElement.readyState позволяет определить, готов ли аудиофайл к этому.

if (audio.readyState > 2) {
  console.log('Аудио готово к воспроизведению.');
} else {
  console.log('Аудио все еще подготавливается.');
}

Отслеживание событий воспроизведения и паузы

Для немедленной реакции на смену состояния воспроизведения подписывайтесь на события playing и pause. Они помогут вам управлять каждым моментом воспроизведения вашего аудио:

audio.addEventListener('playing', () => {
  console.log('Аудио начало воспроизводиться.');
});

audio.addEventListener('pause', () => {
  console.log('Аудио поставлено на паузу.');
});

Оберните проверки в функцию

Для удобства используйте функцию для проверки состояния аудио. Эта функция позволит быстро узнать, идет ли воспроизведение аудио:

function isAudioPlaying(audioElement) {
  return !audioElement.paused && audioElement.readyState > 2; // Воспроизведение активно, если аудио не на паузе и готово к воспроизведению
}

Визуализация

Хотите увидеть работу воспроизведения аудио в HTML5 в интересной форме? Давайте испольуем систему светофора для наглядной визуализации статуса:

Элемент аудио: 🎵
Идет ли воспроизведение? Посмотрите на сигнал светофора:

let audio = document.querySelector('audio');   // Получаем элемент 'audio'
let isPlaying = !audio.paused;                 // Состояние воспроизведения: зелёный – воспроизводится, красный – на паузе

🚦Сигнал светофора:
- Зелёный (🟢): Аудио воспроизводится!
- Красный (🔴): Воспроизведение аудио приостановлено.

Простой и наглядный способ, не правда ли? Аналогично тому, как работает свойство .paused для определения состояния воспроизведения.

Заглубление в мастерство работы с аудио

Одиночные треки или множественное воспроизведение?

Если на странице одновременно воспроизводится несколько аудиотреков, примените document.getElementsByTagName('audio') и пройдитесь по полученному NodeList, чтобы проверить состояние каждого аудиоэлемента.

Управление воспроизведением по желанию пользователя

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

function toggleAudioPlayback(audioElement) {
  if (isAudioPlaying(audioElement)) {
    audioElement.pause(); // Аналогично нажатию на кнопку "пауза" на пульте диджея
  } else if (audioElement.readyState > 2) {
    audioElement.play();  // Аналогично нажатию на кнопку "play" на пульте диджея
  }
}

Обработка исключений: будьте готовы ко всему

Ожидайте неожиданного, работая с аудиоплеером. Сетевые ошибки, проблемы с декодированием или неудачи при работе с файлами могут вызвать прерывание воспроизведения. В таких случаях используйте конструкцию try-catch:

try {
  toggleAudioPlayback(audio); // Попытаться воспроизвести или приостановить
} catch (error) {
  console.error("Ошибка в работе диджейского пульта:", error);  // У нас случилось непредвиденное!
}

Наилучшие аудио-впечатления для пользователя

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

Полезные материалы

1. HTMLMediaElement – Web APIs | MDN — Полное руководство по API, описывающее аудио/видео возможности в HTML5.
2. HTML Audio/Video DOM Reference — Обширный справочник с примерами от W3Schools, где представлены свойства, связанные с аудио/видео DOM.
3. Быстрое руководство по внедрению HTML5 аудио тега | Articles | web.dev — Пошаговое руководство по подключению основных аудио функций в HTML5.
4. HTML Standard – Событие 'playing' — Подробная информация о событии playing, которая внесена в официальное руководство HTML стандартов.
5. Video – Dive Into HTML5 — Обширное руководство по аудио и видео в HTML5, предоставляющее подробную информацию о внедрении мультимедиа.