Start · Sprachen · JavaScript · Referenz · new DelayNode()

new DelayNode()

Methode

Erzeugt einen <code>DelayNode</code>, der ein Audiosignal um eine einstellbare Zeit (in Sekunden) verzögert an den Ausgang weitergibt.

seit JavaScript Baseline: alle modernen Browser (Konstruktor seit Kategorie: webapi

Signatur

new DelayNode(context, options)

Beschreibung

Der Konstruktor new DelayNode() erzeugt einen Audioknoten der Web Audio API, der eine Verzögerungsstrecke (Delay-Line) umsetzt: Was am Eingang ankommt, erscheint erst nach delayTime Sekunden am Ausgang. Einen Knoten per Konstruktor zu erzeugen ist die moderne Alternative zur Fabrikmethode BaseAudioContext.createDelay(). Der Vorteil: Du kannst alle Optionen direkt beim Erzeugen in einem Objekt übergeben.

Typische Einsatzgebiete sind Echo- und Slapback-Effekte, Chorus, Flanger (mit einem OscillatorNode, der delayTime moduliert) und das zeitliche Angleichen von Signalwegen. Für ein Echo mit mehreren Wiederholungen baust du eine Rückkopplungsschleife aus DelayNode und GainNode. Das ist erlaubt, weil ein DelayNode in einem Zyklus die nötige Verzögerung liefert.

Die Eigenschaft delayTime ist ein AudioParam (a-rate). Du kannst sie also zeitgenau automatisieren, zum Beispiel mit setValueAtTime() oder linearRampToValueAtTime(), oder ein anderes Signal damit verbinden. Die größtmögliche Verzögerung legst du einmalig mit maxDelayTime fest. Danach lässt sie sich nicht mehr ändern.

Parameter

Name Typ Default Beschreibung
$context Pflicht BaseAudioContext Der AudioContext oder OfflineAudioContext, zu dem der Knoten gehören soll.
$options DelayOptions {} Optionales Objekt mit Einstellungen für den Knoten (siehe die folgenden Einträge).
$options.delayTime number 0 Anfangswert der Verzögerung in Sekunden. Er muss zwischen 0 und maxDelayTime liegen.
$options.maxDelayTime number 1 Größtmögliche Verzögerung in Sekunden. Erlaubt ist ein Wert größer als 0 und kleiner als 180. Lässt sich später nicht mehr ändern.
$options.channelCount number 2 Anzahl der Kanäle, die beim Hoch- oder Heruntermischen der Eingänge verwendet wird.
$options.channelCountMode "max" | "clamped-max" | "explicit" "max" Legt fest, wie die Kanalzahl des Ausgangs bestimmt wird.
$options.channelInterpretation "speakers" | "discrete" "speakers" Legt fest, wie Kanäle beim Hoch- oder Heruntermischen zugeordnet werden.

Rückgabewert

Typ
DelayNode
Beschreibung
Ein neuer DelayNode mit genau einem Eingang und einem Ausgang. Die Verzögerung liest und steuerst du über den AudioParam delayTime.

Beispiele

Einfaches Slapback-Echo auf einen Oszillator

const ctx = new AudioContext();
const osc = new OscillatorNode(ctx, { frequency: 440 });
const delay = new DelayNode(ctx, { delayTime: 0.12, maxDelayTime: 1 });

// Direktsignal und verzögertes Signal parallel ausgeben
osc.connect(ctx.destination);
osc.connect(delay).connect(ctx.destination);

osc.start();
osc.stop(ctx.currentTime + 0.3);
console.log(delay.delayTime.value);
0.11999999731779099

Echo mit Rückkopplung (Feedback-Schleife)

const ctx = new AudioContext();
const audioEl = document.querySelector('audio');
const source = new MediaElementAudioSourceNode(ctx, { mediaElement: audioEl });

const delay = new DelayNode(ctx, { delayTime: 0.35, maxDelayTime: 2 });
const feedback = new GainNode(ctx, { gain: 0.45 }); // < 1, sonst schaukelt es sich auf
const wet = new GainNode(ctx, { gain: 0.6 });

source.connect(ctx.destination);          // Direktsignal (dry)
source.connect(delay);
delay.connect(feedback).connect(delay);   // Schleife
delay.connect(wet).connect(ctx.destination);

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

Verzögerung automatisieren und per Schieberegler steuern

const ctx = new AudioContext();
const delay = new DelayNode(ctx, { maxDelayTime: 5 });

// in 2 Sekunden sanft von 0 auf 0.5 s ansteigen lassen
delay.delayTime.setValueAtTime(0, ctx.currentTime);
delay.delayTime.linearRampToValueAtTime(0.5, ctx.currentTime + 2);

const slider = document.querySelector('#delay'); // <input type="range" min="0" max="5" step="0.01">
slider.addEventListener('input', () => {
  delay.delayTime.setTargetAtTime(Number(slider.value), ctx.currentTime, 0.05);
});

// Wichtig · Fallstricke

  • maxDelayTime steht fest: Der Wert wird nur beim Erzeugen gesetzt. Ist er 0 oder negativ oder mindestens 180, wirft der Konstruktor einen NotSupportedError. Ein zu großer Wert kostet unnötig Speicher, denn der interne Puffer wächst mit der Abtastrate.
  • Werte außerhalb des Bereichs: delayTime-Werte über maxDelayTime werden stillschweigend auf den erlaubten Bereich begrenzt.
  • Rückkopplung: Halte den Gain in einer Feedback-Schleife immer unter 1. Sonst steigt der Pegel ungebremst an und kann Lautsprecher und Gehör schädigen. Ohne DelayNode sind Zyklen im Audiograph verboten und werden stummgeschaltet.
  • Autoplay-Regeln: Ein AudioContext startet in vielen Browsern im Zustand suspended. Rufe ctx.resume() nach einer Nutzeraktion auf, etwa in einem Klick-Handler.
  • Kompatibilität: Den Konstruktor gibt es in allen modernen Browsern, in Safari ab Version 14.1. Für sehr alte Browser (auch webkitAudioContext) nimmst du ctx.createDelay(maxDelayTime) als Ausweichlösung.
  • Bei sehr kleinen Verzögerungen in einer Schleife liegt die Mindestverzögerung bei einem Render-Quantum (128 Samples, bei 48 kHz etwa 2,7 ms).