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