new AnalyserNode() — Methode · JavaScript-Referenz

Signatur

new AnalyserNode(context, options)

Beschreibung

Der Konstruktor new AnalyserNode() erzeugt einen Analyseknoten innerhalb eines BaseAudioContext (also eines AudioContext oder OfflineAudioContext). Der Knoten reicht das Audiosignal unverändert weiter und berechnet dabei per schneller Fourier-Transformation (FFT) Frequenzdaten sowie Wellenformdaten im Zeitbereich.

Du verwendest ihn vor allem für Audio-Visualisierungen wie Spektrumanzeigen, Oszilloskope oder Pegelmesser, aber auch zur einfachen Tonhöhen- oder Lautstärkeerkennung, zum Beispiel am Mikrofoneingang. Die Daten liest du mit getByteFrequencyData(), getFloatFrequencyData(), getByteTimeDomainData() oder getFloatTimeDomainData() aus, meist in einer requestAnimationFrame-Schleife.

Gegenüber der älteren Fabrikmethode context.createAnalyser() kannst du beim Konstruktor alle Einstellungen direkt über ein Optionsobjekt setzen. Beide Wege liefern dasselbe Ergebnis.

Parameter

Name	Typ	Default	Beschreibung
$context Pflicht	BaseAudioContext		Der `AudioContext` oder `OfflineAudioContext`, zu dem der Knoten gehören soll.
$options	Object	{}	Optionales Objekt mit Anfangswerten: `fftSize` (`number`, Standard `2048`): Größe der FFT, eine Zweierpotenz von 32 bis 32768. `minDecibels` (`number`, Standard `-100`): unteres Ende des dB-Bereichs für Byte-Frequenzdaten. `maxDecibels` (`number`, Standard `-30`): oberes Ende des dB-Bereichs. `smoothingTimeConstant` (`number`, Standard `0.8`): zeitliche Glättung zwischen 0 und 1. `channelCount`, `channelCountMode`, `channelInterpretation`: allgemeine `AudioNode`-Kanaloptionen.

Rückgabewert

Typ

AnalyserNode

Beschreibung

Ein neuer AnalyserNode, der mit den angegebenen Optionen eingerichtet ist.

Beispiele

Analyseknoten mit Optionen erzeugen

const ctx = new AudioContext();
const analyser = new AnalyserNode(ctx, {
  fftSize: 512,
  smoothingTimeConstant: 0.6,
  minDecibels: -90,
  maxDecibels: -10
});

console.log(analyser.fftSize);           // 512
console.log(analyser.frequencyBinCount); // halbe fftSize

512 256

Frequenzspektrum eines Oszillators auslesen

const ctx = new AudioContext();
const osc = new OscillatorNode(ctx, { frequency: 440 });
const analyser = new AnalyserNode(ctx, { fftSize: 2048 });

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

setTimeout(() => {
  const data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(data);
  // Index mit dem stärksten Ausschlag in eine Frequenz umrechnen
  const peak = data.indexOf(Math.max(...data));
  const hz = peak * ctx.sampleRate / analyser.fftSize;
  console.log(`Spitze bei ca. ${Math.round(hz)} Hz`);
  osc.stop();
}, 500);

Spitze bei ca. 440 Hz

Mikrofon-Pegelanzeige auf einem Canvas

const startMeter = async () => {
  const ctx = new AudioContext();
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const source = new MediaStreamAudioSourceNode(ctx, { mediaStream: stream });
  const analyser = new AnalyserNode(ctx, { fftSize: 1024 });
  source.connect(analyser); // nicht an destination -> keine Rückkopplung

  const canvas = document.querySelector('canvas');
  const g = canvas.getContext('2d');
  const buf = new Float32Array(analyser.fftSize);

  const draw = () => {
    analyser.getFloatTimeDomainData(buf);
    const rms = Math.sqrt(buf.reduce((s, v) => s + v * v, 0) / buf.length);
    g.clearRect(0, 0, canvas.width, canvas.height);
    g.fillStyle = 'limegreen';
    g.fillRect(0, 0, canvas.width * Math.min(rms * 4, 1), canvas.height);
    requestAnimationFrame(draw);
  };
  draw();
};

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

// Wichtig · Fallstricke

fftSize muss eine Zweierpotenz zwischen 32 und 32768 sein, sonst wird ein IndexSizeError ausgelöst. Ist minDecibels größer oder gleich maxDecibels, gibt es ebenfalls einen IndexSizeError.
frequencyBinCount ist immer fftSize / 2. Jeder Wert steht für ein Frequenzband der Breite sampleRate / fftSize.
Autoplay-Regeln: Ein AudioContext startet oft im Zustand suspended. Rufe ctx.resume() nach einer Benutzeraktion auf, sonst liefert der Analyseknoten nur Nullen bzw. -Infinity.
Der Knoten wird nur verarbeitet, wenn er im Audiographen hängt. Bei Mikrofon-Eingängen solltest du ihn nicht an destination anschließen, um Rückkopplungen zu vermeiden. In manchen Browsern musst du den Graphen trotzdem mit dem Ausgang verbinden (z. B. über einen GainNode mit Verstärkung 0).
Große fftSize-Werte verbessern die Frequenzauflösung, kosten aber mehr Rechenzeit und reagieren langsamer auf Änderungen.
Kompatibilität: Der Konstruktor funktioniert in allen aktuellen Browsern. Sehr alte Safari-Versionen (vor 14.1) kennen nur createAnalyser() und teils nur webkitAudioContext.

Siehe auch

AnalyserNode BaseAudioContext.createAnalyser() AnalyserNode.getByteFrequencyData() AnalyserNode.getFloatTimeDomainData() AnalyserNode.fftSize AudioContext new AudioBufferSourceNode()