Music Visualizer

Inspiration

We are all big fans of music and first-time hackathon participants so we wanted to create something that we were all passionate about!

What it does

Our music visualizer lets users upload their own MP3 files. It analyzes the audio using the Web Audio API and generates preset patterns that react to the music in real-time.

How we built it

We built it using HTML,CSS, JavaScript, as well as the Web Audio API.

Challenges we ran into

The main challenges we ran into were with analyzing the music as it came in as well as the creation of the patterns. The patterns/themes gave a lot of trouble as they kept on breaking.

Accomplishments that we're proud of

This whole project is something we are proud of. We are all first timers so we are quite proud of what we accomplished with how limited our knowledge was. We learned a lot and and got a working project done!

What we learned

We all learned a lot mainly more in-depth knowledge on our coding languages, git, GitHub, and how to code as a team!

What's next for Music Visualizer

We plan on adding more patterns and more customization.

Built With

Submitted to

ShellHacks 2024

Created by

I worked on the analysis side of the project using the Web Audio API. Using this built-in browser feature, I was able to take input files, analyze them, and use the information from that analysis to inform and guide preset patterns.
I also worked on some of the patterns!

George Ulloa
I worked on the themes and integrating them into the code. I also worked on setting up the Web Audio API as well as the animations for the "draw" theme.

KevinP-09
I worked on the design of the website, creating a flexible layout by using CSS Flexbox. I ensured the website was user friendly and interactive with subtle animations to make it more interactive.

amalya4