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.


As you can see, 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.

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://stream.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.
Note: Up to date instructions can always be found here.
Author
Xaymar
Downloads
252
Views
1,686
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from Xaymar

Top