Search code examples
audioffthtml5-audioweb-audio-api

What does the FFT data in the Web Audio API correspond to?

I've used the FFT data from the Analyser node using the getByteFrequencyData method in the Web Audio API to create a spectrum visualizer as shown below:

Spectrum Visualizer

In this instance I have 256 bins of data. What exactly do the numbers in this correspond to? Is it the decibel level of each frequency component. If so how do I know what the value of the frequency of each bin corresponds to?

I would like to know so I can experiment in building a graphic eq and so would like to know at which points to indicate the filter bands. Ideally I'd like to represent frequencies from 20Hz to 20kHz and plot intervals between those accordingly.

Thanks for any help.

Solution

  • yes,getByteFrequencyData results in a normalized array of values between 0 and 255. (it copies the data to the array it gets passed-in).

    the frequency bands are split equally, so each element N of your array corresponds to:

    N * samplerate/fftSize

    so, the first bin is 0.
    and, assuming a samplerate of 44100 and a <analyzerNode>.fftSize of 512 the second would be: 86.13 Hz, and so on...

    you will find these two questions and answers useful, on dsp and on SO:

    Note that the length of your sampledata is half the <analyzerNode>.fftSize, effectively limiting the frequency-range to half the samplerate.