People with hearing loss cannot listen to music. We want to improve their experiences by enabling them to visualize music, so that they’re able to interact with it using a different sense.

What it does

In the project folder, the user uploads an audio file, which our program then processes to store the amplitude and frequency of the audio at each instance of time. The program analyzes the frequency of the sounds to determine the hue of the colors and the amplitude to determine the size and number of the forms visualized. As an entire song is parsed through, exciting and vibrant animations are generated live as they convey the changes in the technical qualities of the music. Its results are both aesthetic and informative for the user.

How we built it

Our program primarily uses a JavaScript library called p5.js, which contains many useful functions for analyzing audio files and creating digital drawings. We developed the program in a software called Processing, which is designed for coding creative applications and 2D output. The body of the program is a JavaScript file that encodes information about the frequencies and amplitudes found in the given audio file in a way that can be used as parameters for the visuals. In addition, the visualizer can be displayed on a web browser by opening up an HTML file that contains the JavaScript described above.

Challenges we ran into

One of our challenges included developing a method for analyzing the frequency from the audio because the p5.js library does not contain a function for that. Additionally, we had difficulty getting user input directly from a web page as JavaScript is unable to obtain a pathway to a file on a local machine due to security issues.

Accomplishments that we're proud of

We’re proud of learning to use p5.js, Processing, JavaScript and utilizing the functions of the p5 sound library in a short time frame. We also focused on the user’s experience with our program, so that it is easy to use and creates a dynamic and educational experience.

What we learned

We learned how to incorporate functions from the p5 sound library to generate a user-interactive experience and different ways to analyze audio.

What's next for Music You Can See

We would like to expand on our audio visualizer in a few ways. For example, The user uploads an audio file directly onto the website, which is loaded into our program, and its mood or genre, which determines the color family of the visuals.This implementation would allow the program to incorporate different color families for their emotive qualities in order to convey the meaning of the music, in addition to its technical qualities, to the people with hearing disabilities. Another way to further develop our project would be to educate the users about the frequencies of the song by transcribing them into music notes.

Built With

Share this project: