<!-- 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> |
<!-- 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> |
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.
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("&","&") != track.title) {
since it seems that span#tracktitle.html() will place "&"
if there is ever an '&' in the song title.
Thank you very much. your advice has been very helpful.
I replaced line 24 of now-playing-widget.html
@AmnesiacSloth Hmm I've tried this line change but still see the flashing issue :(
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