Hallo Zusammen,
wie bereits im anderen Thema (PHP Einsteiger) bin ich auf der Suche nach Jemanden, der mit den Code umwandeln kann.
Mit Javascript habe ich mich bisher noch nicht beschäftigt, aber mit PHP.
Daher habe ich es zunächst versucht in PHP umzusetzen - erfolgreich!
Danach habe ich es VERSUCHT in JS zu programmieren, bin aber lediglich gescheitert.
Hier zunächst der PHP-Code mit der HTML-Stelle:
Was passiert hier?
Hierbei wird der aktuelle Song aus dem Radio-Stream angezeigt.
Was ist wichtig?
Es ist auf jeden Fall wichtig, dass sich der Code von alleine neu lädt, damit ich die Seite nicht immer neuladen muss und der Balken von alleine "zunimmt".
Preis und Aufwand
Ich habe für das PHP-Projekt ganze 5 Minuten gebraucht... Daher hoffe ich, dass ihr das freiwillig macht und ich nichts dafür bezahlen muss.
Ich bedanke mich bereits im Voraus an alle, die an diesem "Projekt" interessiert sind und mir dabei helfen wollen.
Grüße
Ben
wie bereits im anderen Thema (PHP Einsteiger) bin ich auf der Suche nach Jemanden, der mit den Code umwandeln kann.
Mit Javascript habe ich mich bisher noch nicht beschäftigt, aber mit PHP.
Daher habe ich es zunächst versucht in PHP umzusetzen - erfolgreich!
Danach habe ich es VERSUCHT in JS zu programmieren, bin aber lediglich gescheitert.
Hier zunächst der PHP-Code mit der HTML-Stelle:
PHP-Code:
<?php
$station = "lsradio";
$json_station = file_get_contents("http://api.laut.fm/station/".$station."/current_song");
$obj_info = json_decode($json_station);
$artist = $obj_info->artist->name;
$titel = $obj_info->title;
$ende = $obj_info->ends_at;
$t_ende = strtotime($ende);
$now = date("Y-m-d H:i:s");
$t_now = strtotime($now);
$diff = $t_ende - $t_now;
$length = $obj_info->length;
$diff;
$val_time = 100 - (($diff / $length) * 100);
?>
HTML-Code:
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src="https://kit.fontawesome.com/e2c0b2c7a5.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>CP | lsradio</title> </head> <body> <div class="row"> <div class="container-fluid bg-primary p-5" id="start"> <div class="conatiner"> <p class="display-2 text-center text-white">Streamplan</p> </div> </div> </div> <div class="container"> <div class="row mt-5 pt-5"> <div class="col-2 border-right"> <nav class="nav flex-column"> <a class="nav-link h5 text-secondary" href="/index.php">Dashboard</a> <a class="nav-link h5 text-secondary" href="/stream.php">Plan</a> <a class="nav-link h5 text-secondary navbar-brand d-inline-block align-top" href="/cp/profile.php"><img src="/img/avatar/001.png" width="30" height="30"> Profil</a> </nav> </div> <div class="col-10"> <div class="row"> <div class="col-12"> <div class="card p-2"> <div class="d-flex align-items-center"> <span class="badge badge-primary mr-3 px-2"> <h2><i class="fas fa-play"></i></h2> </span> <div> <h3 class="m-0" id="song-title"><?php echo $titel; ?> - <span id="song-autor"><?php echo $artist; ?></span></h3> <small class="text-muted">Aktueller Titel</small> </div> </div> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" style="width: <?php echo $val_time; ?>%" aria-valuenow="<?php echo $val_time; ?>" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> </div> </div> </div> </div> </body>
Was passiert hier?
- Titel und Interpret aus der API abgefragt
- Ende des aktuellen Titels und aktuelle Uhrzeit
- Länge des Titels
- Alles in Prozentrechnung - Warum? Damit man die Breite des Balkens (siehe nächstes Bild) stätig zunimmt. Als wäre das eine Timeline.
Hierbei wird der aktuelle Song aus dem Radio-Stream angezeigt.
Was ist wichtig?
Es ist auf jeden Fall wichtig, dass sich der Code von alleine neu lädt, damit ich die Seite nicht immer neuladen muss und der Balken von alleine "zunimmt".
Preis und Aufwand
Ich habe für das PHP-Projekt ganze 5 Minuten gebraucht... Daher hoffe ich, dass ihr das freiwillig macht und ich nichts dafür bezahlen muss.
Ich bedanke mich bereits im Voraus an alle, die an diesem "Projekt" interessiert sind und mir dabei helfen wollen.
Grüße
Ben
Kommentar