Json HTML CSS JS (Example)
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Snaz- Playing Now from json file</title>
<!--styles-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="css/style.css">
<!--scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/playing-now.js"></script>
</head>
<body>
<div id="wrapper">
<div id="artist"></div>
<div id="song"></div>
<!--<div id="album"></div>-->
</div>
</body>
</html>- js/playing-now.js
var currentsong;
$(document).ready(function () {
start();
});
function start() {
setInterval(function () {
getJsonData(function (data) {
if (currentsong != data.song) {
$('#artist').html(data.artist).animateCss('fadeInLeft');
$('#song').html(data.song).animateCss('fadeInRight');
// $('#album').html(data.album).animateCss('bounceInLeft');
currentsong = data.song;
}
});
}, 1000);
}
// Get Json data from file on server
function getJsonData(callback) {
var xmlhttp = new XMLHttpRequest();
var url = 'http://127.0.0.1/playing-now/track-info.json';
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
callback(data);
}
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
// jquery extention function for animate.css
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function () {
$(this).removeClass('animated ' + animationName);
});
}
});- css/style.css
/*#album{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
}*/
#artist{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 80px;
color: yellow;
}
#song{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
color: grey;
}
#wrapper{
width: 800px;
margin: 0 auto;
text-align: left;
}
body{
overflow: hidden;
}