<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zyphen's Now Playing</title>
<link rel="stylesheet" href="SongStyle.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
var newSong;
var newArtist;
var shown = false;
function hideText() {
$("#artist").animate({
marginLeft: "-100px",
opacity: 0
}, 300);
$("#song").animate({
marginLeft: "-100px",
opacity: 0
}, 300);
document.getElementById("song").classList.remove("scrolling");
document.getElementById("artist").classList.remove("scrolling");
}
function updateText() {
document.getElementById("artist").innerHTML = newArtist;
document.getElementById("song").innerHTML = newSong;
}
function showText() {
if(document.getElementById("artist").clientWidth > 260){
$("#artist").animate({
marginLeft: "290px",
opacity: 1
}, 300, function() {
$("#artist").css("margin-left", "7px");
console.log("changed");
});
}
else{
$("#artist").animate({
marginLeft: "7px",
opacity: 1
}, 300);}
if(document.getElementById("song").clientWidth > 260){
$("#song").animate({
marginLeft: "290px",
opacity: 1
}, 300, function() {
console.log("lngsong")
$("#song").css("margin-left", "7px");
});}
else {
$("#song").animate({
marginLeft: "7px",
opacity: 1
}, 300);}
if(document.getElementById("song").clientWidth > 260) setTimeout(function(){document.getElementById("song").classList.add("scrolling");}, 300);
if(document.getElementById("artist").clientWidth > 260) setTimeout(function(){document.getElementById("artist").classList.add("scrolling");}, 300);
console.log(document.getElementById("song").clientWidth);
}
function checkUpdate() {
$.get("Artist.txt", function(art) {
newArtist = art.replace(/&/g, "&");
}).then(
$.get("Track.txt", function(sng) {
newSong = sng.replace(/&/g, "&");
})).then(displayData);
setTimeout(checkUpdate, 2000);
}
function displayData() {
if(newSong != document.getElementById("song").innerHTML) {
if(newSong.length > 1 && !shown) {
$("#bigdiv").animate({
marginLeft: "0px",
}, 500)
shown = true;
}
if(newSong.length < 1 && shown) {
$("#bigdiv").animate({
marginLeft: "-500px",
}, 500)
shown = false;
}
console.log("New song, old song: " + document.getElementById("song").innerHTML + " new song: " + newSong);
hideText();
setTimeout(updateText, 300);
setTimeout(showText, 400);
var imgpath = "Artwork.png?t=" + newSong + newArtist;
document.getElementById("image").setAttribute("src", imgpath);
$("#image2").fadeOut(500, function(){
document.getElementById("image2").setAttribute("src", imgpath);
$("#image2").show();
});
}
}
$(document).ready(checkUpdate);
</script>
</head>
<body>
<div id=bigdiv>
<img id=image>
<img id=image2 src="Artwork.png">
<div id=smalldiv>
<p id=artist></p>
<br>
<p id=song></p>
</div>
</div>
</body>
</html>
www.youtube.com
