AudioBufferSourceNode: свойство loopEnd

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2021 года.

Свойство loopEnd интерфейса AudioBufferSourceNode представляет собой число с плавающей точкой, указывающее в секундах, на какой позиции воспроизведения буфера AudioBuffer воспроизведение должно циклически возвращаться ко времени, указанному свойством loopStart. Это используется только в том случае, если свойство loop равно true.

Значение

Число с плавающей точкой, указывающее смещение в секундах от начала буфера аудио, к которому каждый цикл вернётся к началу цикла (то есть, текущее время воспроизведения сбрасывается до AudioBufferSourceNode.loopStart). Это свойство используется только если свойство loop равно true.

Значение по умолчанию равно 0.

Примеры

Установление значения `loopEnd`

В этом примере, при нажатии пользователем "Воспроизвести", мы загружаем аудио дорожку, декодируем её и помещаем в AudioBufferSourceNode.

Затем пример устанавливает значение свойства loop на true, чтобы дорожка циклически воспроизводилась.

Пользователь может установить свойства loopStart и loopEnd с помощью элементов управления ползунком.

Примечание: Вы можете запустить полный пример онлайн (или посмотреть исходный код.)

let audioCtx;
let buffer;
let source;

const play = document.getElementById("play");
const stop = document.getElementById("stop");

const loopstartControl = document.getElementById("loopstart-control");
const loopstartValue = document.getElementById("loopstart-value");

const loopendControl = document.getElementById("loopend-control");
const loopendValue = document.getElementById("loopend-value");

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("rnb-lofi-melody-loop.wav");
    // Decode it
    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
    const max = Math.floor(buffer.duration);
    loopstartControl.setAttribute("max", max);
    loopendControl.setAttribute("max", max);
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

play.addEventListener("click", async () => {
  if (!audioCtx) {
    audioCtx = new AudioContext();
    await loadAudio();
  }
  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.loop = true;
  source.loopStart = loopstartControl.value;
  source.loopEnd = loopendControl.value;
  source.start();
  play.disabled = true;
  stop.disabled = false;
  loopstartControl.disabled = false;
  loopendControl.disabled = false;
});

stop.addEventListener("click", () => {
  source.stop();
  play.disabled = false;
  stop.disabled = true;
  loopstartControl.disabled = true;
  loopendControl.disabled = true;
});

loopstartControl.addEventListener("input", () => {
  source.loopStart = loopstartControl.value;
  loopstartValue.textContent = loopstartControl.value;
});

loopendControl.addEventListener("input", () => {
  source.loopEnd = loopendControl.value;
  loopendValue.textContent = loopendControl.value;
});

Спецификации

Спецификация
Web Audio API # dom-audiobuffersourcenode-loopend

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`loopEnd`	24	12	25	15	7	25	25	14	7	1.5	4.4.3

См. также