Joey Kapusta

Gameplay Programmer

Audio Visualizer

Visualize Audio

Summary

This audio visualizer was made for the web with JavaScript and Canvas. It draws based on the sound data streaming from an audio element on the page, also allowing post-processes. Reverb can be added to the song, and various tints and effects can be toggled on the view. The central node can be moved and resized, and premade color schemes can be selected to complement the song.

My Contribution

This was a solo project, fully created by me. I used the browser's built in audio controls to grab the current state of the song to modify the draw variables within the canvas. The post-processes were accomplished by grabbing the current state of the canvas, modifying its pixel data through various algorithms, then overwriting the draw frame.

Moving Forward

This was a fun project that helped me understand how audio actually works in code, and improved my skills with Canvas. I enjoyed making the visuals as cool as possible and figuring out how to pull off the special effects. I think it turned out well. It's fun to watch, though there's not much interesting to do with the audio itself. I could enjoy making more experiencial apps, but I probably couldn't be a sound designer.