Inspiration
Connor enjoys music, and there is seldom a moment without a Spotify track playing in his room. He thought it would be a cool idea to put some LEDs up on his walls and have them dance to the beat of his immaculate playlists.
What it does
After connecting to your Spotify account on the web server, it can query the song you're currently playing. The LED matrix then shows an animation of arrowheads shooting out from both the left and right ends at the beat of the music. When off beat, the brightness of the arrows fades, but on the next beat, all the active lights suddenly become bright again, creating more impact and "oomph" factor on each beat. The colors of the animation also change based on attributes of the song such as danceability, energy, and valence.
How we built it
We set up a Node.js server using WSL2 on a Windows PC. Navigating to port 8888 of the host using a web browser will show a login button. Pressing the login button will take you to the Spotify login page. On successful login, Spotify sends the server an access token. This access token allows the server to see what song you are currently playing on Spotify along with song analysis information. The server uses this access token to query the necessary information from the Spotify API. Then, the server parses the data and converts it into a form usable by the NodeMCU to control the LED matrix. The NodeMCU then requests this data from the web server and lights up the LED matrix accordingly.
Division of tasks
Connor was responsible for the web development aspect of the project (i.e. querying data). Kai was responsible for the physical part of the project (i.e. circuit design and using the data to light up the LED matrix).
Challenges we ran into
Countless. Never-ending. Soul-crushing. Connor has vowed to never touch web development ever again. As he had never worked with web servers and APIs in this capacity before, Connor had to figure out each step of the process from scratch. From authorization to querying data, nothing came without a headache and many hours of debugging. He could write a full-length book on the trials and tribulations of this project. One example was just setting up the Node.js server. For whatever reason, installing Node.js using the Ubuntu apt package manager is completely broken on WSL. It took Connor at least an hour of testing variations of code, scouring Stack Overflow, and glaring at documentation to discover this unfortunate reality. Then came the challenge of figuring out how to actually get Node.js working on WSL. Oh, and how could I forget the port forwarding to actually make the web server visible on my physical machine, not just the WSL2 local IP (which behaves differently from WSL1, by the way). All told, just getting a simple "Hello world!" page available on port 8888 probably took about a third of the whole time Connor spent on the project.
Accomplishments that we're proud of
Having a semi-working final product.
What we learned
Not to do web development in the future.
What's next for SpotiLights
Currently, the flow of the program requires the user to manually click a button to have the web server request new track analysis data if a new song starts playing. Then, the user has to wait for the previous visualization to finish before the NodeMCU queries the new data from the web server as there is a bit of lag between a song starting and a visualization starting. Streamlining and automating this process would be SpotiLights' next step for improvement. Additionally, we would like to add more animation patterns to select from besides just arrowheads. The user could adjust this option using a dropdown menu added to the webpage.
Log in or sign up for Devpost to join the conversation.