Tutorial

A Twitch Overlay for Spotify (via last.fm) that Works!

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:

Once you have all those things:

  1. 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.
  2. 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).
  3. 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.
  4. 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!


Our Specialities

Web Design & Development

From an idea and some notes to a fully functioning website, if you can dream it, Mitch can design and build it!

Twitch Marketing

We show you how to work with the most interesting content creators on the planet - Twitch streamers!

Social Media & Marketing

We give you the tools, training, and resources you need to get your story told on Twitter, Instagram, and more!

Brand Identity Design

A new logo, color palette, or even an entire style guide - we can help with a brand new brand (and the resources to keep your assets in line!)

Content Strategy & Creation

Want to start a podcast? A YouTube channel? A Twtich stream? Take it from an old pro - you've come to the right place!

eCommerce Consultation

Whether it's a digital service or a physical product, we can get you up and selling quickly and easily!

Community Management

Find your tribe and make them your rabid fans. Mitch can help with the technical ins-and-outs of it all!

Contact Greyhawk Digital