| 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 |
