Eine Bedienoberfläche für Webradio
Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den Livestream des Senders ab.
Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender.
Das Abspiel-Ziel ist konfigurierbar: Ein Radionsender kann entweder auf dem Gerät abgespielt werden, auf dem das radio-ui im Browser läuft oder auf einem anderen Gerät wie z.B. einem Raspberry Pi.
Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden.
Als reinem Client-Teil solcher Anwendungen fehlt dem radio-ui ein zentraler Anwendungskern mit Funktionen zum Speichern individueller Einstellungen an einem zentralen Ort. Die Trennung von Client und Server ist bewußt so gewählt, um einen gleichartigen Client-Teil für verschiedene Implementierungen auf der Serverseite zu ermöglichen.
Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: Link zur Demo.
Code und Demo des radio-ui veranschaulichen zusätzlich zum praktischen Nutzen als Webradiofernbedienung verschiedene Aspekte des Baus von Webanwendungen.
Neben dem Code in diesem Repository sind zur Nutzung des radio-ui die folgenden Komponenten erforderlich
Diese sind in der Datei index.html über die folgenden Einträge eingebunden.
<link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
<script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script src="../jslib/mustache/mustache.min.js"></script>
<script src="../jslib/app-menu/app-menu.js"></script>
Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen die obigen Einträge entsprechend angepasst werden.
Zur Verwendung des radio-ui muss dessen Code mit den Komponenen kombiniert werden, die vom radio-ui benötigt werden.
radio-ui/
hier der Inhalt aus diesem Repository
jslib/
jquery-1.11.1/
jquery-1.11.1.min.js
mustache/
mustache.min.js
app-menu/
hier der Inhalt aus dem app-menu-Repository
Die obige Ordnerstruktur wird auf einem HTTP-Server wie z.B. Tomcat oder lighttpd hinterlegt und kann dann mit einem Browser aufgerufen werden.
Spart Ladezeit zu Beginn. Lösungsansatz: Eine Funktion, die als Parameter das Element erhält, dessen html mit dem gerenderten Template ersetzt werden soll und den zu rendernden Inhalt. Die dynamische Ladefunktion
Der letzte Teil des Ablaufs muss asynchron gefasst sein, damit auf das Laden gewartet werden kann.
Für den Prototyp des radio-ui können verschiedene Arten des Umgangs mit Sendern und Abspielern hergestellt werden. Die folgenden Angaben zeigen die Punkte auf, an denen eine konkrete Implementierung ansetzen kann.
Aufruf
data/sender.json
Antwort
{
"senderliste": {
"titel": "Senderliste",
"inhalt": [
{
"senderid": 1,
"sendername": "hr info",
"senderurl": "http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3",
"senderlogo": "../bilder/hr-info.png"
},
{
"senderid": 2,
"sendername": "radiobob",
"senderurl": "http://bob.hoerradar.de/radiobob-live-mp3-hq",
"senderlogo": "../bilder/radio-bob-logo-80.png"
},
usw.
]
}
}
Noch nicht realisiert.
Noch nicht realisiert.
Noch nicht realisiert.
Aufruf
data/abspieler.json
Antwort
{
"abspielerliste": {
"titel": "Abspielerliste",
"inhalt": [
{
"abspielerid": 1,
"abspielername": "dieses Gerät",
"abspielerurl": "",
"abspielertyp":"lokal",
"abspielerbild": "",
"abspielerzustand":""
},
{
"abspielerid": 2,
"abspielername": "Raspberry Pi Wohnzimmer",
"abspielerurl": "",
"abspielertyp":"pirc",
"abspielerbild": "",
"abspielerzustand":"selected"
},
usw.
]
}
}
Noch nicht realisiert.
Noch nicht realisiert.
Noch nicht realisiert.