Dit is een sobere website maar die mag je zelf opleuken en uploaden op het forum.
In de code je stationnaam, ipadres van je SAM, user & wactwoord invullen.
Live-voorbeeld kun je vinden op www.woutfm.nl/lp.php
Versie2: vind je hier: post39590.html#p39590
Code: Selecteer alles
<?php
$servername = "ipadres SAM";
$username = "username";
$password = "wachtwoord";
$database = "samdb";
$stationnaam = "WoutFM" ;
// Create connection
$db = new mysqli($servername, $username, $password, $database);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
$nu_artiest = mysqli_fetch_assoc(mysqli_query($db, "SELECT id, artist, title, duration, date_played, picture FROM songlist ORDER BY date_played DESC LIMIT 1")) ;
$straks = mysqli_query($db, "SELECT s.ID, artist, title, picture FROM queuelist q JOIN songlist s ON s.ID = q.songID WHERE s.songtype <> 'J' GROUP BY q.sortID ORDER BY q.sortID LIMIT 4");
$geweest = mysqli_query($db, "SELECT songID, artist, title, picture FROM historylist WHERE songtype <> 'J' ORDER BY date_played DESC LIMIT 1,4") ;
$result = round($nu_artiest['duration']/1000) - (time() - strtotime($nu_artiest['date_played']));
$time_left = $result <= 2 ? 30 : $result;
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Now Playing @ <?php echo $stationnaam; ?>"/>
<meta name="keywords" content="<?php echo $stationnaam; ?>, Nu Speelt, Request, verzoekje, webradio, dutch, broadcaster, radio, automatisering, SAM Broadcaster"/>
<meta name="robots" content="index, follow"/>
<meta name="copyright" content="Broadcasterforum.nl & <?php echo $stationnaam; ?>"/>
<meta http-equiv="Cache-control" content="public">
<meta http-equiv="refresh" content="<?php echo $time_left; ?>">
<title>Nu Speelt @ <?php echo $stationnaam; ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
.vinyl {
width: 250px;
height: 250px;
position: relative;
animation: spin 4s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.vinyl img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.grooves {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: repeating-radial-gradient(circle at 50%, transparent, #333 1px, transparent 1px, transparent 5px);
border-radius: 50%;
animation: spin 4s linear infinite;
z-index: 0;
}
.hole {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none; /* Laat klikken door de hole-overlay heen */
}
.hole::after {
content: "";
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.hole::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://broadcasterforum.nl/wout/cdcover.png);
pointer-events: none;
z-index: 1;
}
.album-cover {
position: relative;
display: inline-block;
}
.album-cover img {
z-index: 2;
display: block;
width: 170px;
height: 152px;
}
</style>
</head>
<body class="bg-light">
<div class="container text-center mt-5">
<div class="row"></div>
<div class="row justify-content-center">
<div class="col col-lg-1">
<div class="vinyl ">
<img src=".../../pictures/<?php echo $nu_artiest['picture'] ;?>" alt="Vinyl LP" onerror="this.onerror=null;this.src='https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb3MzM3ppdW9zMXg0Zjh1NjJnb3VwYmN1aTUwMHdwN3VuMTMzem9wcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1Y8qn9udTcAAT8b3rv/giphy.gif';">
<div class="grooves"></div>
<div class="hole"></div>
</div>
</div>
<div class="col col-lg-8 py-4">
<h1 class="fw-lighter" style="font-size:4vw;">Nu speelt</h1>
<h2 class="fw-lighter " ><?php echo $nu_artiest['artist'] ;?></h2>
<h4 class="fw-lighter"><?php echo $nu_artiest['title'] ;?></h4>
</div>
</div>
<div class="row"></div>
</div>
<!-- Straks -->
<?php if ($straks->num_rows > 0) :?>
<div class="container text-center">
<h2 class="fw-lighter opacity-25 mb-4">Straks</h2>
<div class="row"></div>
<div class="row justify-content-center">
<?php while ($result = $straks->fetch_object()) : ?>
<div class="col col-lg-2">
<div class="album-cover">
<img src=".../../pictures/<?php echo $result->picture ;?>" alt="<?php echo $result->artist." - ".$result->title ; ?>" onerror="this.onerror=null;this.src='https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb3MzM3ppdW9zMXg0Zjh1NjJnb3VwYmN1aTUwMHdwN3VuMTMzem9wcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1Y8qn9udTcAAT8b3rv/giphy.gif';">
<div class="overlay"></div>
</div>
<small class="fw-lighter text-body-secondary d-inline-block text-truncate" style="max-width: 170px;"><?php echo $result->artist." - ".$result->title ; ?></small>
</div>
<?php endwhile; ?>
</div>
<div class="row"></div>
</div>
<?php endif; ?>
<!-- Geweest -->
<?php if ($geweest->num_rows > 0) :?>
<div class="container text-center">
<h2 class="fw-lighter opacity-25 mb-4">Geweest</h2>
<div class="row"></div>
<div class="row justify-content-center">
<?php while ($result = $geweest->fetch_object()) : ?>
<div class="col col-lg-2">
<div class="album-cover">
<img src=".../../pictures/<?php echo $result->picture ;?>" alt="<?php echo $result->artist." - ".$result->title ; ?>" onerror="this.onerror=null;this.src='https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExb3MzM3ppdW9zMXg0Zjh1NjJnb3VwYmN1aTUwMHdwN3VuMTMzem9wcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1Y8qn9udTcAAT8b3rv/giphy.gif';">
<div class="overlay"></div>
</div>
<small class="fw-lighter text-body-secondary d-inline-block text-truncate" style="max-width: 170px;"><?php echo $result->artist." - ".$result->title ; ?></small>
</div>
<?php endwhile; ?>
</div>
<div class="row"></div>
</div>
<?php endif; ?>
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">© <?php echo date('Y') ; ?>, NowPlaying @ <?php echo $stationnaam;?></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
