AudioBufferSourceNode.loop — Eigenschaft · JavaScript-Referenz

Signatur

AudioBufferSourceNode.loop

Beschreibung

Mit loop steuerst du, ob ein AudioBufferSourceNode seinen AudioBuffer in einer Endlosschleife abspielt. Ist der Wert true, springt die Wiedergabe nach Erreichen des Pufferendes, oder von loopEnd falls gesetzt, zurück an loopStart und läuft weiter, bis stop() aufgerufen wird. Der Standardwert ist false.

Typische Einsatzfälle sind Hintergrundmusik in Spielen, Umgebungsgeräusche (Regen, Wind, Motorbrummen), Drum-Loops in Sequenzern und Sampler, die eine gehaltene Note durch Wiederholen eines Sustain-Abschnitts verlängern.

Zusammen mit loopStart und loopEnd (in Sekunden) lässt sich ein bestimmter Abschnitt des Puffers wiederholen. Sind beide Werte 0 (Standard), wird der gesamte Puffer wiederholt. Die Eigenschaft kann auch während der Wiedergabe geändert werden. Setzt du sie dann auf false, spielt der Knoten bis zum Pufferende weiter und endet dort.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` aktiviert die Schleifenwiedergabe, `false` deaktiviert sie.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Knoten in einer Schleife abspielt, sonst false.

Beispiele

Hintergrundmusik endlos abspielen

const ctx = new AudioContext();

const playLoop = async (url) => {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await ctx.decodeAudioData(arrayBuffer);

  const source = ctx.createBufferSource();
  source.buffer = audioBuffer;
  source.loop = true; // Endlosschleife
  source.connect(ctx.destination);
  source.start();
  return source;
};

document.querySelector('#play').addEventListener('click', async () => {
  await ctx.resume(); // Autoplay-Richtlinie
  const music = await playLoop('/audio/ambient.mp3');
  console.log('Loop aktiv:', music.loop);
});

Loop aktiv: true

Nur einen Abschnitt wiederholen (loopStart/loopEnd)

const ctx = new AudioContext();

// 2 Sekunden Sinuston synthetisch erzeugen
const buffer = ctx.createBuffer(1, ctx.sampleRate * 2, ctx.sampleRate);
const data = buffer.getChannelData(0);
for (let i = 0; i < data.length; i++) {
  data[i] = Math.sin(2 * Math.PI * 440 * (i / ctx.sampleRate)) * 0.2;
}

const source = new AudioBufferSourceNode(ctx, {
  buffer,
  loop: true,
  loopStart: 0.5,
  loopEnd: 1.5
});
source.connect(ctx.destination);
source.start();
source.stop(ctx.currentTime + 5); // nach 5 s beenden

console.log(source.loop, source.loopStart, source.loopEnd);

true 0.5 1.5

Schleife während der Wiedergabe umschalten

const ctx = new AudioContext();
const buffer = ctx.createBuffer(1, ctx.sampleRate, ctx.sampleRate);
buffer.getChannelData(0).fill(0.05);

const source = ctx.createBufferSource();
source.buffer = buffer;
source.loop = true;
source.connect(ctx.destination);
source.start();

source.addEventListener('ended', () => console.log('Wiedergabe beendet'));

// Nach 3 Sekunden Schleife beenden – der aktuelle Durchlauf spielt aus
setTimeout(() => {
  source.loop = false;
  console.log('Loop deaktiviert');
}, 3000);

Loop deaktiviert Wiedergabe beendet

// Wichtig · Fallstricke

Kein automatisches Ende: Mit loop = true wird das ended-Ereignis erst nach stop() (oder nach dem Abschalten der Schleife und dem Auslaufen des Puffers) ausgelöst. Ein vergessener stop()-Aufruf hält die Quelle dauerhaft aktiv.
Einmalig startbar: Ein AudioBufferSourceNode lässt sich nur einmal starten. Für einen Neustart musst du einen neuen Knoten erzeugen. Das ist günstig, weil der AudioBuffer wiederverwendet werden kann.
Knackser an der Schleifengrenze: Beginnt oder endet der wiederholte Abschnitt nicht in einem Nulldurchgang, entstehen hörbare Klicks. MP3-Dateien enthalten oft Stille am Anfang oder Ende, die das nahtlose Wiederholen stört. Setze dann loopStart und loopEnd passend oder nutze WAV/OGG ohne Auffüllung.
Ungültige Grenzen: Ist loopStart >= loopEnd oder liegen die Werte außerhalb der Pufferdauer, wird der gesamte Puffer wiederholt.
Autoplay: Browser starten einen AudioContext meist im Zustand suspended. Rufe ctx.resume() nach einer Nutzeraktion auf.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Die Konstruktor-Schreibweise new AudioBufferSourceNode(ctx, { loop: true }) fehlt in sehr alten Safari-Versionen, dort funktioniert ctx.createBufferSource().

Siehe auch

AudioBufferSourceNode AudioBufferSourceNode.loopStart AudioBufferSourceNode.loopEnd AudioBufferSourceNode.start() AudioScheduledSourceNode.stop() AudioBuffer BaseAudioContext.createBufferSource()