<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing Now Playing</title>
</head>
<body>
<div style="display: block;">
<h1 style="display: inline-block;">Now Playing: </h1>
<h1 style="display: inline-block; border-style:solid; border-color: brown; border-radius: 50px; padding: 10px;"
id="title"></h1>
</div>
<script>
async function nowPlaying() {
let titleElement = document.getElementById('title');
let notAvailable = "Program Name Not Available";
try {
const url = "http://radio.protestbandet.dk:8000/status-json.xsl";
let response = await fetch(url);
let icecast = await response.json();
let nowPlaying = icecast.icestats.source.title;
if (nowPlaying.trim() == "") {
titleElement.innerText = notAvailable
}
else {
titleElement.innerText = nowPlaying
}
}
catch (whoops) {
titleElement.innerText = notAvailable;
}
}
nowPlaying()
setInterval(nowPlaying, 30000)
</script>
</body>
</html>