Creating an Audio Visualizer with p5.js

There's an interesting project I've been looking about. It's called p5 js. p5. js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!

It's a project focused on doing something fun and amazing with as less technical codes as possible. This does coincide with my goal to create some fun stuff that could easily be implemented and shared with anyone.

For this case, I'm kind of interested in making my own Audio Visualizer, and p5 js got me covered there.

Some random stuff about how audio visualizers work

Things that I (might) know:

• Sound is a wave. It is being saved on a computer in terms of digital waves. Like it uses a bunch of 1 and 0 to determine the height of each wave. So you can imagine having a million of these bits being used to describe the whole waveform structure of a single song.

• But how do we represent a wave in such a way that we can use it in audio visualizers? Maybe use the raw waves themselves as data input? Nope. We'll just get random, almost undistinguishable wave data. So, how do we get the data? That is where Fourier transform comes in.

• Fourier Transform essentially dissects a wavelength to distinguish what vibrations (or notes) were currently being played. You can imagine a sound as a collection of multiple vibrations playing simultaneously, and Fourier transform can analyze what vibrations are currently being played between time point(s). This data then could be used by our audio visualizer.

Implementing Fast Fourier Transform

In this part, we discuss how we implement FFT for our program.

Sike. We don't have to. p5 js sound library already has this function ready for us, so yep. That's nice.

Creating the Audio Visualizer

We used p5 js here as the canvas for drawing music waves. The algorithms follows like:

1. We load the music into p5js sound library

2. We play the music and loop the FFT analysis.

   1. In each analysis, we get the current FFT wave detail.

   2. We draw bars to reflect the data array.

And that's basically it.