AnalyserNode: frequencyBinCount 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⁩.

ThefrequencyBinCount read-only property of theAnalyserNode interface contains the total number of data points available toAudioContextsampleRate. This is half of thevalue of theAnalyserNode.fftSize. The two methods' indices have a linear relationship with the frequencies they represent, between 0 and theNyquist frequency.

Value

An unsigned integer, equal to the number of values thatAnalyserNode.getByteFrequencyData() andAnalyserNode.getFloatFrequencyData() copy into the providedTypedArray.

For technical reasons related to how theFast Fourier transform is defined, it is always half the value ofAnalyserNode.fftSize. Therefore, it will be one of16,32,64,128,256,512,1024,2048,4096,8192, and16384.

Examples

The following example shows basic usage of anAudioContext to create anAnalyserNode, thenrequestAnimationFrame and<canvas> to collect frequency data repeatedly and draw a "winamp bar graph style" output of the current audio input.For more complete applied examples/information, check out ourVoice-change-O-matic demo.

const audioCtx = new AudioContext();const analyser = audioCtx.createAnalyser();analyser.minDecibels = -90;analyser.maxDecibels = -10;// …analyser.fftSize = 256;const bufferLength = analyser.frequencyBinCount;console.log(bufferLength);const dataArray = new Uint8Array(bufferLength);canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);function draw() {  drawVisual = requestAnimationFrame(draw);  analyser.getByteFrequencyData(dataArray);  canvasCtx.fillStyle = "rgb(0 0 0)";  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);  const barWidth = (WIDTH / bufferLength) * 2.5 - 1;  let barHeight;  let x = 0;  for (let i = 0; i < bufferLength; i++) {    barHeight = dataArray[i];    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);    x += barWidth;  }}draw();