understanding getByteTimeDomainData and getByteFrequencyData in web audio

Mozilla 's documentation describes the difference between getFloatTimeDomainData and getFloatFrequencyData, which I summarize below. Mozilla docs reference the Web Audio experiment ; the voice-change-o-matic. The voice-change-o-matic illustrates the conceptual difference to me (it only works in my Firefox browser; it does not work in my Chrome browser).

TimeDomain/getFloatTimeDomainData

  • TimeDomain functions are over some span of time.
  • We often visualize TimeDomain data using oscilloscopes.
  • In other words:
    • we visualize TimeDomain data with a line chart,
    • where the x-axis (aka the "original domain") is time
    • and the y axis is a measure of a signal (aka the "amplitude").
  • Change the voice-change-o-matic "visualizer setting" to Sinewave to see getFloatTimeDomainData(...)

visualizer-setting to Sinewave illustrates TimeDomain data like an oscilloscope

Frequency/getFloatFrequencyData

  • Frequency functions (GetByteFrequencyData) are at a point in time; i.e. right now; "the current frequency data"
  • We sometimes see these in mp3 players/ "winamp bargraph style" music players (aka "equalizer' visualizations).
  • In other words:
    • we visualize Frequency data with a bar graph
    • where the x-axis (aka "domain") are frequencies or frequency bands
    • and the y-axis is the strength of each frequency band
  • Change the voice-change-o-matic "visualizer setting" to Frequency bars to see getFloatFrequencyData(...)

visualizer-setting to sinewave illustrates Frequency data like an mp3 player

Fourier Transform (aka Fast Fourier Transform/FFT)

  • Another way to think about "time domain vs frequency" is shown this diagram from Fast Fourier Transform wikipedia
    • getFloatTimeDomainData gives you the chart on on the top (x-axis is Time)
    • getFloatFrequencyData gives you the chart on the bottom (x-axis is Frequency)
    • a Fast Fourier Transform (FTT) converts the Time Domain data into Frequency data, in other words, FTT converts the first chart to the second chart.

Fast Fourier Transform (FFT) converts Time Domain data to Frequency data original source https://en.wikipedia.org/wiki/Fast_Fourier_transform#/media/File:FFT_of_Cosine_Summation_Function.svg


getByteTimeDomainData (and the newer getFloatTimeDomainData) return an array of the size you requested - its frequencyBinCount, which is calculated as half of the requested fftSize. That array is, of course, at the current sampleRate exposed on the AudioContext, so if it's the default 2048 fftSize, frequencyBinCount will be 1024, and if your device is running at 44.1kHz, that will equate to around 23ms of data.

The byte values do range between 0-255, and yes, that maps to -1 to +1, so 128 is zero. (It's not volts, but full-range unitless values.)

If you use getFloatFrequencyData, the values returned are in dB; if you use the Byte version, the values are mapped based on minDecibels/maxDecibels (see the minDecibels/maxDecibels description).