Signatur
Beschreibung
Die Eigenschaft fftSize eines AnalyserNode ist ein unsigned long. Sie gibt an, wie viele Samples pro Analysefenster in die Fast Fourier Transform (FFT) eingehen. Der Wert muss eine Zweierpotenz zwischen 32 und 32768 sein. Voreingestellt ist 2048.
Von fftSize hängen direkt zwei Dinge ab:
frequencyBinCountist immerfftSize / 2. So viele Werte lieferngetByteFrequencyData()undgetFloatFrequencyData().getByteTimeDomainData()undgetFloatTimeDomainData()füllen bis zufftSizeWerte, also die Wellenform des aktuellen Fensters.
Mit einem größeren Wert wird die Frequenzauflösung feiner (sampleRate / fftSize Hz pro Bin), die Analyse reagiert aber träger auf Änderungen und kostet mehr Rechenzeit. Kleine Werte wie 256 oder 512 passen gut zu schnellen Balken-Visualisierungen. Große Werte wie 8192 oder mehr eignen sich für genaue Spektralanalysen, etwa für Stimmgeräte oder die Tonhöhenerkennung.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 2048 | Neuer Wert beim Setzen: eine Zweierpotenz von 32 bis 32768. |
Rückgabewert
unsigned long.Beispiele
fftSize setzen und frequencyBinCount auslesen
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
console.log(analyser.fftSize); // Standardwert
analyser.fftSize = 512;
console.log(analyser.frequencyBinCount); // immer fftSize / 2
// Frequenzauflösung pro Bin berechnen
const hzPerBin = audioCtx.sampleRate / analyser.fftSize;
console.log(`${hzPerBin.toFixed(2)} Hz pro Bin`);Wellenform (Oszilloskop) vom Mikrofon zeichnen
const canvas = document.querySelector('canvas');
const ctx2d = canvas.getContext('2d');
const start = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const audioCtx = new AudioContext();
const source = audioCtx.createMediaStreamSource(stream);
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
// Zeitbereichsdaten: Puffer der Länge fftSize
const data = new Uint8Array(analyser.fftSize);
const draw = () => {
requestAnimationFrame(draw);
analyser.getByteTimeDomainData(data);
ctx2d.clearRect(0, 0, canvas.width, canvas.height);
ctx2d.beginPath();
const step = canvas.width / data.length;
data.forEach((v, i) => {
const y = (v / 255) * canvas.height;
i === 0 ? ctx2d.moveTo(0, y) : ctx2d.lineTo(i * step, y);
});
ctx2d.stroke();
};
draw();
};
document.querySelector('#start').addEventListener('click', start);Ungültige Werte abfangen
const analyser = new AudioContext().createAnalyser();
const setFftSize = (node, size) => {
try {
node.fftSize = size;
} catch (err) {
console.warn(`${size} abgelehnt: ${err.name}`);
}
return node.fftSize;
};
console.log(setFftSize(analyser, 1000)); // keine Zweierpotenz
console.log(setFftSize(analyser, 4096));// Wichtig · Fallstricke
Ungültige Werte lösen eine Exception aus: Ist der Wert keine Zweierpotenz oder liegt er außerhalb von 32 bis 32768, wirft der Browser eine DOMException vom Typ IndexSizeError. Der alte Wert bleibt dann erhalten.
Puffergrößen passend wählen: Für Frequenzdaten braucht man ein Array der Länge frequencyBinCount, für Zeitbereichsdaten eines der Länge fftSize. Ist ein Array zu kurz, werden überzählige Werte stillschweigend verworfen. Wenn sich fftSize zur Laufzeit ändert, müssen die Typed Arrays neu angelegt werden.
Performance und Latenz: Große Fenster wie 32768 lösen tiefe Frequenzen fein auf. Sie glätten dafür schnelle Änderungen und benötigen mehr Rechenzeit pro Frame. Zusätzlich glättet smoothingTimeConstant die Frequenzdaten über die Zeit.
Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Sehr alte WebKit-Versionen erlaubten nur Werte bis 2048. Der AudioContext muss wegen der Autoplay-Richtlinien meist durch eine Nutzeraktion gestartet werden, zum Beispiel per Klick.