When the loop goes through each element of the frequency array, it grabs an element’s value and assigns to the height. Since I was representing frequency changes as unsigned 8-bit integers, ranging from 0 to 255, I stored it in a special array Uint8Array.The next step was to assign the values of array elements to the bar height in the loop. Therefore, all I needed was to connect my source to the AnalyserNode directly and get the data. This is the AnalyserNode.It helps us to get the generated data from the audio stream without changing the audio source. In web audio api, there is an interface which provides real-time frequency and time-domain analysis information. I needed somehow to retrieve the data from an audio file and visualize it with the bars. Since I had got the initial look of the visualizer, all I had to do was to hook up frequency shifts of the audio file into the visualizer.įortunately, there was a simple yet powerful mechanism, called Web Audio API, which provided functionalities to manipulate audio content within web applications. After applying the style I got this: Audio AnalyserĪny audio files are stored as a set of bits on a computer system.

It’s time to splash some gradient colours. As you can see the visualizer looks ugly at this point.

How to create a visualizer