AudioBufferSourceNode.loopEnd — Eigenschaft · JavaScript-Referenz

Signatur

AudioBufferSourceNode.loopEnd

Beschreibung

Die Eigenschaft loopEnd eines AudioBufferSourceNode ist eine Fließkommazahl in Sekunden. Sie legt das Ende des Schleifenbereichs fest: Ist loop auf true gesetzt und erreicht die Wiedergabe diese Position, springt sie zurück zu loopStart. Der Standardwert ist 0.

Man nutzt loopEnd zusammen mit loopStart, um nur einen Ausschnitt eines Samples zu wiederholen, z. B. den Sustain-Teil eines Instrumentenklangs, einen Drum-Loop aus einem längeren Mitschnitt oder einen nahtlosen Hintergrund-Loop für Spiele.

Ist loopEnd 0, kleiner oder gleich loopStart oder größer als die Pufferlänge (buffer.duration), wird stattdessen das gesamte Ende des Puffers als Schleifenende verwendet. Die Eigenschaft kann auch während der Wiedergabe geändert werden; die Änderung wirkt sofort.

Parameter

Name	Typ	Default	Beschreibung
$value	number	0	Zeitposition in Sekunden, relativ zum Anfang des Puffers, an der die Schleife endet.

Rückgabewert

Typ

number

Beschreibung

Die aktuelle Schleifenendposition in Sekunden (Standard 0 = Pufferende).

Beispiele

Ausschnitt eines Samples in Schleife abspielen

const ctx = new AudioContext();

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

  const source = ctx.createBufferSource();
  source.buffer = buffer;
  source.loop = true;
  source.loopStart = 1.0; // ab Sekunde 1
  source.loopEnd = 3.5;   // bis Sekunde 3,5
  source.connect(ctx.destination);

  // Start direkt am Schleifenanfang
  source.start(0, source.loopStart);
  console.log(`Loop: ${source.loopStart}s – ${source.loopEnd}s`);
  return source;
};

document.querySelector('#play').addEventListener('click', () => playLoop('drums.mp3'));

Loop: 1s – 3.5s

Schleifenende per Schieberegler live anpassen

const ctx = new AudioContext();
const slider = document.querySelector('#loopEnd'); // <input type="range" min="0" max="1" step="0.01">

const start = async () => {
  const data = await (await fetch('pad.wav')).arrayBuffer();
  const buffer = await ctx.decodeAudioData(data);
  const source = ctx.createBufferSource();
  source.buffer = buffer;
  source.loop = true;
  source.connect(ctx.destination);
  source.start();

  slider.addEventListener('input', () => {
    // Anteil des Reglers auf die Pufferlänge abbilden
    source.loopEnd = Number(slider.value) * buffer.duration;
    console.log('loopEnd =', source.loopEnd.toFixed(2));
  });
};

document.querySelector('#start').addEventListener('click', start, { once: true });

loopEnd = 1.24

Standardwert und synthetischer Puffer

const ctx = new OfflineAudioContext(1, 44100, 44100);
const buffer = ctx.createBuffer(1, 44100, 44100); // 1 Sekunde Stille
const source = new AudioBufferSourceNode(ctx, {
  buffer,
  loop: true,
  loopStart: 0.25,
  loopEnd: 0.75
});
console.log(new AudioBufferSourceNode(ctx).loopEnd);
console.log(source.loopEnd);

0 0.75

// Wichtig · Fallstricke

loopEnd wirkt nur, wenn loop auf true steht.
Der Standardwert 0 bedeutet nicht „Schleife bei 0 s“, sondern „bis zum Pufferende“. Gleiches gilt für Werte ≤ loopStart oder > buffer.duration.
Startet man mit start(when, offset) hinter loopEnd, läuft die Wiedergabe bis zum Pufferende und springt dann zu loopStart.
Knackgeräusche entstehen, wenn Anfang und Ende nicht an Nulldurchgängen liegen – Schleifenpunkte sorgfältig wählen.
Komprimierte Formate wie MP3 fügen beim Dekodieren oft Stille am Anfang/Ende ein; für nahtlose Loops loopStart/loopEnd explizit setzen oder WAV/Ogg verwenden.
Browser: in allen aktuellen Browsern unterstützt; der AudioContext muss meist erst durch eine Nutzerinteraktion gestartet werden (Autoplay-Richtlinie).

Siehe auch

AudioBufferSourceNode AudioBufferSourceNode.loopStart AudioBufferSourceNode.loop AudioBufferSourceNode.start() AudioBuffer BaseAudioContext.decodeAudioData() AudioBufferSourceNode.buffer