Building an Audio Visualizer for Razer Chroma Keyboards
By: Antoine Solnichkin
Tags: Programming, JavaScript, Software Development, Web Development, Science

b — Analyzing The Signal

Before going any further, we need to know a bit more about what are time-based and frequency-based representation of signals. When you take a look at an oscilloscope, you are looking at a time based representation of a signal. It means that the oscilloscope is plotting the amplitude of a signal over time.

Let’s take our previous schema, annotated this time :

In this schema, a time representation highlights the fact that the amplitude of the signal is zero at t = 0. Over the course of a second, it reaches a maximum amplitude before reaching zero again. Now if you remember correctly, we want to build an equalizer effect, which has the following appearance :

Now, remember when I said that sound can be described as a sinusoidal wave form? It is true.. but incomplete.

c — Understanding Frequency Based Representation

Before understanding the utility of the Analyser Node, we need to dig a bit deeper into signal processing and focus a bit more on a concept called Fourier Transforms. In reality, audio signals look like this :

Credits : Uygar Uçar on dsp.stackexchange.com

As you can see, it is far from the sinusoïd that we described in the first section. But is it that far away from it?

Visually yes, but not mathematically.

In fact, what if I told you that the signal observed above is just the superposition of many sinusoidal signals? When you’re listening to your favourite music, you are physically listening to the superposition of pure sinusoïds. This process repeats over time and builds the melody of your song.

With this schema, we have the building blocks of how frequency based representation. To go from the chaotic signal to the pure sinusoïds that represent our signal, we use a mathematical tool call Fourier Transforms.

Fourier Transforms allow us to find the original pure sinusoïds that made our signals and display their distribution over time. A schema speaks a million words.

Does this Frequency Based Distribution sounds familiar to you?

Exactly! This is the equalizer effect. What the signal varies over time, the distribution will also vary and provides a very cool equalizer effect.

d — Building The Almighty Equalizer Effect

Back to our architecture, the AnalyserNode comes very handy for our project. This node provides native FFT (Fast Fourier Transforms, a faster way to perform Fourier Transforms) on the stream provided as well as the frequency distribution of the signal. First, let’s inject the node in our code.

From there, the AnalyserNode is binded to a memory object that is updated everytime the audio context receives new data from the audio stream.

As a side note, how often does the audio context receive new data from the stream?

From my experiments, it seems that the Web Audio API refreshes its context at a 144Hz rate, meaning that we get 144 new arrays every single second.

In order to have a nice equalizer effect on our keyboard, there are some parameters that we need to adjust : the Fourier Transform size (also called FFT size) and the frequency resolution.

Back to the science.

As I explained earlier, sound is the superposition of multiple signals, each one having its own frequency. As humans, we are not able to hear all the frequencies available, in fact you are able to hear frequencies between 20Hz and 20 KHz.