Bedienoberfläche für Webradio
ulrich
2018-01-05 742e7508f4e126246fc965f88569df0927f8f7f0
commit | author | age
623a61 1 # radio-ui
U 2
3 Eine Bedienoberfläche für Webradio
851c9c 4
70e1ff 5 ## Prototyp
U 6
ec55bf 7 Diese Anwendung ist zur Zeit im Bau. Der aktuelle Prototyp zum Stand des Codes in diesem Repository ist hier zu sehen: [Link zum Prototyp](/data/ulrich/test/radio-ui).
851c9c 8
ad1fef 9 ## Vorgesehene Funktionen
U 10
11 Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den Sender ab.
12
13 Radiosender können hinzugefügt, geändert und gelöscht werden. Ein Suchfeld ermöglicht das Einschränken der Übersicht auf bestimmte Sender.
14
fe1cb2 15 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.
ad1fef 16
U 17 Zum Abspielen auf einem Raspberry Pi ist die Nutzung der Anwendung [pirc](/gitblit/docs/pirc.git) vorgesehen, die zum Spielen von Audiostreams den [omxplayer](https://elinux.org/Omxplayer) mit einer unter [Tomcat](https://de.wikipedia.org/wiki/Apache_Tomcat) laufenden Fernbedienung kombiniert, die per HTTP gesteuert werden kann.
18
36646e 19 ## Nutzung von Vorlagen
851c9c 20
e8a097 21 Die Anwendung radio-ui ist ein Beispiel für die Nutzung von Vorlagen in Webanwendungen. Die Datei `index.html` definiert Bereiche einer HTML-Seite als `div`-Elemente, die während der Ausführung des Programmes dynamisch mit wechselnden Inhalten gefüllt werden.
U 22
6592dc 23 Inhalte werden dabei mit Hilfe von [Mustache](https://github.com/janl/mustache.js) aus einer Vorlage und einer Inhaltsbeschreibung in [JSON](https://de.wikipedia.org/wiki/JavaScript_Object_Notation) zu [HTML](https://de.wikipedia.org/wiki/Hypertext_Markup_Language) zusammengesetzt.
851c9c 24
36646e 25 ## Abhängigkeiten
f927ec 26
36646e 27 Zur Verwendung des radio-ui sind die folgenden Komponenten erforderlich
f927ec 28
36646e 29 + [jQuery](http://jquery.com/)
U 30 + [Mustache](https://github.com/janl/mustache.js)
31 + [app-menu](/gitblit/docs/web!app-menu.git)
f927ec 32
36646e 33 Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.
f927ec 34
36646e 35 ````
U 36 <link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
37 <link rel="stylesheet" type="text/css" href="../jslib/app-menu/app-menu.css">
38 <script src="../jslib/jquery-1.11.1/jquery-1.11.1.min.js"></script>
39 <script src="../jslib/mustache/mustache.min.js"></script>
40 <script src="../jslib/app-menu/app-menu.js"></script>
41 ````
851c9c 42
899220 43 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.
851c9c 44
fe1cb2 45 ## Kombination von pirc und radio-ui
U 46
47 Zur Verwendung des radio-ui mit pirc kann die Anwendung radio-ui direkt auf einen Raspberry Pi installiert werden, beispielsweise ähnlich wie pirc als Webanwendung für Tomcat. Stattdessen kann radio-ui auch von einer anderen Maschine aus die pirc-Instanz auf einen Raspberry Pi aufrufen.
48
49 Auch eine direkte Steuerung des omxplay aus radio-ui heraus ist denkbar. Das wäre allerdings eine Doppelung der meisten der in pirc bereits enthaltenen Funktionen. Zudem würde die engere Koppelung zwischen Pi und radio-ui die Verwendbarkeit des radio-ui einschränken.
50
51 ### Abspielen auf dem Raspberry Pi
52
53 Kommandos an pirc werden via HTTP an die betreffende Maschine gesendet und bestehen aus einem Klassennamen `c`, einem Methodennamen `m` und einem Parameter `p`. Ein Kommando setzt sich wie folgt zusammen
54
55 1. `http://raspi:8080/` - URL der Maschine
56 1. `pirc/` - Name des Kontext, unter dem die Anwendung pirc läuft
57 1. `sys/rpc` - Service-Endpunkt der pirc-API
58 1. `c=de.uhilger.pirc.App` - Name der Klasse von pirc, die die Abspielmethode enthält
59 1. `m=abspielen` - Name der Methode zum Abspielen
60 1. `p=Sender-URL` - der Parameter mit dem URL zum Audiostream des Webradiosenders
61
62 Zum Aufruf des Kommandos mit dem radio-ui kann es weitgehend unverändert bleiben. Nur der Teil 6. mit dem URL des Senders muss veränderlich gestaltet sein.
63
64 #### Beispiel Abspielen
65
66 Ist die Fernbedienung pirc auf einem Raspberry Pi installiert, lautet das Kommando zum Abspielen des Webradiosenders radiobob (vgl. Senderliste weiter unten) wie folgt
67
68 ````
69 http://raspi:8080/pirc/sys/rpc?c=de.uhilger.pirc.App&m=abspielen&p=http://bob.hoerradar.de/radiobob-live-mp3-hq
70 ````
71
72 Das obige Kommando geht davon aus, dass der betreffende Raspberry Pi unter dem Namen `raspi` auf Port `8080` über `HTTP` erreichbar ist und dass auf dem Pi die Anwendung pirc unter dem Kontextnamen `pirc` installiert wurde. Es bewirkt, dass auf dem betreffenden Raspberry Pi eine Instanz des omxplayer gestartet wird und diese fortlaufend den Webradio-Stream unter der angegebenen Adresse abspielt.
73
74 #### Beispiel Stoppen
75
76 Zum Stoppen des zur Zeit abgespielten Webradios dient das folgende Kommando
77
78 ````
79 http://raspi:8080/sys/rpc?c=de.uhilger.pirc.App&m=kommando&p=q
80 ````
81
82 Mit dem obigen Aufruf wird das Kommando `q` an den laufenden Prozess des omxplayer gesendet. Das bewirkt, dass der omxplayer das Abspielen stoppt und der laufende omxplayer-Prozess endet.
83
84
899220 85 ## Radiostreams
851c9c 86
899220 87 Nachfolgend die Adressen einiger Radiostreams
851c9c 88
899220 89 ### hr3
851c9c 90
899220 91 [Livestream-Übersicht](http://www.hr3.de/service/hr3-online-hoeren,webradio-100.html)
851c9c 92
899220 93 128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
851c9c 94
899220 95 48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3
f927ec 96
899220 97 ### hr info
f927ec 98
899220 99 [Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
f927ec 100
899220 101 128 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
f927ec 102
899220 103 48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3
36646e 104
899220 105 ### radiobob
36646e 106
899220 107 [Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
36646e 108
899220 109 MP3: http://bob.hoerradar.de/radiobob-live-mp3-hq
36646e 110
899220 111 Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob
36646e 112
899220 113 ### FFH
36646e 114
899220 115 [Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html)
36646e 116
899220 117 128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3
36646e 118
899220 119 48kbps http://mp3.ffh.de/radioffh/livestream.aac