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)
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!
Video demo available here.
Video tutorial available here.
GitHub repo available here.
JPN installation guide available here. (thanks to 25reinyan25.net)
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!
