AudioBufferSourceNode：loopEnd 属性

基线 广泛可用

此功能已得到很好的确立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2021 年 4 月.

AudioBufferSourceNode 接口的 loopEnd 属性指定一个浮点数，以秒为单位，表示在播放 AudioBuffer 时应该循环回 loopStart 属性指示的时间的偏移量。仅当 loop 属性为 true 时才使用此属性。

值

一个浮点数，指示音频缓冲区中每次循环返回到循环开始处的偏移量（以秒为单位）（即，当前播放时间重置为 AudioBufferSourceNode.loopStart）。仅当 loop 属性为 true 时才使用此属性。

默认值为 0。

示例

设置 loopEnd

在此示例中，当用户按下“播放”时，我们将加载音频轨道，对其进行解码，并将其放入 AudioBufferSourceNode 中。

然后，该示例将 loop 属性设置为 true，以便轨道循环并播放轨道。

用户可以使用 范围控件 设置 loopStart 和 loopEnd 属性。

注意：您可以 运行完整的示例（或 查看源代码）。

js
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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅