A “Now Playing” Overlay using Last.FM

I wanted to upgrade my streaming setup slightly, and while watching other streamers, I noticed that some have added a “Now Playing” overlay. For the most part it’s either embedded in a static overlay as text, or just free floating text. But that isn’t enough for me.

Last.FM Now Playing Overlay
Last.FM Now Playing Overlay

The biggest difference to the usual “Now Playing” overlays is that it is animated. Instead of simply changing text, it slides out when no song is playing, slides in when a song starts playing, and flips to reveal a track change. Not only that, but it also shows track art if there is any. Just take a look at it in action to see what it can do:

The “Now Playing” overlay in action.

To support most streaming software (and drastically reduce the work I had to do), I compressed it to a single HTML file that contains the necessary CSS and JavaScript. This also enables you to just download it, but keep it mind that you will not receive any future updates if you do so. You can also customize the style completely by either using the CSS override function that your streaming software provides, or by editing the HTML file.

And did I mention that it is completely free, has no tracking, and no ads? The only requirement is a Last.FM compatible player, a Last.FM account and a streaming software with browser integration.

Setting It Up

If you don’t already have a Last.FM account sign up for one and then link it to whatever player you want to use (for example: Spotify). Then all you need is to create a browser instance in your streaming software, and point it at the following URL:

https://stream.xaymar.com/nowplaying.html?user=<YOUR_LASTFM_USERNAME>

(Make sure that you replace <YOUR_LASTFM_USERNAME> with your actual Last.FM username.)

The overlay was designed for a vertical size of 128px and will automatically scale the content to fit using the ‘zoom’ property. A horizontal resolution of 1024px is recommended, but you can reduce that by also reducing the height, or customizing the CSS.

Customization

As the entire thing is a HTML page, you can easily change the design of the overlay. Here are the CSS classes you can modify to customize the style:

  • .info Container for the track information.
  • .logo Logo or Album Art for the track.
  • .artist Artist name for the track.
  • .title Title of the track.
  • .separator The en-dash separator.
  • .slide_in Slide in animation.
  • .slide_out Slide out animation.
  • .flip The flip animation, must be 500ms, and data change happens at 200ms. Ideally also contains the slide_in animation data.

Note that the CSS modifying hooks that OBS Studio and Streamlabs OBS provide run after all other JavaScript code has run, so you can’t override the zoom with that. In the case that you want to change the sizes of elements beyond what is already there, consider downloading it and modifying the source files.

Final Words

Before I leave you to your new overlay, there are some problems with this implementation. It relies on Last.FM, which means that you have to share data with yet another company, and it needs a Browser, which means that the CPU and GPU load is higher than it would be with a native plugin. Additionally there’s also the problem that Last.FM may only have partial or no data about a song and the overlay will stop working as expected temporarily.

But for my use case, which is Spotify and AIMP, this is more than enough. It removes the need to use partially or completely broken Twitch extensions (does Twitch ever check and remove broken extensions?), and allows viewers to easily see which track is currently playing.

– Xaymar out.

About Xaymar

A programmer in his mid-twenties, skilled in various programming languages.
Bookmark the permalink.

Comments are closed.