Have you ever been listening to music, and thought to yourself, "Man, wouldn't it be cool if I could see the music move?"

Well, even if you've never thought about that, now you can experience it for yourself! Introducing Color Vibe, an accessible web app for you to easily render your favourite songs in a beautiful and groovy rainbow. What's more, you can even download these dynamic visualizations for offline enjoyment! You'll never have to upload a song to YouTube with static visuals ever again...

Features:

  • Let your eyes feast on the mesmerizing moving colours as you vibe to your favourite songs
  • Use your own audio files, or play with the sample track provided
  • Over 20 different visualization styles, courtesy of Wave
  • Simple controls for recording and downloading visualizations

This project was made possible with React, along with Wave and the React Canvas Recorder.

Inspiration: I was inspired by the Windows Media Player audio visualizations of the late 2000s. As much as I loved to watch those psychedelic patterns, my parents always told me that watching those would rot my eyes. :( Although the visualizations generated by Wave have a very different vibe, they are still extremely pleasing to watch, especially when paired with my favourite music! (I probably spent too much time watching the visualizations instead of actually coding...)

Some Things I Learned:

  • How to use React Hooks like useRef and useCallback. Actually, I'm still not sure that I'm using Hooks correctly, but I'm definitely using them!
  • Don't try to reinvent the wheel, especially if you're working by yourself. Take advantage of all those nice and easy-to-use packages that others have made!
  • Docker + Google Cloud Platform = bad choice for a complete noob like me. The Google Cloud Platform is so confusing! :/ (I think I got hosting to work eventually, though!)

Some Challenges:

  • Motivation. For the first half of the weekend, I felt super unmotivated to work on anything. Creating a functional code-y thing all by myself in one weekend seemed impossible. Fortunately, I was able to overcome this challenge by forcing myself to take baby steps, like "Let's initialize the create-react-app project", "Let's draw a canvas", "Let's play some music"... Once I figured out how to use the Wave library to create visualizations, that's when everything picked up steam and I started to feel motivated to try and make something out of this.
  • Docker. I spent over 2 hours trying to figure out how to get a Docker image from my computer to the Google Cloud Platform. Most notably, I got stuck for quite a while on some authentication shenanigans when I tried to push the Docker image to the cloud. After lots of googling and trying to understand the GCP, I finally succeeded... only to realize that I must've misconfigured something in my Dockerfile, since the image didn't work. :( Fortunately, after more googling, I found an alternate method to get my app hosted on GCP by using the App Engine and Github, instead of Docker. (Gotta find some way to use those free GCP credits from MLH!)
Share this project:

Updates