I decided recently that I would start live coding my personal projects outside of work on Twitch🚀. It's something I've always considered and after reading about how it can help improve your productivity I thought I'd give it a go (here's my channel 😎).
Obviously, before actually starting my first stream I had to procrastinate a little.. so I spent some time getting everything setup. I had originally planned on using OBS as my streaming software, but ended up choosing Twitch's own software "Twitch Studio" as it seemed to be more user friendly for the newbie streamer. For the most part it is, but I quickly ran into a problem.
I managed to get everything setup apart from the ability to display my currently playing song from Spotify. While this is a little bit of an unnecessary addition to my overlay - I thought a tiny bit of extra effort to get it right would be worth it.
Turns out it's not that straight forward to setup 🙄. I couldn't easily find a solution without writing my own HTML page - so that's what I did. I thought I'd post what I came up with here to save someone else 30 minutes of their life...
The full HTML page is saved in a Gist on GitHub (sorry for my terrible JavaScript):
The JS just uses the last.fm API to grab your most recently played track(s) from their API. It continues to ping it every 10 seconds (which is fast enough for a Now playing feed). I made a little card to display it nicely.
To get it up and running, just add a Browser Source Layer to the scene you want your feed to appear in and then open the HTML file (which you should save locally). You'll need to edit the HTML to include your own Auth Token from LastFM - which you can grab from their API documentation easily enough. You will also need to hook up your Spotify account to LastFM. Obviously you shouldn't host this page anywhere or people could steal your Token...
A brief note as well that you shouldn't stream with any copyrighted music or you could get banned from Twitch. There are lots of playlists you can choose from, two of my favourites are this one and this one 🦄.
That's all really, not too much to it!
Cover art by Maik Jonietz
Top comments (0)