P5 audio visualizer

P5 audio visualizer

Thanks to one of the most amazing YouTube personalities Daniel Shiffman, I have done a lot more Java and JavaScript programming. One of the most interesting things for me has always been using audio for more than just listening. So when he released video about using p5sound library to visualizing music, I had to try it myself.

Follow the leader

I really enjoy following along with tutorials, especially when dealing with new programming languages. It shows me my own progress when I follow along and find my self thinking "I could do this bit differently." whether it is to be more optimized or future proofing for my own ideas. This time I wanted to include ability to use your own mp3 for the visualization so there were two key modifications to the code.


Calling p5dom library to the rescue. Amazing library for interacting with html elements was very useful in this project. I managed to get the progress of the music to link to a value slider but I admit that I didn't get the p5sound library to play ball with jumping in the playback when slider was manipulated by the user. I might return to this project at some point but I may have to either wait for the p5sound library to be updated or look into debugging it myself.


Problem with visualizing music in a linear pattern is the strength and resolution. There is massive detail in sound and doing justice that detail in it's full glory can be difficult. Second problem is that sound we listen often has minute details on further end of the spectrum that you either have to ignore the smallest ones or reduce the resolution of your visualization to show them.
My solution to the issue was to keep threshold for strength and dynamically increase the resolution when needed.