Зацикливание аудио в JavaScript: движение в такт

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

Метод 1. Использование свойства цикла

Один простой способ зациклить звук — установить для свойства цикла аудиоэлемента HTML значение true. Давайте посмотрим на фрагмент кода ниже:

<audio src="audio-file.mp3" loop></audio>

При добавлении атрибута loopк тегу <audio>аудиофайл будет автоматически перезапускаться с начала, как только достигнет конца, создавая непрерывный цикл.

Метод 2. Использование события завершения

Другой подход предполагает использование события endedаудиоэлемента. Когда воспроизведение звука достигает конца, мы можем программно сбросить свойство currentTime до 0, эффективно перезапустив звук. Вот пример:

const audio = new Audio('audio-file.mp3');
audio.addEventListener('ended', () => {
  audio.currentTime = 0;
  audio.play();
});
audio.play();

В этом коде мы создаем объект Audio, присоединяем прослушиватель событий к событию endedи внутри обработчика событий сбрасываем currentTimeв 0, а затем вызовите play(), чтобы перезапустить звук.

Метод 3. Использование API веб-аудио

Для более сложных манипуляций со звуком вы можете использовать API веб-аудио, который обеспечивает больший контроль над воспроизведением звука. Вот упрощенный пример зацикливания звука с помощью API веб-аудио:

const audioContext = new AudioContext();
const audioElement = document.querySelector('audio');
const audioSource = audioContext.createMediaElementSource(audioElement);
const audioGain = audioContext.createGain();
audioSource.connect(audioGain);
audioGain.connect(audioContext.destination);
audioGain.gain.value = 1;
audioElement.addEventListener('ended', () => {
  audioElement.currentTime = 0;
  audioElement.play();
});
audioElement.play();

В этом методе мы создаем объект AudioContextи подключаем источник звука к узлу усиления. Сбрасывая свойство currentTimeв прослушивателе событий ended, мы достигаем желаемого эффекта цикла.

Зацикливание звука в JavaScript возможно различными способами. Вы можете использовать простое свойство loop, событие endedдля сброса звука или погрузиться в более мощный API веб-аудио для расширенного управления. Поэкспериментируйте с этими методами, чтобы создать на своих веб-страницах захватывающий звук.