hi, thanks for your reply.
Yeah what I mean is that a text source is not capable of doing that, which is why you'd need the browser source which can do this kind of stuff. I posted something like this a while ago
I made another quick html file to demonstrate the browser widget.
HTML:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Widget</title> </head> <body> <style> p { text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; padding-top: 15px; color: white; filter: drop-shadow(0px 0px 4.5px black); font-size: 36pt; } @keyframes fadein { 0% { opacity: 0; margin-top: -60px; } 100% { opacity: 1; margin-top: 0px; } } @keyframes fadeout { 0% { opacity: 1; margin-top: 0px; } 100% { opacity: 0; margin-top: -60px; } } .fade-in { -webkit-animation-name: fadein; animation-name: fadein; } .fade-out { -webkit-animation-name: fadeout; animation-name: fadeout; } </style> <p id="data"></p> <script> var text = null; var data_element = document.getElementById("data"); function fetch_data() { fetch("http://localhost:1608/") .then((response) => response.json()) .then((data) => { let new_text = data["artists"][0] + " - " + data["title"]; if (new_text !== text) { text = new_text; data_element.innerText = text; data_element.classList.remove("fade-out"); data_element.classList.add("fade-in"); setTimeout(() => { data_element.classList.remove("fade-in"); data_element.classList.add("fade-out"); }, 8000); } }) .catch(function () { // Do nothing }); } setInterval(fetch_data, 500); </script> </body> </html>
tyvm for taking the time to do so and to reply :)
<!DOCTYPE html>
<html>
<style>
body { margin: 0px; overflow: hidden;}
.info {
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
}
.widget {
padding: 8px;
background-color: rgb(44, 44, 44);
border-radius: 4px;
border-color: rgb(22, 22, 22);
height: 85px;
box-shadow: 0px 0px 5px black;
margin: 8px;
position: relative;
z-index: -2;
}
#invi {
transition: opacity 1s linear 1s;
}
#cover {
height: 100%;
}
.image-box {
box-shadow: 0 0 4px 4px rgba(0, 0, 0, .5) inset;
border-radius: 4px;
border-width: 1px;
height: 100%;
float: left;
}
.image-box img {
position: relative;
z-index: -1;
border-radius: 4px;
}
#title {
font-size: xx-large;
font-weight: bold;
}
p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
margin: 0px;
padding-bottom: 2px;
}
#artist {
font-size: x-large;
}
</style>
<body>
<div class="widget" id="invi">
<div class="image-box">
<img src="placeholder.png" id="cover">
</div>
<div class="info">
<p id="title">Title</p>
<p id="artist">Artist</p>
</div>
</div>
</body>
<script>
var last_cover = '';
var last_artist = '';
var last_title = '';
var myfader = 0;
var myuptime = 9;
function fetch_data() {
fetch('http://localhost:1608/')
.then(response => response.json())
.then(data => {
// data now contains the json object with song metadata
// artist list
var artists = '';
var array = data['artists'];
for (var i = 0; i < array.length; i++) {
artists += array[i];
if (i < array.length - 1)
artists += ', ';
}
document.getElementById('title').innerText = data['title'];
if (data['cover_url'] !== last_cover || // Refresh only if meta data suggests that the cover changed
(data['title'] !== last_title && // When using MPD the path is always the cover path configured in tuna
artists !== last_artist)) // which means it won't change so we check against other data
{
document.getElementById('invi').style.opacity = '1';
myfader = 0;
// Random number at the end is to prevent caching
document.getElementById('cover').src = data['cover_url'] + '?' + Math.random();
last_cover = data['cover_url'];
}
if (artists === data['album'] || data['album'] === undefined) // Some singles have the artist as the album, which looks strange with the other subtitle
document.getElementById('artist').innerText = 'by ' + artists;
else
document.getElementById('artist').innerText = 'by ' + artists + ' from ' + data['album']
last_artist = artists;
last_title = data['title'];
})
.catch(function() {
// Do nothing
});
myfader++
if (myfader >= myuptime * 2){
document.getElementById('invi').style.opacity = '0';
}
}
setInterval(fetch_data, 500);
</script>
</html>I can't reproduce your issue. Did you check this checkbox?
I'm also experiencing what looks like the same issue.
Are you using the latest version? There was a crash a while ago, but it has been fixed.
Yes for sure but how i can send it directly to you?Can you provide the crash report and the obs log file?
You can post them here or send them to me via email (uni@vrsal.de)
It seems that the crash is happening in an encoder thread, which is strange. When does obs exactly crash and can you reproduce it?
I just need the exact steps you're going through, so I can test this and whether you can reproduce the crash, but from what I can tell it's probably not something that I can't fix.
What music source are you using?
spotify