AnalyserNode: fftSize property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

ThefftSize property of theAnalyserNode interface is an unsigned long value and represents the window size in samples that is used when performing aFast Fourier Transform (FFT) to get frequency domain data.

Value

An unsigned integer, representing the window size of the FFT, given in number of samples. A higher value will result in more details in the frequency domain but fewer details in the amplitude domain.

Must be a power of 2 between 2^5 and 2^15, so one of:32,64,128,256,512,1024,2048,4096,8192,16384, and32768. Defaults to2048.

Exceptions

IndexSizeErrorDOMException: Thrown if the value set is not a power of 2, or is outside the allowed range.

Examples

The following example shows basic usage of anAudioContext to create anAnalyserNode, thenrequestAnimationFrame and<canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.For more complete applied examples/information, check out ourVoice-change-O-matic demo (seeapp.js lines 108–193 for relevant code).

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 sourcefunction 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();