AudioBufferSourceNode: loopEnd 屬性

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

AudioBufferSourceNode 介面的 loopEnd 屬性是一個浮點數，以秒為單位指定，在播放 AudioBuffer 期間，應在哪個時間點迴圈回 loopStart 屬性指定的時間。僅當 loop 屬性為 true 時才使用此屬性。

值

一個浮點數，表示迴圈中每個迴圈將返回到迴圈開頭的音訊緩衝區的偏移量（以秒為單位），即當前播放時間將重置為 AudioBufferSourceNode.loopStart。僅當 loop 屬性為 true 時才使用此屬性。

預設值為 0。

示例

設定 `loopEnd`

在此示例中，當用戶按下“播放”按鈕時，我們將載入一個音軌，對其進行解碼，然後將其放入 AudioBufferSourceNode 中。

然後，該示例將 loop 屬性設定為 true，以便音軌迴圈播放。

使用者可以使用 range 控制元件來設定 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;
});