126 lines
3.6 KiB
HTML
126 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="https://code.jquery.com/jquery.min.js"></script>
|
||
|
|
<script>
|
||
|
|
function play() {
|
||
|
|
var my = document.getElementById('player');
|
||
|
|
my.currentTime = 0;
|
||
|
|
/**this one loops***/
|
||
|
|
if ($('.btn').find('span i').hasClass('fa-stop')) {
|
||
|
|
$('.btn').find('span i').removeClass('fa-stop').addClass('fa-play-circle');
|
||
|
|
$('.texto').text("Play");
|
||
|
|
}
|
||
|
|
if (my.paused) {
|
||
|
|
my.play();
|
||
|
|
} else {
|
||
|
|
my.pause();
|
||
|
|
my.currentTime = 0;
|
||
|
|
}
|
||
|
|
my.addEventListener("ended", function(e) {
|
||
|
|
$('.btn').find('span i').removeClass('fa-play-circle').addClass('fa-stop');
|
||
|
|
$('.texto').text("Stop");
|
||
|
|
my.play();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateTitle() {
|
||
|
|
const url = "/json";
|
||
|
|
try {
|
||
|
|
const response = await fetch(url);
|
||
|
|
if (!response.ok) {
|
||
|
|
//throw new Error(`Response status: ${response.status}`);
|
||
|
|
} else {
|
||
|
|
|
||
|
|
const json = await response.json();
|
||
|
|
//console.log(json);
|
||
|
|
document.getElementById('title').innerText = json.title;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// document.shredIng = { title: "" };
|
||
|
|
// function updateTitle() {
|
||
|
|
// fetch("/js", {
|
||
|
|
// headers: { 'Content-Type': 'application/json'
|
||
|
|
// }
|
||
|
|
// }).then(function(response) {
|
||
|
|
// if(!response.ok) {
|
||
|
|
// // oh no, an error. better do stuff!
|
||
|
|
// }
|
||
|
|
// else {
|
||
|
|
// if(response.json && response.json.title) {
|
||
|
|
// document.shredIng.title = response.json.title;
|
||
|
|
|
||
|
|
// document.getElementById('title').innerText = document.shredIng.title;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
|
||
|
|
setInterval(updateTitle, 7200);
|
||
|
|
</script>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Rubik+80s+Fade&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
html {
|
||
|
|
background: #000;
|
||
|
|
padding: 0px;
|
||
|
|
margin: 0px;
|
||
|
|
border: 0px;
|
||
|
|
}
|
||
|
|
.fb {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
min-height: 90vh;
|
||
|
|
}
|
||
|
|
.np {
|
||
|
|
padding: 0px;
|
||
|
|
margin: 0px;
|
||
|
|
border: 0px;
|
||
|
|
}
|
||
|
|
.bg {
|
||
|
|
background: #000;
|
||
|
|
background-image: linear-gradient(180deg,rgba(117, 117, 117, 1) 0%, rgba(110, 110, 110, 1) 17%, rgba(20, 20, 20, 1) 100%);
|
||
|
|
}
|
||
|
|
.rubik-80s-fade-regular {
|
||
|
|
font-family: "Rubik 80s Fade", system-ui;
|
||
|
|
font-weight: 400;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
h1, h2, h3, h4, h5 {
|
||
|
|
font-family: "Rubik 80s Fade", system-ui;
|
||
|
|
font-weight: 400;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
<title>Shred.ing</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="bg padding fb"><div style="text-align: center">
|
||
|
|
<div class=="np bg" id="music" style="padding-left:.5rem;">
|
||
|
|
<h1 style="font-size: 500%" class="np">Shred.ing</h1>
|
||
|
|
<h2 style="font-size: 330%" class="np">Internet Radio</h2>
|
||
|
|
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#player" onclick="play();">
|
||
|
|
<!-- <span><i class="fa fa-play-circle" aria-hidden="true"></i>
|
||
|
|
|
||
|
|
<span class="texto">Play</span>
|
||
|
|
</span> -->
|
||
|
|
<audio controls id="player" class="collapse">
|
||
|
|
<source src="https://shred.ing" type="audio/mp3">
|
||
|
|
</audio>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div id="title" style="border: 1px dashed cyan; font-family: Arial, Helvetica, sans-serif; font-size: 150%; padding: .75rem; margin-top: .5rem; text-align: center; padding-top: .75rem; color: #3c3; filter: drop-shadow(1.6px 1.3px .25px #c3c);" class="">
|
||
|
|
$Title$
|
||
|
|
</div></div>
|
||
|
|
</div>
|
||
|
|
<script> updateTitle(); </script>
|
||
|
|
</body>
|
||
|
|
</html>
|