Colorful Notes

Turn your music into art!

Comment

Inspiration

We like music and arts. Also we are doing audio visualization and webapp for our term projects.

What it does

Colorful Notes turns your music into beautiful abstract arts.

How We Built it

  1. The user interacts with the website, which is written using Django, javascript, html5 and css5. The microphone captures the user's song, which is converted into a JS blob object by web audio API. The blob is then converted to a .wav file by Recorderjs and written to Google Cloud.
  2. The .wav file is processed on Cloud Storage by a python program written with Pyaudio, Pydub, and Aubio. The program analyzes each segment of the audio, with beat strength, tempo, and key each representing an RBG value, which matches to a color family. Then we choose a specific color in that family based on the pitch of the segment. For each segment, we then draw a dot of that color on our image.
  3. The website reads the returned jpg file from cloud and displays it to the user. (Due to time constraints, the Google Cloud Storage part is not yet implemented, but the website and audio-processing program works fine individually)

Challenges We ran into

  1. Installing modules.
  2. Working with audio on web
  3. Deploying website on Google Cloud (still not resolved)

Accomplishments that We're proud of

  1. Learn a ton of new stuff!
  2. We were able to determine the beat strength.
  3. We built a pretty website that works with audio.

What We learned

pyscreenshot, pyaudio, pyscreenshot, pydub, aubio, more advanced tkinter, Github, Django, Bootstrap, html5, javascript, css animation, web audio, Google Cloud. (whoa..)

What's next for Colorful Notes

Host the website on Google Cloud.

Built With

Share this project:

Updates