AnalyserNode.smoothingTimeConstant — Eigenschaft · JavaScript-Referenz

Signatur

AnalyserNode.smoothingTimeConstant

Beschreibung

Die Eigenschaft smoothingTimeConstant eines AnalyserNode steuert die zeitliche Glättung der Frequenzdaten. Bei jedem Analyse-Schritt wird der neue Betrag pro Frequenz-Bin mit dem Wert des vorherigen Frames gemischt: X̂[k] = τ · X̂_alt[k] + (1 − τ) · |X[k]|, wobei τ die smoothingTimeConstant ist.

Ein Wert von 0 schaltet die Glättung ab – das Spektrum reagiert sofort, flackert aber stark. Werte nahe 1 lassen die Anzeige träge und ruhig wirken, weil ältere Frames lange nachwirken. Der Standardwert 0.8 ist ein guter Kompromiss für die meisten Spektrum-Visualisierungen.

Die Glättung wirkt nur auf die Frequenzdaten, also auf getFloatFrequencyData() und getByteFrequencyData(). Die Zeitbereichsdaten aus getByteTimeDomainData() bzw. getFloatTimeDomainData() (Oszilloskop-Darstellung) werden nicht beeinflusst.

Man kann die Eigenschaft direkt setzen oder über das Options-Objekt des Konstruktors new AnalyserNode(context, { smoothingTimeConstant }) vorgeben. Für schnelle Pegel- oder Beat-Erkennung nimmt man niedrige Werte (0–0.5), für ruhige Equalizer-Balken höhere (0.8–0.95).

Parameter

Name	Typ	Default	Beschreibung
$value	number	0.8	Beim Setzen: Glättungsfaktor im Bereich `0` bis `1` (jeweils einschließlich). Werte außerhalb lösen einen `IndexSizeError` aus.

Rückgabewert

Typ

number

Beschreibung

Der aktuelle Glättungsfaktor als Double zwischen 0 und 1; Standardwert 0.8.

Beispiele

Standardwert auslesen und anpassen

const ctx = new AudioContext();
const analyser = ctx.createAnalyser();

console.log(analyser.smoothingTimeConstant);

// Spektrum soll schneller reagieren
analyser.smoothingTimeConstant = 0.3;
console.log(analyser.smoothingTimeConstant);

0.8 0.3

Glättung direkt im Konstruktor festlegen

const ctx = new AudioContext();
const analyser = new AnalyserNode(ctx, {
  fftSize: 2048,
  smoothingTimeConstant: 0.9 // ruhige Equalizer-Balken
});

console.log(analyser.frequencyBinCount, analyser.smoothingTimeConstant);

1024 0.9

Spektrum-Visualisierung mit einstellbarer Glättung

const ctx = new AudioContext();
const canvas = document.querySelector('canvas');
const g = canvas.getContext('2d');
const slider = document.querySelector('#smoothing'); // <input type="range" min="0" max="1" step="0.05">

const start = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const source = ctx.createMediaStreamSource(stream);
  const analyser = new AnalyserNode(ctx, { fftSize: 256 });
  source.connect(analyser);

  slider.addEventListener('input', () => {
    analyser.smoothingTimeConstant = Number(slider.value);
  });

  const data = new Uint8Array(analyser.frequencyBinCount);
  const barWidth = canvas.width / data.length;

  const draw = () => {
    analyser.getByteFrequencyData(data);
    g.clearRect(0, 0, canvas.width, canvas.height);
    data.forEach((v, i) => {
      const h = (v / 255) * canvas.height;
      g.fillRect(i * barWidth, canvas.height - h, barWidth - 1, h);
    });
    requestAnimationFrame(draw);
  };
  draw();
};

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

Ungültige Werte abfangen

const analyser = new AudioContext().createAnalyser();

try {
  analyser.smoothingTimeConstant = 1.5;
} catch (err) {
  console.log(err.name);
}
console.log(analyser.smoothingTimeConstant);

IndexSizeError 0.8

// Wichtig · Fallstricke

Wertebereich: Werte kleiner als 0 oder größer als 1 werfen eine DOMException vom Typ IndexSizeError; der alte Wert bleibt erhalten. Nutzereingaben also vorher begrenzen, z. B. mit Math.min(1, Math.max(0, v)).
Nur Frequenzdaten: Auf Zeitbereichsdaten (getByteTimeDomainData()) hat die Eigenschaft keinen Einfluss.
Abhängig von der Abfragerate: Geglättet wird nur, wenn tatsächlich Frequenzdaten abgefragt werden. Rufst du getByteFrequencyData() unregelmäßig auf (etwa in einem gedrosselten Hintergrund-Tab), wirkt die Glättung dadurch anders als bei gleichmäßigem Aufruf mit 60 fps.
Wert 1: Damit friert das Spektrum praktisch auf dem ersten Wert ein, weil neue Daten gar nicht mehr einfließen. Das ist selten sinnvoll.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Konstruktor new AnalyserNode() mit Options-Objekt fehlt in sehr alten Safari-Versionen; dort createAnalyser() verwenden.
Der AudioContext startet wegen Autoplay-Regeln oft im Zustand suspended und muss nach einer Nutzeraktion mit resume() gestartet werden.

Siehe auch

AnalyserNode AnalyserNode.getByteFrequencyData() AnalyserNode.getFloatFrequencyData() AnalyserNode.fftSize AnalyserNode.minDecibels AnalyserNode.maxDecibels BaseAudioContext.createAnalyser()