This overlay allows you to show what song you're currently listening to on your stream. It's made especially for software like OBS to add functionality to your stream. This solution is much more elegant than telling your viewers the name of every song you're listening to or requiring your users to call a bot. It's also really flexible if you know a bit of CSS and HTML.
To work out what you're playing from pretty much anywhere, you just need an account with either last.fm (recommended) or ListenBrainz. You can make the widget update every x seconds to get realtime updates.
This is an updated, more flexible version of Mitch Canter's widget.
Prerequisites for setting up the overlay:
- a last.fm or ListenBrainz account
- (if you're using last.fm) an API key. Get your API key once you've signed up for an account here.
- your streaming service(s) connected to last.fm or ListenBrainz. There's instructions available here for last.fm.
- Download the project and host it on a web server or put it somewhere on your computer.
- Rename
index.example.htmltoindex.html. There are 4 settings in this file that you will need to be aware of to make this overlay work for you:
| Variable Name | Possible Values | Meaning |
|---|---|---|
| api | Text | (Optional, required for last.fm) Your last.fm API key |
| username | Text | Your last.fm or ListenBrainz username |
| time | Number | How many seconds to wait before checking what's playing |
| is_lastfm | true/false |
Whether to use last.fm or ListenBrainz |
- 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 250, Height to 90. Feel free to tweak this as necessary.
- Open your music app of choice and start playing. Everything should begin displaying on the first song change.
- ListenBrainz can be slow to update, or not update at all. Last.fm is highly recommended.
- Apps that don't share listening status between devices like Tidal may show music from the wrong device. Spotify works best with this.
- multiple view options (vertical, with album cover)
- responsive version
- add images to setup section
This product is not endorsed, affiliated, made or supported by The MetaBrainz Foundation, Last.fm or CBS Interactive. It's built on public APIs. You agree that you are liable for your use of the Last.fm API, not the developers of this product.
