# Zyphen's Now Playing overlay



## ZyphenVisuals (Jun 27, 2020)

ZyphenVisuals submitted a new resource:

Zyphen's Now Playing overlay - Now Playing overlay based on Snip



> This is a quick Now Playing overlay I created, inspired by the awesome widget created by Aiden Wallis.
> 
> Why use this?
> 
> ...



Read more about this resource...


----------



## bloodmonkey (Jul 2, 2020)

its cool


----------



## ZyphenVisuals (Jul 3, 2020)

bloodmonkey said:


> its cool


Thank you!


----------



## iTouch44 (Jul 15, 2020)

thank you , thats a nice overlay,
i made a litte change at the body color, sorry for saying that but the white box looks crap when nothing is played :D


body{
*background-color: rgba(0, 0, 0, 0.0);*
  padding: 0 !important;
  margin: 0 !important;

with that change the white box is full transparent


----------



## ZyphenVisuals (Jul 15, 2020)

iTouch44 said:


> thank you , thats a nice overlay,
> i made a litte change at the body color, sorry for saying that but the white box looks crap when nothing is played :D
> 
> 
> ...


It's weird that it's white in the first place. For me it's transparent (see the Demo video please). What version of OBS?


----------



## grizzlord (Jul 16, 2020)

Hello! great plugin i am loving it! I am wondering one thing though. I am only somewhat familiar with css/ other web based coding. I am wanting to center the text instead of having it lined up on the margin. what lines of code would I edit to do this? from my experiments the normal centering codes dont seem to be working within the css file. is the text alignment done in the html file? Thank you for your help in advance.






and in case you are wondering i am attempting to center between the two images


----------



## grizzlord (Jul 16, 2020)

okay after tinkering i was actually able to mess with the "#smalldiv" margin as well as add "margin: 0 auto;" in order to center the pieces of text.


----------



## ZyphenVisuals (Jul 16, 2020)

grizzlord said:


> okay after tinkering i was actually able to mess with the "#smalldiv" margin as well as add "margin: 0 auto;" in order to center the pieces of text.


Glad you got it working!


----------



## iTouch44 (Jul 17, 2020)

ZyphenVisuals said:


> It's weird that it's white in the first place. For me it's transparent (see the Demo video please). What version of OBS?


idk why its white for me, but with that small css change its transparent now, i use OBS 25.0.8 with  the Streamelements Addon

Video


----------



## iTouch44 (Jul 17, 2020)

ZyphenVisuals said:


> It's weird that it's white in the first place. For me it's transparent (see the Demo video please). What version of OBS?



idk why its white for me, but with that small css change its transparent now, i use OBS 25.0.8 with the Streamelements Addon

Video with Orginal CSS  ////  Video with Custom CSS


----------



## ZyphenVisuals (Jul 17, 2020)

iTouch44 said:


> idk why its white for me, but with that small css change its transparent now, i use OBS 25.0.8 with the Streamelements Addon
> 
> Video with Orginal CSS  ////  Video with Custom CSS


I see, that's quite weird... I'll push an update tomorrow to the Google Drive link with the updated CSS. Thanks for letting me know!

PS. Nice stream! :)


----------



## bbeesky (Aug 19, 2020)

I normally use the browser version of Spotify - this plugin at this time will only work with the Spotify desktop application. Not a deal breaker by any means. Thanks for the plugin!


----------



## ZyphenVisuals (Aug 19, 2020)

bbeesky said:


> I normally use the browser version of Spotify - this plugin at this time will only work with the Spotify desktop application. Not a deal breaker by any means. Thanks for the plugin!



Hi! At this point in time, the plugin itself doesn't necessarily "connect" to anything, it simply reads the data from .txt files (and a png image) and displays it for you. If you can find a grabber (like Snip, Tuna, etc) that works for the Browser version, then the plugin works.


----------



## ZyphenVisuals (Sep 9, 2020)

ZyphenVisuals updated Zyphen's Now Playing overlay with a new update entry:

New widget editor!



> With the neweste update, I've included an editor that allows you to change text size, spacing and color of the widget! This editor will act as a starting point, to which more features will be added in the future



Read the rest of this update entry...


----------



## AlexShyno (Sep 17, 2020)

Hi, i just wanna know how to make the text animated for long artist name or song name ? (btw very nice overlay, great job)


----------



## ZyphenVisuals (Sep 17, 2020)

AlexShyno said:


> Hi, i just wanna know how to make the text animated for long artist name or song name ? (btw very nice overlay, great job)


It should already be happening... I think it's a bug with the current version. I'll check it out and perhaps fix it


----------



## AlexShyno (Sep 17, 2020)

Okay mb, thanks


----------



## ZyphenVisuals (Sep 17, 2020)

AlexShyno said:


> Okay mb, thanks


i fixed the error. please download the newest version


----------



## ZyphenVisuals (Sep 17, 2020)

ZyphenVisuals updated Zyphen's Now Playing overlay with a new update entry:

Scrolling fix



> Fixed the bug with text not automatically scrolling when it overflows. Thanks for the reports!



Read the rest of this update entry...


----------



## oliverlowbob (Sep 18, 2020)

don't forget to check off "save information seperatly" in snip for this to work


----------



## ZyphenVisuals (Sep 18, 2020)

oliverlowbob said:


> don't forget to check off "save information seperatly" in snip for this to work


Yep, I've included that in both the OBS page and the youtube video


----------



## iTouch44 (Sep 23, 2020)

Can  you add Transpacy for the Editor ?

When Music is played


Spoiler



#bigdiv {
justify-content: flex-start;
*background-color: rgba(0, 0, 0, 1.0); * and  *background-color: rgba(0, 0, 0, 0.0);*
width: 350px;
height: 70px;
overflow: hidden;
margin-left: -500px;
padding: 0;
}



And when nothing is played


Spoiler



body{
*background-color: rgba(0, 0, 0,** 1.0**);* and *background-color: rgba(0, 0, 0, 0.0);*
padding: 0 !important;
margin: 0 !important;
}


----------



## ZyphenVisuals (Sep 23, 2020)

iTouch44 said:


> Can  you add Transpacy for the Editor ?
> 
> When Music is played
> 
> ...


I'm sorry, I don't really understand. What's the desired result?


----------



## joshyclicks (Sep 24, 2020)

Hi, i was wonder how i can change the fonts?


----------



## ZyphenVisuals (Sep 24, 2020)

joshyclicks said:


> Hi, i was wonder how i can change the fonts?


Changing fonts is not currently available in the editor. You can however still do it my manually editing the CSS file. Research "CSS font-family"


----------



## iTouch44 (Sep 27, 2020)

ZyphenVisuals said:


> I'm sorry, I don't really understand. What's the desired result?


i have my overlays with a bit Transparency , and i wanted to you use your Overlay also with Transparency
here is a yt video where you can see what result i have, https://www.youtube.com/watch?v=HVrfY17pQwc


----------



## ZyphenVisuals (Oct 2, 2020)

iTouch44 said:


> i have my overlays with a bit Transparency , and i wanted to you use your Overlay also with Transparency
> here is a yt video where you can see what result i have, https://www.youtube.com/watch?v=HVrfY17pQwc


And you want only the black part to be transparent, without affecting the image and text?


----------



## SinfulSavior (Oct 10, 2020)

Is there any way to have the widget go away after it's displayed the track and then come back when the next track starts?


----------



## ZyphenVisuals (Oct 10, 2020)

SinfulSavior said:


> Is there any way to have the widget go away after it's displayed the track and then come back when the next track starts?


It should do that already. Check the demo video


----------



## GelmoSan (Feb 2, 2021)

Slight mod for Pretzel: https://gist.github.com/Gelmo/fa3256e7c8a2b3d3d1495d5f4e784bed

Single-file variant: https://gist.github.com/Gelmo/f3d5fe50206aadbbd786e842110c8d92

Notes near the top contain instructions


----------



## griddark (Mar 14, 2021)

GelmoSan said:


> Slight mod for Pretzel: https://gist.github.com/Gelmo/fa3256e7c8a2b3d3d1495d5f4e784bed
> 
> Single-file variant: https://gist.github.com/Gelmo/f3d5fe50206aadbbd786e842110c8d92
> 
> Notes near the top contain instructions



Been using this for a while, have you experienced images not loading properly? like 1 in 10 will just be empty?


----------



## Fizzzz (Mar 17, 2021)

Hey I dont get how to use it with tuna, can you explain it a little more?


----------



## locirecords (Mar 18, 2021)

I am generating my text files out of VLC using something different (not snip or tuna), can this still work? I have mine looking decent but I wish the transition when there is a new song was smoother or faded in or out or something. is there an overlay I can use with my already existing text files?


----------



## isemmagayenough (Apr 28, 2021)

Is there any possible way to increase the resolution of the html source so that if scaled up in OBS, the source doesn't look pixelated? For example, doubling the resolution to 700x140?


----------



## BreeziTV (Apr 30, 2021)

Anyone know how to do placeholders for the thing? (Like custom titles and stuff)


----------



## FaKeKeper (May 28, 2021)

Do you know why the song title has apostrophes around it, this is just a tedious thing but I do like it better without the apostrophes.


----------



## netwolfx (Jun 1, 2021)

ZyphenVisuals said:


> It should do that already. Check the demo video


I'm getting this behavior too, after starting playback the popup slides in, displays the current track, but then stays there.  When the song changes, the now playing information updates, but the popup never goes away, unless I stop playback.
I am using Tuna and Spotify.


----------



## iTouch44 (Jun 8, 2021)

FaKeKeper said:


> Do you know why the song title has apostrophes around it, this is just a tedious thing but I do like it better without the apostrophes.


Open the snip menu with rightclick  and go to the output format section , there you can change which signs will be before and after the title


----------



## tazcowboy (Jul 15, 2021)

Is there a way to have a generic image displayed when iTunes don't have album art work.  When there isn't any album artwork from iTunes I see the Snip_Artwork.jpg is 1K and it displays a black box to the left of the song/artist where the art would be.  Is there a possibility a way I could have a 'generic' image for when album art is not available form iTunes?


----------



## DJDonaldDuck (Aug 22, 2021)

tazcowboy said:


> Is there a way to have a generic image displayed when iTunes don't have album art work.  When there isn't any album artwork from iTunes I see the Snip_Artwork.jpg is 1K and it displays a black box to the left of the song/artist where the art would be.  Is there a possibility a way I could have a 'generic' image for when album art is not available form iTunes?


How did you get Snip to work for iTunes? It automatically only wants to go to my Spotify (which I don't have).


----------



## Sevir (Sep 26, 2021)

Snip is picking up my spotify account and what is playing but the song.html i downloaded don't display anything. Any ideas where to start troubleshooting?


----------



## Placeb0 (Oct 3, 2021)

Hi I'm not sure if this is still being looked at but just a quick question really. I've got it all working and seems to be working just fine. However, the widget is always on, is it possible to hide the widget after about 5 seconds of the same song playing and the show back up once the song switches? I read on here that it already does this but mine doesn't seem to do it.


----------



## novaaaa (Nov 18, 2021)

I must be the only person this doesn't work for? Never goes on and never shows anything, everythings connected and followed steps exactly but just stays blank permanently


----------



## iSniperpls (Nov 26, 2021)

For the people wanting to set this up with VLC and local files, I made a quick vid for it.









						OBS Studio | Now playing overlay for VLC plugin! (2021)
					

UPDATE: If you're still struggling, I made a follow up video that breaks down the part where you have to edit song.html and the artist.txt song.txt.https://y...




					youtu.be


----------



## Venipa (Jan 19, 2022)

added support for my ytmdesktop app https://youtube-music.app





you can enable the client api in the settings


----------



## ZyphenVisuals (Feb 15, 2022)

To anybody writing here, I'm sorry for not responding! The way the obsproject discussion page is structured, it's hard for me to stay up to date with what's happening.

I've recently created a GitHub repository for the project, which can be found on the overview section. For those who are having issues, please open a new Issue on the Issues page of the GitHub.

To those who implemented adițional functionality into the widget: First of all, thank you! Second of all, feel free to fork the repo for easier findability if it's a different version from the original, or if it's just an improvement, please do a pull request and I'll test it and merge it into the main app!


----------



## BreeziTV (Apr 7, 2022)

Tuna likes to output the artwork as png


----------



## amne42 (May 1, 2022)

To anybody wondering how to hide it after a certain amount of time of the same song playing, add this to song.html before "function displayData() {" :


```
function Hidden() {
    $("#bigdiv").animate({
            marginLeft: "-500px",
          }, 500)
          shown = false;
    }
```

Then in function displayData() add this line after "shown = true;":


```
setTimeout(Hidden, 6000);
```

In this way it hides itself after 6000 milliseconds, so adjust it as you please (It will show up again when a new song it's played).


----------



## noctr (May 21, 2022)

Awesome overlay, but...
Got one problem im confused with - widget can`t hold cover (pulled up from spotify) longer then for 1-2 secs after refresh, than it shows image as violated doc throughout the stream. Using overlay with tuna. Maybe there is known problems, did not find any info :\


----------



## plakofgold (Oct 22, 2022)

ZyphenVisuals said:


> ZyphenVisuals submitted a new resource:
> 
> Zyphen's Now Playing overlay - Now Playing overlay based on Snip
> 
> ...


Is there a way to remove the background of the now-playing splash screen?


----------

