This is a quick Now Playing overlay I created, inspired by the awesome widget created by Aiden Wallis.

Video demo available here.

Video tutorial available here.

GitHub repo available here.

JPN installation guide available here. (thanks to 25reinyan25.net)

DTQIsKK.png


Why use this?

If you ever tried using Aiden Wallis's widget, you might know that it has a pretty slow refresh rate, and if the servers are overloaded it can sometimes not even update for several minutes.

This widget aims to provide you with the same functionality but with a local html page, meaning you don't depend on any 3rd party servers working!

And finally, customisability! By editing the .CSS file, you can change how the widget looks. I've left bellow a quick start guide on how to customize the widget!

Features

-Checks for song change every second
-Smooth transitioning between songs
-Automatically hides itself when no song is playing
-Automatically enables scrolling text effect when the text is too long
-Only updates the interface when the song changes

Prerequisites

Snip (or Tuna, as discussed below)

How to set it up

Snip setup:

1. Set up Snip with your Spotify or iTunes account as usual
2. Check Save Information Separately, Save Artwork and Empty File If No Track Playing

Widget setup:

Drop both the .html and .css files in the same directory as snip.exe.

OBS Setup:

1. Add a browser source
2. Check Local file
3. Point OBS to Song.html
4. Set the dimensions to 350 by 70
5. Enjoy!

How to use with Tuna

Currently, Snip only supports Spotify and iTunes. If you wanna use another platform, you'll have to use Tuna, another OBS plugin.

In order for this to work, you must set Tuna to export the following files in the same directory as Song.html:
- "Snip_Track.txt" containing the song's name (%T)
- "Snip_Artist.txt" containing the artist's name (%M)
- "Snip_Artwork.jpg" containing the album artwork

Also make sure the song placeholder is empty.

Customization quick start

The most common thing you might want to do is to change the color of the widget. The following properties will affect:

-Background color: Under #bigdiv change "background-color"
-Artist color: Under #artist change the "color" property
-Song color: Under #song change the "color" property

You might also want to change the font. For this change the "font-family" property of #artist and #song. However, you might wanna first read about the font-family property.

If you already know how CSS works, feel free to tinker with the design as much as you want!
Author
ZyphenVisuals
Downloads
15,435
Views
59,980
First release
Last update
Rating
5.00 star(s) 9 ratings

Latest updates

  1. Scrolling fix

    Fixed the bug with text not automatically scrolling when it overflows. Thanks for the reports!
  2. New widget editor!

    With the neweste update, I've included an editor that allows you to change text size, spacing...

Latest reviews

Exactly what I was after, and using local files! Allows for tweaks that I couldn't get through Snip and OBS (correctly scrolling titles/names, customisation of colours, etc.)
Thank you for a great plugin!
Perfect tool for displaying music ! I've searched a plugin like this for 3 days and this is the only result without a website where you must create a account ! Great job !
Thanks! I've been having trouble with Aiden Wallis' Widget since I switched to a mix of local files and spotify ones. Also love the customisation offered by this one!
Works just as described.

Is it possible to make it show up when a new song starts and after a couple of seconds hide itself to then show up when next song starts?
works perfectly, tutorial video link is very helpful! wayyy better than just using Snip alone
Very easy to setup and was exactly what I've been wanting. I no longer have to keep Spotify open on a second monitor and I can actually minimize it! Thanks a ton!
I'm a total n00b, but this worked great!
Top