I have a guilty pleasure in that I love streaming on Twitch. A few times a week, I throw on some on some good music, fire up a video game, and broadcast myself sucking at playing video games and hanging out with my viewers. Over the past few weeks, I’ve found the need to showcase the tracks I’m playing on Spotify to my viewers, but I couldn’t find anything that would work in the way I needed it to – simple, easy to set up, and with just the right amount of data to share.
In reality, Spotify’s API is hot garbage overkill for what I need. I only needed to pull three things: the track name, the artist name, and an album cover. I searched for a while to find something that would let me natively pull Spotify’s data and display it. I came up wanting.
And then, I remembered: back in the days of pandora and ‘internet radio’, I used last.fm to ‘scrobble’ tracks onto their platform so I could aggregate their data. Surely there was a way to do this, and to have last.fm ‘scrobble’ the tracks from Spotify, right?
Turns out that not only is that indeed the case, but last.fm’s API is an absolute delight to work with. It’s super simple and clean, and I was able to throw together a script in less than an afternoon.
Setting Up The Spotify Overlay
For this you will need:
- a last.fm account (sign up for one: https://www.last.fm/join)
- an API key from last.fm. Get your API key (once you’ve signed up for an account here: https://www.last.fm/api/account/create.
- the connection between Spotify and last.fm. You’ll need to visit your last.fm settings page and connect your Spotify account there.
Once you have all those things:
- Download the script from Github (https://github.com/thatmitchcanter/twitch-overlay-for-spotify) and install it on a web server or your local hard drive – either should work.
- Open index.html with notepad or an IDE and edit the ‘api’, ‘username’, and ‘time’ variables – those will need to be filled in to your specific needs (the time variable is how often the script checks for a song change – I usually keep it at 2 seconds, but if you want to adjust it, feel free).
- In OBS, add a new ‘browser’ source. Check the box that says ‘Local File’ if you are hosting the file on your machine. Enter the file location in the ‘URL’ box, and set the Width to 195, Height to 225. Feel free to tweak this as necessary.
- Open Spotify and start playing. Everything should begin displaying on the first song change.
See the repo on Github: https://github.com/thatmitchcanter/twitch-overlay-for-spotify. I have a few other things I want to add to it, so follow the repo if you want to get updates. And feel free to change, modify, and otherwise mess with the script to your pleasure. I can’t offer support for it (for free, anyway /shameless plug), but if you have questions, I’m happy to answer them!