Almost a Midterm
This post is going to go through the multiple failures that happened when trying to make something related to my original ideas. I started with the want to get any basic Spotify API information on a website. To do so I had to create an authenticator for users to submit their Spotify credentials. Luckily Spotify has a guide on how to do this.
I already had a Spotify Developer account from a failed Spotify API integration project last semester so luckily that step was done.
My first few tries I kept getting the same type of error. When you tried to Log in to a Spotify nothing would happen. Then another attempt was allowing the user to connect Spotify but then nothing would happen after it was connected.
I thought about my idea and felt it wasn’t “live” enough, at all, so I decided to incorporate the Get Current Playing Track feature that Spotify has.
Here are a few examples that I found and attempted to follow:
After hours of working through these, none worked. I tried learning some React for one of the tutorials but no success in getting it to work. For most of these attempts there actually wasn’t any/many errors in the console.
So I spent some time digging and have learned that Spotify’s Get Currently Plating Track feature is actually broken. There is no update other than a few months ago a forum mentioned similar errors I got and came to the realization that it was not necessarily the developers fault but Spotify’s.
I was able to find another example that used Last.fm as a source to get the currently playing track from a user.
I dissected the source code and used it as a reference to grab the bare bones of the information I wanted, what the user is currently listening to.
By the time I was able to get this to work midterms were due and I decided to make a simple site where my personal currently playing track was showing and others are able to chat together and either judge together or join in listening to the songs.
Random, Small, Useful things I learned throughout this whole process:
Yarn: caches every package it downloads so it never needs to download it again. It also parallelizes operations to maximize resource utilization so install times are faster than ever.
How to upload personal font to a site
The existence of pug and Sass
How to connect Last.fm to a website using Last.fm’s API
How to authenticate a Spotify user using Spotify’s API
Styling basics
Differences between frontend and backend
front-end: users side
back-end: server side
ajax: a way to update information without refreshing
What’s next?
I plan to use what i’ve learned for the midterm and apply it to my final. The idea, now, is to have a “silent disco” with users logged into the site.
The site will have the use of Spotify’s API to authenticate the users profile, Last.fm API to grab the currently playing track, working on layouts that update without refreshing, webcam activation, and participants joining the site to enjoy music together.
***Thank you to Karina Chow for the massive amount of assistance understanding this process and working through the code with me***
