Skip to content

Instantly share code, notes, and snippets.

@Twanislas

Twanislas/now-playing-slider.html

Last active March 20, 2023 08:39
Star
Embed
What would you like to do?
Learn more about clone URLs
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>
@AmnesiacSloth
Copy link

AmnesiacSloth commented Jul 14, 2022 •
edited

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.

@venomin30
Copy link

I replaced line 24 of now-playing-widget.html

@AmnesiacSloth Hmm I've tried this line change but still see the flashing issue :(

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