Mood Music

Pick the mood you're feeling and this website will play the perfect playlist for you from Spotify!

Comment

Inspiration

As I was exploring companies' demos, I came up with the idea to create a music player that would detect your mood using facial recognition (through Google Cloud Vision) and play a song based on your expression. However, I did not have time to implement the facial recognition portion of the project. Nevertheless, I was still able to create a music player if you tell it your mood!

What it does

After logging in to Spotify, you can choose the mood you are feeling and the music player will play a Spotify playlist that corresponds to that mood.

How I built it

I built this website using the Create React App with Javascript, HTML, and CSS. It used the Spotify API and utilizes the Spotify Web Playback SDK. It saves the state of the mood you chose and creates a Spotify player to play a playlist corresponding to that mood. It also displays the information of the song you are currently listening to.

Challenges I ran into

Understanding the Spotify API was probably the hardest part of this challenge. It was difficult to understand how the login authorization worked and making a song-player created problems as well. Additionally, I had originally started with the idea of using facial recognition, but I found it very difficult to connect the Spotify API with Google Cloud and Google Cloud itself was giving me many problems on my computer.

Accomplishments that I'm proud of

I am proud of being able to get the player to actually play music. Extracting the music data from Spotify was the hardest part of this project for me. Once I was able to do that, I still ran into problems with access tokens, so I am very proud of the fact that this website actually plays music.

What I learned

I knew only basic React coming into HackGT, so I learned a lot about React. I also learned about using APIs for projects as I had never used one for any of my projects before. The Spotify API was a good, well-documented, starting API and that taught me how to use it efficiently.

What's next for Mood Music

I want to continue working on this project to incorporate Google Cloud Vision's facial recognition features. The end goal would be to let the website pick the playlist/songs based on the facial expressions you are currently displaying.
Share this project:

Updates