Signatur
Beschreibung
Die Eigenschaft loopStart eines AudioBufferSourceNode legt den Startpunkt eines Schleifenbereichs fest, angegeben in Sekunden relativ zum Anfang des AudioBuffer. Sie wirkt nur, wenn loop auf true steht. Erreicht die Wiedergabe loopEnd, springt sie an die Position loopStart zurück.
Typische Anwendungen sind Sampler und Instrumente mit Sustain-Schleife: Die Einschwingphase (Attack) eines Samples wird einmal abgespielt, danach wiederholt sich nur ein ruhiger Mittelteil. Auch Hintergrundmusik für Spiele mit Intro und anschließendem nahtlosem Loop lässt sich so umsetzen, ohne den Buffer aufzuteilen.
Der Standardwert ist 0. Ist loopEnd gleich 0 (Standard) oder kleiner als bzw. gleich loopStart, verwendet die Engine als Schleifenbereich den gesamten Buffer von 0 bis buffer.duration. Werte werden intern auf den Bereich 0 bis buffer.duration begrenzt.
Die Eigenschaft darf während der Wiedergabe geändert werden; die Änderung wirkt beim nächsten Schleifendurchlauf bzw. sofort auf die Schleifenlogik. Die Wiedergabe startet trotzdem am offset-Argument von start(), nicht automatisch bei loopStart.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 0 | Position in Sekunden (Gleitkommazahl, ≥ 0) innerhalb des Buffers, an der die Schleife neu beginnt. Wird beim Setzen zugewiesen: source.loopStart = 1.5. |
Rückgabewert
0).Beispiele
Intro einmal, dann Mittelteil in Schleife
const ctx = new AudioContext();
const playWithIntro = async (url) => {
const response = await fetch(url);
const buffer = await ctx.decodeAudioData(await response.arrayBuffer());
const source = ctx.createBufferSource();
source.buffer = buffer;
source.loop = true;
source.loopStart = 4.0; // nach 4 s Intro
source.loopEnd = 20.0; // bis 20 s schleifen
source.connect(ctx.destination);
source.start(); // startet bei 0, schleift dann 4–20 s
console.log(`Schleife: ${source.loopStart}s – ${source.loopEnd}s`);
return source;
};
document.querySelector('#play').addEventListener('click', () => {
ctx.resume();
playWithIntro('musik/level1.ogg');
});Standardwert und Verhalten ohne loopEnd
const ctx = new AudioContext();
const buffer = ctx.createBuffer(1, ctx.sampleRate * 2, ctx.sampleRate); // 2 s Stille
const source = new AudioBufferSourceNode(ctx, { buffer, loop: true });
console.log(source.loopStart); // 0
source.loopStart = 0.5;
// loopEnd ist 0 → Schleife läuft über den gesamten Buffer (0–2 s)
console.log(source.loopStart, source.loopEnd);Schleifenstart per Schieberegler live anpassen
const ctx = new AudioContext();
const slider = document.querySelector('#loop-start'); // <input type="range" step="0.01">
const setupLoop = (buffer) => {
const source = new AudioBufferSourceNode(ctx, {
buffer,
loop: true,
loopStart: 0,
loopEnd: buffer.duration
});
source.connect(ctx.destination);
source.start();
slider.max = buffer.duration;
slider.addEventListener('input', () => {
// Wert muss kleiner als loopEnd bleiben
source.loopStart = Math.min(Number(slider.value), source.loopEnd - 0.01);
});
};// Wichtig · Fallstricke
- Nur mit
loop = truewirksam – ohne aktivierte Schleife wirdloopStartignoriert. - Ist
loopEnd0oder ≤loopStart, schleift der gesamte Buffer – ein häufiger Grund, warum „loopStart nicht funktioniert“. ImmerloopEndexplizit setzen. start()beginnt beimoffset(Standard0), nicht beiloopStart. Soll direkt im Schleifenbereich gestartet werden:source.start(0, source.loopStart).- Für knackfreie Schleifen sollten Start- und Endpunkt auf Nulldurchgängen der Wellenform liegen. Die Sekundenwerte werden auf Sample-Positionen abgebildet; bei ungenauen Werten entstehen Klicks.
- Komprimierte Formate wie MP3 fügen beim Dekodieren oft Stille (Encoder-Delay) am Anfang ein, wodurch sich Schleifenpunkte verschieben können.
- Kompatibilität: in allen modernen Browsern unterstützt; alte WebKit-Versionen benötigten
webkitAudioContext.