Skip to content

Instantly share code, notes, and snippets.

@Twanislas

Twanislas/now-playing-slider.html

Last active March 10, 2025 07:35
Show Gist options
  • Save Twanislas/8e790f247e8d975f26aca89358fe69ff to your computer and use it in GitHub Desktop.
Save Twanislas/8e790f247e8d975f26aca89358fe69ff to your computer and use it in GitHub Desktop.
Download ZIP
Simple notification style slider overlay pulling song info from local https://github.com/ytmdesktop API. For use in things like OBS.
Raw
now-playing-slider.html
<!-- https://gist.github.com/Twanislas/8e790f247e8d975f26aca89358fe69ff -->
<!-- Recommended size for the view is 165px high, 500px wide -->
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
var getData = function() {
$.ajax({
type: "GET",
url: "http://localhost:9863/query",
dataType: "json",
success: function(resp) {
if (resp.player.isPaused == false) {
var track = resp.track
if ($("span#tracktitle").html() != track.title) {
$("span#tracktitle").html(track.title)
$("span#trackauthor").html(track.author)
$("img#trackcover").attr("src", track.cover)
slideIn()
}
}
}
});
};
var timeout
function slideIn() {
clearTimeout(timeout)
$("#slider-container").animate({left: "0%"})
timeout = setTimeout(() => {slideOut()}, 10000)
}
function slideOut() {
$("#slider-container").animate({left: "-110%"})
}
// Get data
$(document).ready(function () {
setInterval(getData, 1000)
})
</script>
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
body {
background-color: rgba(0, 0, 0, 0);
margin: auto;
overflow: hidden;
font-family: "Source Sans Pro", sans-serif;
}
#master-container {
width: 100vw;
height: 100vh;
}
#slider-container {
position: fixed;
left: -100%;
animation-timing-function: ease-in-out;
height: 125px;
max-width: 460px;
padding: 20px;
display: flex;
border-radius: 0 25px 25px 0;
background: rgba(0,0,0,0.7);
}
#trackcover-container {
height: 125px;
width: 125px;
float: left;
margin: auto 0;
}
#trackcover {
height: 125px;
width: 125px;
border-radius: 5%;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px 0px;
}
#trackinfo-container {
float: right;
margin: auto 0;
padding-left: 15px;
}
#trackinfo-container span {
display: -webkit-box;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
#tracktitle {
color: white;
font-weight: bold;
font-size: 32px;
-webkit-line-clamp: 2;
}
#trackauthor {
color: white;
font-size: 25px;
margin-top: 10px;
-webkit-line-clamp: 1;
}
</style>
</head>
<body>
<div id="master-container">
<div id="slider-container">
<div id="trackcover-container">
<img id="trackcover" src="#">
</div>
<div id="trackinfo-container">
<span id="tracktitle"></span>
<span id="trackauthor"></span>
</div>
</div>
</div>
</body>
</html>
Raw
now-playing-widget.html
<!-- https://gist.github.com/Twanislas/8e790f247e8d975f26aca89358fe69ff -->
<!-- Recommended size for the view is 165px high, 500px wide -->
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
var timeoutHandle
var getData = function() {
$.ajax({
type: "GET",
url: "http://localhost:9863/query",
dataType: "json",
success: function(resp) {
if (resp.player.isPaused == false) {
if (timeoutHandle) {
clearTimeout(timeoutHandle)
timeoutHandle = undefined
}
var track = resp.track
if ($("span#tracktitle").html() != track.title) {
$("#widget-container").animate({opacity: 0}, 400, function() {
$("span#tracktitle").html(track.title)
$("span#trackauthor").html(track.author)
$("img#trackcover").attr("src", track.cover)
})
$("#widget-container").animate({opacity: 1})
}
} else {
if (!timeoutHandle) {
timeoutHandle = setTimeout(() => {
$("#widget-container").animate({opacity: 0}, 400, function() {
$("span#tracktitle").html("")
})
}, 5000)
}
}
}
});
};
// Get data
$(document).ready(function () {
setInterval(getData, 1000)
})
</script>
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
body {
background-color: rgba(0, 0, 0, 0);
margin: auto;
overflow: hidden;
font-family: "Source Sans Pro", sans-serif;
}
#master-container {
width: 100vw;
height: 100vh;
}
#widget-container {
position: fixed;
opacity: 0;
animation-timing-function: ease-in-out;
height: 125px;
width: 460px;
padding: 20px;
display: flex;
border-radius: 25px;
background: rgba(0,0,0,0.7);
}
#trackcover-container {
height: 125px;
width: 125px;
float: left;
margin: auto 0;
}
#trackcover {
height: 125px;
width: 125px;
border-radius: 5%;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px 0px;
}
#trackinfo-container {
float: right;
margin: auto 0;
padding-left: 15px;
}
#trackinfo-container span {
display: -webkit-box;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
#tracktitle {
color: white;
font-weight: bold;
font-size: 32px;
-webkit-line-clamp: 2;
}
#trackauthor {
color: white;
font-size: 25px;
margin-top: 10px;
-webkit-line-clamp: 1;
}
</style>
</head>
<body>
<div id="master-container">
<div id="widget-container">
<div id="trackcover-container">
<img id="trackcover" src="#">
</div>
<div id="trackinfo-container">
<span id="tracktitle"></span>
<span id="trackauthor"></span>
</div>
</div>
</div>
</body>
</html>
@Caseritto
Copy link

Thanks so much for this! I've been using this for my stream, unfortunately there is just one issue and that is if the song title or artist name have "&" in it the widget flashes on/off indefinitely while playing

@NoocaR
Copy link

NoocaR commented Jul 10, 2022

I dont understand is there a video I can watch to see how this is done... I am new to all this and a visual learner. any help would be fantastic.

@AmnesiacSloth
Copy link

AmnesiacSloth commented Jul 14, 2022 •
edited
Loading

I dont understand is there a video I can watch to see how this is done... I am new to all this and a visual learner. any help would be fantastic.

Make sure you have the Remote Control option toggled in Settings under the Integrations tab first otherwise the files will do nothing. Save
now-playing-widget.html or now-playing-slider.html to a local directory on your machine and in OBS add a browser source and check the local file option. Browse for the file on your pc and queue up a song to make sure it works! Hope this helps

Thanks so much for this! I've been using this for my stream, unfortunately there is just one issue and that is if the song title or artist name have "&" in it the widget flashes on/off indefinitely while playing

I replaced line 24 of now-playing-widget.html
if ($("span#tracktitle").html() != track.title) {
with
if ($("span#tracktitle").html().replace("&amp;","&") != track.title) {
since it seems that span#tracktitle.html() will place "&amp;" if there is ever an '&' in the song title.

@NoocaR
Copy link

NoocaR commented Jul 14, 2022

Thank you very much. your advice has been very helpful.

@DuceBrickinson
Copy link

anyone know what happened to the ytm desktop app? all the links even from their site are giving a 404 error?

@SentientNut
Copy link

@Twanislas Any chance this gets updated for v2+?

@venomin30
Copy link

@Twanislas Any chance this gets updated for v2+?

@SentientNut I've started to use https://github.com/topik/youtube-music-obs-widget if it helps

@SentientNut
Copy link

@SentientNut I've started to use https://github.com/topik/youtube-music-obs-widget if it helps

I did as well, but I liked the way this looked more when it worked with V1. I might end up modifying it to look better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment