Resource icon

Free Zyphen's Now Playing overlay 2.1

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.



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
1,959
Views
9,702
First release
Last update
Rating
5.00 star(s) 4 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

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