- Composed by: Quinn Dong, Skyler Rencher, Brian Lalbeharry, and Kristen Jacobsen
Click to follow link(s):
This app will only function with an active Spotify Access Token with an hourly expiration. If you have a Spotify Premium account, please generate a key here: https://developer.spotify.com/documentation/web-playback-sdk/quick-start/# And paste it into the SpotifyAPIToken variable. If you do not have a Spotify Premium account, please email [email protected] and we will generate and update the key.
Echo Chamber is a application for music enthusiasts to immerse themselves into ambient music to match their mood with a visual experience (gif) to match. Upon choosing a mood by clicking one of the buttons (sad, happy, or chill) the user will be presented with a randomized gif based on the mood selected as well as a randomized song with that same mood in mind. The user can switch between any of those moods should they have a change-of-heart. The somber tone of the aesthetic has an simple yet profounc impact on the user. It features clean text and perhaps the most defining feature, the Echo-Chamber itelf (the white rectangle) which illustrates the theoretical zone the user will be in.
Four perfect strangers (Quinn Dong, Kristin Jacobsen, Brian Lalbeharry, and Skyler Rencher) came together on this island called 'Group 5' and we were commissioned to synergize our CPUs (i.e brains) to create and build 'Project 1' which would be an application that would utilize two server-side APIs, a third-party API, and a slew of other required features. Needless to say, we were nervous about the endeavor and had concerns about our individual abilities coming together to deliver on this assignment.
So after the initial angst, calmer minds prevailed and we came up with a basic concept:
-
User Story: The user would be any and all music enthusiasts. Our app helps the user pick a song to listen to that aligns with their mood. With their selection of "mood", we would generate a randomized song from a matrix of songs that range across genres and display a visualization, as well as information about the song and artist. This would bridge the gap between genres, introduce users to new music, and especially create an ambient environment that reflects the user's emotions.
-
Server-Side API's: Giphy (generated emotion imagery) and Spotify (music).
-
Third-Party API: Bootstrap
Once the basic foundation was established we pitched the idea and after a "Q & A session" with our instructors we had been given the greenlight to work on the project.
The concept was approved and we were a tad bit naive to the challenge to come. It was at this stage where we started to learn the strengths and weaknesses of our team members. Turns out we got a winning ticket because our team meshed well and we at least were pretty good at communicating which helped in the long run of this process.
So we began to work in steps:
- Step 1: Gettiing the HTML skeleton from which we all could work from:
- Step 2: Applying CSS to get the functional spacing and aesthetic of the user interface just right:
- When that was complete now we could focus on targeting the html elements.
- Step 3: Targeting the HTML elements in the script.js file and storing them into variables for reference:
- Step 4: Creating the Ajax requests for the server-side APIs:
- The sad button ajax call requested sad themed gifs per each click of the button. The same ajax calls were replicated for each mood button (happy and sad buttons) to run the same requests for the same effect.
- The Spotify API ajax call:
-
This API was one of the most difficult things to get working during this project. Spotify's API is so complex with the code and the api authorization token constantly needed to be refresh every hour due to the restrictions. Also the player would only play if the user had a Spotify premium account. We had to find a work-around to allow the player to work even if you don't have a Spotify account. That was a huge challenge.
-
Another challenge with this Spotify API is that we had to find a way to pull songs from the ajax request and attach them to a randomizer function to respond in accordance with the click events. We defined the function and added it to each function in the mood buttons. We also didn't realize that we had to orient the position of the links to the different script files that we have to where the script.js is located below every other link so that everything could be defined when we are targeting them.
Well the best way to find out is to try for yourself! This has been a labor of turmoil and love for our team and we are proud of what we've been able to accomplish in the time given for this project.
Click to follow link(s):
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent