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.
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
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:
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://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.
