• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Tutorial

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

CMDR Mitchcraft

Reading time: 2 minutes

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:

  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!

last.fm, overlay, spotify, twitch, video
  • A Look Back at WordPress

    A Look Back at WordPress

    Reading time: 1 minute

    …we’ve come a long way from this: …to this… …with a brief stop here… …and to where we are today! And how sweet it is! (thanks to Ozh for a wonderful post – if you aren’t familiar with WordPress, head to his site for a history lesson!)

    WordPress
  • WordPress 3.3’s roadmap has been set… at least, it will be.

    WordPress 3.3’s roadmap has been set… at least, it will be.

    Reading time: 3 minutes

    Here’s the email I received of some of the proposed changes to WordPress – a lot of them look super exciting (goodbye IE7!) and plenty of them are just amazing.  What’s your favorite? User Feature: Media Uploader (azaozz) · Definitely v1: Integrate Plupload into dashboard. (GSoC project) · Probably v2: Improve our image manipulation and…

    WordPress