AudioBufferSourceNode: loopStart-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 loopStart-Eigenschaft des AudioBufferSourceNode-Interfaces ist ein Gleitkommawert, der in Sekunden angibt, wo im AudioBuffer der Neustart der Wiedergabe erfolgen muss.

Der Standardwert der loopStart-Eigenschaft ist 0.

Wert

Eine Gleitkommazahl, die den Offset in Sekunden angibt, ab dem jede Schleife während der Wiedergabe im Audiopuffer beginnen soll. Dieser Wert wird nur verwendet, wenn der loop-Parameter auf true gesetzt ist.

Beispiele

Setzen von loopStart

In diesem Beispiel wird, wenn der Benutzer "Play" drückt, ein Audiotrack geladen, dekodiert und in einen AudioBufferSourceNode eingesetzt.

Das Beispiel setzt dann die loop-Eigenschaft auf true, sodass der Track in Schleife läuft, und spielt den Track ab.

Der Benutzer kann die Eigenschaften loopStart und loopEnd mithilfe von Range-Steuerelementen einstellen.

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-loopstart

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
loopStart

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch