Остановка и переключение аудио в HTML5: решение проблемы

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

Для приостановки аудио в HTML5 используйте метод pause() и установите время воспроизведения в начальное положение с помощью currentTime = 0:

document.querySelector('audio').pause();
document.querySelector('audio').currentTime = 0;

Такая конструкция приостанавливает воспроизведение и перематывает аудиофайл на начало.

Эффективное управление несколькими аудиокомпонентами

При работе с несколькими аудиофайлами для предотвращения дублирования кода рекомендуется определить функцию. Пример такой функции:

function stopAllAudiosInTheirTracks() {
  document.querySelectorAll('audio').forEach(function(audio) {
    audio.pause();
    audio.currentTime = 0;
  });
}

Такая функция позволяет одновременно остановить воспроизведение всех аудиофайлов.

Управление каждым аудиофайлом индивидуально с помощью идентификаторов

Уникальные идентификаторы позволяют контролировать каждый аудиофайл отдельно. Это равносильно наличию личного помощника для каждого трека!

<audio id="astley" src="rickroll.mp3"></audio>
<audio id="queen" src="bohemian.mp3"></audio>

Для управления конкретным аудиофайлом применяйте его идентификатор:

function kindlyStopTheMusic(id) {
  var audio = document.getElementById(id);
  if (audio) {
    audio.pause();
    audio.currentTime = 0;
  }
}

Для остановки аудио просто вызовите функцию с необходимым идентификатором:

kindlyStopTheMusic('astley'); // Останавливает Рика Эстли: он вас не подведет

Динамическое создание аудиоэлементов

Создание аудиоэлементов «на лету» с помощью document.createElement("audio") обеспечивает значительную гибкость. Мощность такого подхода можно сравнить с эффектом, который производит Танос одним щелчком!

function createAudioAndPlugIt(url) {
  var audio = new Audio(url);
  audio.pause();
  audio.currentTime = 0;
  return audio;
}

Такая функция создает новый аудиоэлемент, приостанавливает его и возвращает для дальнейшей работы.

Расширение класса Audio для повторного использования

Качественный код не допускает дублирования. Добавив в класс Audio собственный метод остановки, мы можем упростить процесс управления аудио:

Audio.prototype.stop = function() {
  this.pause();
  this.currentTime = 0;
};

Теперь остановить аудио можно максимально просто:

var myAudio = new Audio('beethoven.mp3');
myAudio.stop(); // Бетховен на паузе. Тишь и покой!

Особенности обработки события "canplaythrough" в браузере Chrome

Chrome может вести себя непредсказуемо в отношении события "canplaythrough". По этой причине после использования желательно удалить обработчик события:

audioElement.addEventListener('canplaythrough', function() {
  // Код, обрабатывающий аудио
  this.removeEventListener('canplaythrough', arguments.callee);
});

Это можно воспринимать как момент, когда Бэтмен тихо исчезает, незаметно завершив свое дело.

Совместимость с различными браузерами

Не все браузеры одинаково поддерживают код. Имейте в виду особенности поддержки HTML5 аудио в Chrome и Firefox.

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

Допустим, наш аудиоплеер — это игрушечный автомобиль:

До: [🎵▶️(В движении...)] Действие: [⏹️(Остановить)] После: [🎵🅿️(Припаркован)]

Следующий код поместит нашу игрушечную машинку (🎵) обратно в гараж:

audioElement.pause(); // Бросимся на тормоз!
audioElement.currentTime = 0; // Возвращаемся в гараж!

Избегайте проблем с производительностью и ошибками

Для обеспечения высокой производительности рекомендуется использовать смарт-подход. Для сброса аудио лучше перезагрузить источник:

audioElement.src = audioElement.src; // Вернемся на старт, но обдуманно.
audioElement.pause(); // Дайте системе переключиться на паузу.

Не нагружайте ваше приложение лишней работой: пусть оно работает легко и быстро.

Избегайте присвоения src пустой строки. Это может привести к созданию «черной дыры», которая затянет ваше спокойствие и породит ошибки!

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

1. HTMLMediaElement – Web APIs | MDN — Подробный обзор управления медиаэлементами в HTML5.
2. HTML – Функция остановки аудио в HTML5 – Stack Overflow — Советы сообщества по управлению HTML5 аудио.
3. Аудио в HTML5 — современный обзор | HTML5 Doctor — Информация о шаблонах и совместимости HTML5 аудио с браузерами.
4. Введение в Web Audio API | web.dev — Начинающим о Web Audio API.
5. HTML Standard — Официальная спецификация метода pause HTMLMediaElement.