MusicVis

Inspiration

We wanted to make the music experience accessible to everyone even those who are hearing impaired by adding visual effects to the music. We especially wanted to target children who are suffering from hearing loss so they can have an interactive environment to enjoy music.

What it does

This website focuses on stimulating your visual senses in two components:

The overall UI design which fits a retro theme with a colorful palette and funky fonts.
The Audio Visualizer which prompts the user to select a song from their library and visualizes its frequency.

How we built it

We used Html/CSS and JavaScript to create the website. With html we prompted the user to select a music .mp3 file from their library and with JavaScript we analyzed the song for its frequencies. With the frequency, we used the Html Canvas element to draw the objects and make them move to the music.

Challenges we ran into

Since this was our first hackathon, we were limited by time and weren't able to implement our idea fully however, we tried our best to make the most of our project by enhancing its UI. Since we also had little experience with JavaScript, most of the night went into learning how to implement the Canvas html element and create visual animations. Because of the time limit, we weren't able to get the objects to move at the frequency of the music but we were able to hardcode the speed.

Accomplishments that we're proud of

We are very proud of the design aspect of our website because its goal was to focus on the visual senses. We wanted to create a musical experience that included the entire website and not just the audio visualizer so our UI design was a very important part of our project. We were also shocked at how we were able to work efficiently with such little sleep and bring most of our ideas to life.

What we learned

We learned a lot about teamwork and collaboration; its not easy to complete a project where each person has unique ideas, however, we managed to get it done. We were also able to learn about JavaScript functions and animations.