AnalyserNode: fftSize-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Die fftSize-Eigenschaft der AnalyserNode-Schnittstelle ist ein unsigned long-Wert und repräsentiert die Fenstergröße in Samples, die verwendet wird, wenn eine Fast Fourier Transform (FFT) durchgeführt wird, um Frequenzbereichsdaten zu erhalten.

Wert

Ein nicht signierter Integer, der die Fenstergröße der FFT in Form der Anzahl von Samples darstellt. Ein höherer Wert führt zu mehr Details im Frequenzbereich, jedoch weniger Details im Amplitudenbereich.

Muss eine Zweierpotenz zwischen 2^5 und 2^15 sein, also einer der folgenden Werte: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384 und 32768. Der Standardwert ist 2048.

Ausnahmen

IndexSizeError DOMException

Wird ausgelöst, wenn der festgelegte Wert keine Zweierpotenz ist oder außerhalb des erlaubten Bereichs liegt.

Beispiele

Das folgende Beispiel zeigt die grundlegende Verwendung eines AudioContext, um einen AnalyserNode zu erstellen. Danach werden requestAnimationFrame und <canvas> genutzt, um wiederholt Zeitbereichsdaten zu sammeln und eine "Oszilloskop-artige" Darstellung des aktuellen Audioeingangs zu zeichnen. Für vollständigere angewandte Beispiele/Informationen sehen Sie sich unser Voice-change-O-matic Demo an (siehe app.js Zeilen 108–193 für den relevanten Code).

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

// …

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current audio source

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";

  canvasCtx.beginPath();

  const sliceWidth = (WIDTH * 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v * HEIGHT) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();

Spezifikationen

Specification
Web Audio API
# dom-analysernode-fftsize

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch