Start · Sprachen · JavaScript · Referenz · DelayNode

DelayNode

Schnittstelle

Ein <code>AudioNode</code>, der das Eingangssignal um eine einstellbare Zeit verzögert an den Ausgang weitergibt. Grundbaustein für Echo-, Chorus- und Flanger-Effekte.

seit JavaScript Baseline: alle modernen Browser (Web Audio API) Kategorie: webapi

Signatur

interface DelayNode extends AudioNode

Beschreibung

DelayNode ist eine Verzögerungsleitung in der Web Audio API: Das Audiosignal kommt am Eingang an und erscheint erst nach einer festgelegten Zeit am Ausgang. Der Knoten hat genau einen Eingang und einen Ausgang. Die Anzahl der Ausgangskanäle entspricht immer der des Eingangs.

Die Verzögerung steuerst du über die Eigenschaft delayTime. Das ist ein AudioParam mit der Rate a-rate. Du kannst sie also automatisieren, zum Beispiel mit setValueAtTime() oder linearRampToValueAtTime(), oder mit einem OscillatorNode modulieren. Die Obergrenze legst du einmalig beim Erzeugen fest, mit maxDelayTime. Ohne Angabe ist sie 1 Sekunde. Zulässig ist ein Wert unter 180 Sekunden.

Einsatzgebiete:

  • Echo und Feedback-Delay: Das verzögerte Signal wird über einen GainNode kleiner als 1 an den DelayNode zurückgeführt.
  • Chorus und Flanger: Eine kurze Verzögerung (1–30 ms) wird per LFO moduliert.
  • Zeitlicher Abgleich von Signalwegen oder einfache räumliche Effekte, etwa ein Haas-Effekt.

Instanzen erzeugst du mit new DelayNode(context, options) oder mit der Fabrikmethode BaseAudioContext.createDelay(maxDelayTime). Ein DelayNode ist der einzige Knoten, der Zyklen im Audiographen erlaubt. Jeder Rückkopplungskreis muss deshalb einen DelayNode enthalten.

Parameter

Name Typ Default Beschreibung
$context Pflicht BaseAudioContext Der AudioContext oder OfflineAudioContext, zu dem der Knoten gehört (Konstruktor).
$options.delayTime number 0 Anfangswert der Verzögerung in Sekunden, Bereich 0 bis maxDelayTime.
$options.maxDelayTime number 1 Maximal mögliche Verzögerung in Sekunden. Muss größer als 0 und kleiner als 180 sein, sonst wird ein NotSupportedError ausgelöst.
$options.channelCount / channelCountMode / channelInterpretation number | string 2 / "max" / "speakers" Übliche AudioNode-Optionen zur Kanalbehandlung.

Rückgabewert

Typ
DelayNode
Beschreibung
Der neue Verzögerungsknoten. Seine Eigenschaft delayTime (AudioParam, nur lesbar) steuert die aktuelle Verzögerung in Sekunden.

Beispiele

Einfaches Delay erzeugen und anschließen

const ctx = new AudioContext();

// Variante 1: Konstruktor
const delay = new DelayNode(ctx, { delayTime: 0.5, maxDelayTime: 2 });
// Variante 2: Fabrikmethode
// const delay = ctx.createDelay(2); delay.delayTime.value = 0.5;

const osc = new OscillatorNode(ctx, { frequency: 440 });
osc.connect(delay).connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.2); // kurzer Ton, erklingt 0,5 s später

console.log(delay.delayTime.value, delay.delayTime.maxValue);
0.5 2

Echo mit Rückkopplung (Feedback-Delay)

const ctx = new AudioContext();
const audioEl = document.querySelector('audio');
const source = ctx.createMediaElementSource(audioEl);

const delay = new DelayNode(ctx, { delayTime: 0.35, maxDelayTime: 1 });
const feedback = new GainNode(ctx, { gain: 0.4 }); // < 1, sonst Aufschaukeln!
const wet = new GainNode(ctx, { gain: 0.5 });

// Trockenes Signal
source.connect(ctx.destination);
// Effektweg mit Schleife: delay -> feedback -> delay
source.connect(delay);
delay.connect(feedback).connect(delay);
delay.connect(wet).connect(ctx.destination);

document.querySelector('button').addEventListener('click', async () => {
  await ctx.resume();
  audioEl.play();
});

Delay-Zeit automatisieren und per LFO modulieren (Chorus)

const ctx = new AudioContext();
const delay = ctx.createDelay(0.05);
delay.delayTime.value = 0.015; // 15 ms Grundverzögerung

// LFO moduliert delayTime um ±3 ms
const lfo = new OscillatorNode(ctx, { frequency: 0.8 });
const depth = new GainNode(ctx, { gain: 0.003 });
lfo.connect(depth).connect(delay.delayTime);
lfo.start();

// Zusätzlich: sanfter Übergang auf 25 ms innerhalb von 2 Sekunden
const now = ctx.currentTime;
delay.delayTime.setValueAtTime(0.015, now);
delay.delayTime.linearRampToValueAtTime(0.025, now + 2);

// Wichtig · Fallstricke

  • maxDelayTime ist fest: Du kannst die Obergrenze nach dem Erzeugen nicht mehr ändern. Werte für delayTime darüber werden stillschweigend auf das Maximum begrenzt. Plane deshalb gleich genug Spielraum ein, zum Beispiel 2–5 s für taktsynchrone Echos. Ein großes Maximum belegt aber auch mehr Pufferspeicher.
  • Rückkopplung: Zyklen im Graphen sind nur erlaubt, wenn sie einen DelayNode enthalten. Liegt der Feedback-Gain bei 1 oder darüber, schaukelt sich das Signal auf. Das kann bis zur Übersteuerung gehen und Gehör sowie Lautsprecher gefährden.
  • Mindestverzögerung in Zyklen: Innerhalb einer Schleife beträgt die tatsächliche Verzögerung mindestens einen Render-Block (128 Samples, bei 48 kHz etwa 2,7 ms), auch wenn delayTime kleiner ist.
  • Knacksen vermeiden: Springt delayTime.value abrupt auf einen neuen Wert, entstehen Klickgeräusche. Nutze für Übergänge besser setTargetAtTime() oder linearRampToValueAtTime().
  • Nachklingen: Der Knoten gibt nach dem Ende der Quelle noch bis zu delayTime Sekunden Audio aus. Bei Rückkopplung kann das deutlich länger sein.
  • Autoplay-Richtlinien: Ein AudioContext startet oft im Zustand "suspended". Rufe ctx.resume() nach einer Nutzerinteraktion auf.
  • Kompatibilität: Alle aktuellen Browser unterstützen die Schnittstelle. Den Konstruktor new DelayNode() gibt es erst in neueren Versionen (etwa Chrome 55, Firefox 53, Safari 14.1). Für sehr alte Browser nimm createDelay(). Das veraltete webkitAudioContext kannte nur createDelayNode().