Resource icon

Free Now Playing Display (via Last.FM) 2020-02-04

Upgrade your stream quality with a stylish and modern "Now Playing" display! With this you can replace your text based "Now Playing" display with a slightly more styled up text based "Now Playing" display - and for free with just standard OBS Studio. All you need is a Last.FM account and a player with Last.FM integration (like Spotify), and a streaming software like OBS Studio with a Browser Source.

It is fully animated. It hides itself if no track is playing, flips to reveal a track change, and shows itself if a track starts playing. And best of all, it can be used without relying on my webserver to be online, and is fully customizable through CSS.

Attention: Due to overuse of the API key, which is limited globally to one request per second by Last.FM, you will now have to download the file and provide your own Last.FM API key. You can generate one here: https://www.last.fm/api/account/create?_pjax=#content

Setting It Up
First you'll need to create a Last.FM account if you don't already have one, so head here and sign up for one (make sure to remember your username, you'll need it). Then just connect the music player (i.e. Spotify) and Last.FM and that's all you have to do on the Last.FM side.

Then in OBS Studio create a Browser Source and set it's width to the Base Resolution Width, and the height to around 128px. The display will automatically scale with the chosen height, but was designed to look best at 128px (with an ideal width of 512 to 1024px, depending on the song). Finally change the URL to https://tools.xaymar.com/nowplaying.html?user=YOURLASTFMUSERNAME (replace YOURLASTFMUSERNAME with your actual lastfm username) and you are done!

Customizing
Since the "Now Playing" integration is simply a HTML page with CSS in it, you can easily customize it with the CSS overrides in OBS Studio. The necessary classes are:
  • .info Container for the actual track information, also the thing that is gets the animation
  • .logo Track Logo or Album Art, depending on what Last.FM returns.
  • .artist Artist name.
  • .title Track name.
  • .separator The en-dash between the artist name and the track name.
  • Like
Reactions: kingtigermusic
Author
Xaymar
Downloads
4,314
Views
27,074
First release
Last update
Rating
4.00 star(s) 3 ratings

More resources from Xaymar

Latest updates

  1. New URL for Now Playing

    The overlay/embed can now be found at...

Latest reviews

Downloaded the html file, added my API key, added to OBS as browser local file. Doesn't seem to work though. the words "now playing" appears and quickly slides downwards offscreen.
super easy compared to all the other ones ive tried, however there isn't a big explanation on how to customize it if you aren't familiar with CSS. How would one go on about removing the picture of the album and replacing it with text
The most elegant and simple way to show now playing on stream!
Top