Остановка и переключение аудио в 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
пустой строки. Это может привести к созданию «черной дыры», которая затянет ваше спокойствие и породит ошибки!
Полезные материалы
- HTMLMediaElement – Web APIs | MDN — Подробный обзор управления медиаэлементами в HTML5.
- HTML – Функция остановки аудио в HTML5 – Stack Overflow — Советы сообщества по управлению HTML5 аудио.
- Аудио в HTML5 — современный обзор | HTML5 Doctor — Информация о шаблонах и совместимости HTML5 аудио с браузерами.
- Введение в Web Audio API | web.dev — Начинающим о Web Audio API.
- HTML Standard — Официальная спецификация метода pause HTMLMediaElement.