3D Music Visualizer

Inspiration

We wanted to make a music visualization idea I've had for a while and learn more about WebGL and the web audio API.

What it does

Visualizes any music included in the directory and referred to in the HTML (JavaScript can't auto-detect tracks).

How we built it

We started by getting the WebGL mesh to respond to data we made up. We then hooked up the web audio API and plugged in the data we were getting into the mesh (after transforming and scaling it to something we could work with). Lastly we added controls to animate the camera movement and tried (unsuccessfully) to get more smoothing to work between bars.

Challenges we ran into

The most challenging part was trying to get the smoothing to work between bars (we never got it to work very well) but other challenges included transforming the data into a diagonal 3D format and understanding exactly how the technology that was new to us worked.

Accomplishments that we're proud of

Getting the audio visualization to work in full 3D, including the diagonal format of lows to highs! In this project we built several pieces of code that could be really useful in future projects and can easily be extended to create other types of similar visualizations.