• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Webradio, kleines Bild einfügen was gerade läuft

N

noname13

Neues Mitglied
Hallo,
ich habe auf meinem Raspberry ein Webradio programmiert und möchte jetzt gerne auf der index.html ein kleines Kästchen einfügen, in dem angezeigt wird, was gerade läuft. Kann mir jemand schreiben, wie ich das am besten hinbekomme?
Danke schonmal!!! :)
 
Ich habe diese Anleitung genommen:
Da wird einfach mit mpd und einer Playlist ein Webradio erstellt und die index.html dann bearbeitet. Mit php befehlen wird dann auf klick eines Sender Icons der entsprechende Sender abgerufen und abgespielt.
 
Hier ist sie:

HTML: 
<html><body>
<head>
<link rel="shortcut icon" href="favicon.png"><link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>

<body bgcolor="#00BFFF">
<br><br>
<center>
<a href="stop.php"><img src="stop.png"></a>
<br><br>
<a href="leiser.php"><img src="minus.png"></a>
&nbsp;&nbsp;&nbsp;
<a href="lauter.php"><img src="plus.png"></a>
<br><br>
<a href="standby.php"><img src="standby.png"></a>
<br><br><br><br><br>
<a href="swr3.php"><img src="swr3.png">
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="landeswelle.php"><img src="landeswelle.png"></a>
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="mdrthueringen.php"><img src="mdrthueringen.png">
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="mdrjump.php"><img src="mdrjump.png">
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="sputnik.php"><img src="sputnik.png">
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="ostseewelle.php"><img src="ostseewelle.jpg">
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="swr1.php"><img src="swr1.png">
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="antennethueringen.php"><img src="antennethueringen.png">
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="antenne1.php"><img src="antenne1.png"></a>
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="bayern3.php"><img src="bayern3.png"></a>
<br>
<hr style="width:700px; background-color:#000000; height:2px;
    text-align:center; border:1px solid #000000;">
<br>
<a href="hr3.php"><img src="hr3.png"></a>
<br><br>
</center>
</body></html>


Gibt es eigentlich eine Möglichkeit den Radiotext in einem kleinen Fenster anzeigen zu lassen?
 
Zuletzt bearbeitet:
Da sind doch Links für die einzelnen Sender und wenn man da drauf klickt, wird eine neue Seite geöffnet. Müsstest Du das jeweilige Sendericon nicht auf dieser neuen Seite anzeigen?
 
Nein, wenn ich auf ein Sender Icon klicke wird nur der Stream gestartet aber kein neues Fenster geöffnet.
Ich hätte halt gerne oben neben den Stopp und Laut/Leise Tasten ein kästchen, in dem das Icon des gerade laufenden Radios angezeigt wird und evtl noch darunter der Radiotext, mit gesendeten Infos.
 
Ah ja, jetzt verstehe ich. Du könntest das Sender-Icon in einem URL-Parameter übergeben, mit Javascript auswerten und das Icon anzeigen:
Code: 
<?php
system ( "mpc play 10");
header("Location:index.html?icon=swr.png");
?>
 
Danke! Aber muss ich dazu nicht auch bei der index.html etwas ändern? Der Browser weiß ja jetzt noch nicht wo er das Icon anzeigen soll
 
Ein img-Tag für das Icon dort anlegen, wo es angezeigt werden soll:
HTML: 
<a href="stop.php"><img src="stop.png"></a>
<br><br>
<a href="leiser.php"><img src="minus.png"></a>
&nbsp;&nbsp;&nbsp;
<a href="lauter.php"><img src="plus.png"></a>
<br><br>
<a href="standby.php"><img src="standby.png"></a>
<br><br>
<img id="sender-icon">
Und dieses Javascript im head:
Code: 
<script type="text/javascript">
    window.onload = function() {
        icon = location.href.match(/\?icon=(.*)$/)[1];
        if (icon) document.getElementById("sender-icon").src = icon;
    }
</script>
 
Das ist ja genial! Vielen vielen Dank!!! Funktioniert 1a.
Kannst du mir noch schnell schreiben, wie man die größe des angezeigten icons anpassen kann?
 
Die Größe kann man zwar über CSS anpassen, aber es ist mehr zu empfehlen, gleich die Grafik mit einem Bildbearbeitungsprogramm in die richtige Größe zu bringen.
 
Warum bindest du die Shoutcast nicht ein, die besitzt jedes Webradio und hat alle Daten die du benötigst.
Radioname, Interpret, Musiktitel usw.
Wie das funktioniert, dazu gibt es unzählige Tutorials.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben