AudioProcessingEvent.inputBuffer — Eigenschaft · JavaScript-Referenz

Signatur

AudioProcessingEvent.inputBuffer

Beschreibung

Die Eigenschaft inputBuffer des AudioProcessingEvent liefert einen AudioBuffer mit den Audiodaten, die gerade am Eingang eines ScriptProcessorNode ankommen. Das Ereignis wird immer dann ausgelöst, wenn ein neuer Block mit bufferSize Samples (256 bis 16384) bereitsteht.

Die Anzahl der Kanäle entspricht dem Wert numberOfInputChannels, der bei AudioContext.createScriptProcessor() angegeben wurde. Mit inputBuffer.getChannelData(kanal) bekommt man für jeden Kanal ein Float32Array mit Werten im Bereich von -1.0 bis 1.0.

In der Praxis liest man die Daten aus inputBuffer, verarbeitet sie (z. B. Pegelmessung, Effekte, Aufnahme) und schreibt das Ergebnis in outputBuffer. Die Eigenschaft selbst ist schreibgeschützt. Die Sample-Daten im Puffer lassen sich zwar technisch ändern, das hat aber keinen Einfluss auf die Ausgabe.

Rückgabewert

Typ

AudioBuffer

Beschreibung

Ein AudioBuffer mit den Eingangs-Samples des aktuellen Verarbeitungsblocks. length entspricht der bufferSize des Knotens, numberOfChannels der Anzahl der Eingangskanäle.

Beispiele

Eingang unverändert zum Ausgang durchreichen

const ctx = new AudioContext();
const osc = ctx.createOscillator();
const processor = ctx.createScriptProcessor(4096, 2, 2);

processor.addEventListener('audioprocess', (event) => {
  const { inputBuffer, outputBuffer } = event;
  for (let ch = 0; ch < outputBuffer.numberOfChannels; ch++) {
    const input = inputBuffer.getChannelData(ch);
    const output = outputBuffer.getChannelData(ch);
    output.set(input); // Samples 1:1 kopieren
  }
});

osc.connect(processor).connect(ctx.destination);
osc.start();

Mikrofonpegel (RMS) messen

const startMeter = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const ctx = new AudioContext();
  const source = ctx.createMediaStreamSource(stream);
  const processor = ctx.createScriptProcessor(2048, 1, 1);

  processor.onaudioprocess = ({ inputBuffer }) => {
    const data = inputBuffer.getChannelData(0);
    let sum = 0;
    for (const sample of data) sum += sample * sample;
    const rms = Math.sqrt(sum / data.length);
    console.log(`Pegel: ${(20 * Math.log10(rms || 1e-8)).toFixed(1)} dBFS`);
  };

  source.connect(processor);
  processor.connect(ctx.destination); // nötig, damit das Ereignis in manchen Browsern feuert
};

document.querySelector('#start').addEventListener('click', startMeter);

Pegel: -42.3 dBFS Pegel: -38.7 dBFS ...

Puffer-Eigenschaften prüfen

const ctx = new AudioContext();
const processor = ctx.createScriptProcessor(1024, 2, 2);

processor.onaudioprocess = (event) => {
  const buf = event.inputBuffer;
  console.log(buf.length, buf.numberOfChannels, buf.sampleRate);
  processor.onaudioprocess = null; // nur einmal ausgeben
};

ctx.createOscillator().connect(processor);
processor.connect(ctx.destination);

1024 2 48000

// Wichtig · Fallstricke

Veraltet: AudioProcessingEvent und ScriptProcessorNode gelten als veraltet. Die Verarbeitung läuft im Haupt-Thread und kann bei Last zu Aussetzern und Latenz führen. Für neue Projekte ist AudioWorkletNode mit einem AudioWorkletProcessor vorgesehen, dort kommen die Eingänge als inputs-Array in process() an.

Den Puffer nicht über das Ereignis hinaus speichern. Browser können denselben Speicher für den nächsten Block wiederverwenden, deshalb die Daten bei Bedarf kopieren (z. B. new Float32Array(data) oder slice()).
Ohne verbundene Quelle enthält inputBuffer nur Stille (Nullen).
In Chromium-Browsern feuert audioprocess teils nur, wenn der Knoten auch mit ctx.destination verbunden ist.
Ein AudioContext startet wegen der Autoplay-Regeln oft im Zustand suspended. Er muss nach einer Nutzeraktion mit ctx.resume() gestartet werden.

Siehe auch

AudioProcessingEvent AudioProcessingEvent.outputBuffer AudioProcessingEvent.playbackTime ScriptProcessorNode AudioBuffer.prototype.getChannelData() AudioWorkletNode OfflineAudioCompletionEvent.renderedBuffer