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