Eine Bedienoberfläche für Webradio
Diese Anwendung ist zur Zeit im Bau. Der aktuelle Prototyp zum Stand des Codes in diesem Repository ist hier zu sehen: Link zum Prototyp.
Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den Sender 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.
Neben dem praktischen Nutzen veranschaulicht das radio-ui verschiedene Aspekte des Baus von Webanwendungen:
Wie in der Anwendung radio-ui die obigen Themen umgesetzt sind, ist auf der Beispielseite näher betrachtet.
Zur Verwendung des radio-ui sind 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 wie beispielsweise einem Content Delivery Network (CDN) eingebunden werden, müssen nur die obigen Einträge entsprechend angepasst werden.
Zum Abspielen auf einem Raspberry Pi ist die Nutzung der Anwendung pirc vorgesehen, die zum Spielen von Audiostreams den omxplayer mit einer unter Tomcat laufenden Fernbedienung kombiniert, die per HTTP gesteuert werden kann.
Auf der Seite Kombination von pirc und radio-ui ist beschrieben, wie pirc aus dem radio-ui heraus genutzt 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.