AudioBufferSourceNode: loopEnd-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 loopEnd-Eigenschaft des AudioBufferSourceNode-Interfaces ist eine Gleitkommazahl, die in Sekunden angibt, an welchem Offset die Wiedergabe des AudioBuffer zurück zur Zeit, die durch die loopStart-Eigenschaft angegeben wird, wiederholen soll. Dies wird nur verwendet, wenn die loop-Eigenschaft true ist.

Wert

Eine Gleitkommazahl, die das Offset in Sekunden im Audiopuffer angibt, bei dem jede Schleife wieder an den Anfang der Schleife zurückkehrt (das heißt, die aktuelle Abspielzeit wird auf AudioBufferSourceNode.loopStart zurückgesetzt). Diese Eigenschaft wird nur verwendet, wenn die loop-Eigenschaft true ist.

Der Standardwert ist 0.

Beispiele

loopEnd setzen

In diesem Beispiel laden wir beim Drücken der "Play"-Taste einen Audiotrack, dekodieren ihn und legen ihn in einem AudioBufferSourceNode ab.

Das Beispiel setzt dann die loop-Eigenschaft auf true, so dass der Track in einer Schleife wiedergegeben wird, und spielt den Track ab.

Der Benutzer kann die Eigenschaften loopStart und loopEnd mit Bereichsreglern 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-loopend

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch