AudioBufferSourceNode: loop-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Die loop-Eigenschaft der AudioBufferSourceNode-Schnittstelle ist ein Boolean, der angibt, ob das Audioelement erneut abgespielt werden soll, wenn das Ende des AudioBuffer erreicht ist.

Der Standardwert der loop-Eigenschaft ist false.

Wert

Ein Boolean, der true ist, wenn das Looping aktiviert ist; andernfalls ist der Wert false.

Wenn Looping aktiviert ist, beginnt der Ton zur Zeit, die als Startpunkt angegeben ist, zu spielen, wenn start() aufgerufen wird. Sobald die Zeit erreicht ist, die durch die loopEnd-Eigenschaft angegeben wird, wird die Wiedergabe zur Zeit fortgesetzt, die durch loopStart angegeben ist.

Beispiele

loop einstellen

In diesem Beispiel laden wir, wenn der Benutzer "Play" drückt, einen Audiotrack, dekodieren ihn und legen ihn in eine AudioBufferSourceNode.

Das Beispiel setzt dann die loop-Eigenschaft auf true, sodass der Track wiederholt wird, und spielt den Track ab.

Der Benutzer kann die Eigenschaften loopStart und loopEnd mit Bereichssteuerungen einstellen.

Hinweis: Sie können das vollständige Beispiel live ausführen (oder den Quellcode ansehen.)

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;
});

Spezifikationen

Specification
Web Audio API
# dom-audiobuffersourcenode-loop

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch