Ankündigung

Einklappen
Keine Ankündigung bisher.

PHP Code in Javascript umwandeln (5 Minuten)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • PHP Code in Javascript umwandeln (5 Minuten)

    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:
    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?
    1. Titel und Interpret aus der API abgefragt
    2. Ende des aktuellen Titels und aktuelle Uhrzeit
    3. Länge des Titels
    4. Alles in Prozentrechnung - Warum? Damit man die Breite des Balkens (siehe nächstes Bild) stätig zunimmt. Als wäre das eine Timeline.
    Wozu das ganze?
    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

  • #2
    Hier ist mal ein Beispiel mit Javascript.
    https://github.com/lautde/lautfm_js_tools
    Einen laufenden Balken kannst du dann selber erstellen.
    Function erstellen wo
    anfangs Zeit von der Endzeit abgezogen wird und dann mit setInterval einen Balken erzeugen.
    Sobald das neue Lied startet wird die function wieder neu gestartet
    Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
    Erreichbar in mein Javascript-Forum und in Facebook-Chat

    Kommentar


    • #3
      hab mir das 5 minuten angeschaut und nicht verstanden was du willst.

      Kommentar

      Lädt...
      X