It all started with my cousin asking what kind of songs I listen to, a simple question with simple answer. This is where the idea of Now Playing integration on my website came from. Considering I already used Last.fm which is the last stop for music enthusiasts, I kid you not; it is amazing to create and compile a library with an amazing and accurate recommendation. I am currently using it to Scrobble my Spotify’s Now Playing tracks and loving it so far. I noticed Last.fm provides free-to-use API, although requires an API key generated specifically for you to access the API Endpoints, it is free nonetheless. I was occasionally fiddling around with my music clients, namely CMUS, Spotify and QMMP and noticed they have Last.FM integration, built-in or in plugin form.
What we did here is to create a foundation of what data goes where and such. Nothing complicated!
Our next step is to give our foundation a look, style if you will.
Our final step is to make our widget functional, why?! .. because we are fiddling around with dynamic data, and not just any data, data that we pull from a different source. If we were to plan this, we could say, we need a loop to constantly check for data change.
For this very purpose, we will use Last.fm’s API’s sub-endpoint, User.getRecentTracks.
Get a list of the recent tracks listened to by this user. Also includes the currently playing track with the nowplaying=”true” attribute if the user is currently listening.
The good thing is it has various customizable parameters, limit, from, to. We won’t be using the last two but the limit, the reason behind is that User.getRecentTracks, if executed as default fetches 50 recent tracks, that’s 49 useless tracks data. This API Endpoint works in a Stack theory; any good API endpoint should use Stack theory if returning multiple data, the last one first, first one last. That should clarify why I called 49/50 useless tracks data because, for our purposes, we only need 1.
Simple enough, those hardcoded images hosted in Imgur are from Icon8, a great website for icons.
The reason I added getSetLastFM(); and again called setInterval(getSetLastFM, ..); is because we don’t want the users to wait 10 seconds with no data at the very first time. After completion, the widget should look something like this.
There’s a responsiveness problem with this, and we can fix it with either creating a responsive layout or a going the fixed width and height way.
Below is the embedded Codepen. Please view it in a new tab to see the proper layout.