Bedienoberfläche für Webradio
ulrich
2021-09-29 010cf066446c9cbb96c6bd99db8701e9329bf686
README.md
@@ -2,29 +2,27 @@
Eine Bedienoberfläche für Webradio
## Prototyp
## Funktionen
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).
## Vorgesehene Funktionen
Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den Sender ab.
Das radio-ui zeigt eine Übersicht von Radiosendern. Antippen eines Senders in der Übersicht spielt den [Livestream](/gitblit/doc/web!radio-ui.git/master/radiostreams.md) 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 läuft oder auf einem anderen Gerät wie z.B. einem Raspberry Pi.
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](/gitblit/doc/web!radio-ui.git/master/pirc.md).
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.
## Protoyp, Demo
## Nutzung von Vorlagen
Das radio-ui als einzelne Webanwendung hat prototypischen Charakter, es kann für allerlei Webradio-Anwendungen die wiederverwendbare Grundlage bilden.
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.
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.
Inhalte werden dabei mit Hilfe von [Mustache](https://github.com/janl/mustache.js) aus einer Vorlage und einer Inhaltsbeschreibung im JSON-Format zu HTML-Inhalt zusammengesetzt.
Der aktuelle Stand des Codes in diesem Repository kann hier ausprobiert werden: [Link zur Demo](/data/ulrich/test/radio-ui/index.html).
Code und Demo des radio-ui [veranschaulichen](/gitblit/doc/web!radio-ui.git/master/beispiel.md) zusätzlich zum praktischen Nutzen als Webradiofernbedienung verschiedene Aspekte des Baus von Webanwendungen.
## Abhängigkeiten
Zur Verwendung des radio-ui sind die folgenden Komponenten erforderlich
Neben dem Code in diesem Repository sind zur Nutzung des radio-ui die folgenden Komponenten erforderlich
+ [jQuery](http://jquery.com/)
+ [Mustache](https://github.com/janl/mustache.js)
@@ -33,47 +31,162 @@
Diese sind in der Datei `index.html` über die folgenden Einträge eingebunden.
````
<link rel="stylesheet" type="text/css" href="../jslib/app-menu/nav-toggle.css">
<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.
Sollen einzelne Komponenten von einem anderen Ort, beispielsweise aus einem Content Delivery Network (CDN) eingebunden werden, müssen diese Einträge angepasst werden.
## Radiostreams
### Zeichensätze
Nachfolgend die Adressen einiger Radiostreams
Neben den obigen Komponenten werden zudem die Zeichensätze `Amethysta`, `Oswald` und `Roboto Condensed` verwendet. Sie können von Google Fonts heruntergeladen werden und sind über das Stylesheet `app.css` von folgenden Orten auf dem Server eingebunden:
### hr3
````
/lib/fonts/Amethysta/Amethysta-Regular.ttf
/lib/fonts/Oswald/Oswald-Regular.ttf
/lib/fonts/Oswald/Oswald-Bold.ttf
/lib/fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf
/lib/fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf
````
[Livestream-Übersicht](http://www.hr3.de/service/hr3-online-hoeren,webradio-100.html)
### Bilder
128 kbit http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
Zu jedem Sender wird an der Bedienoberfläche des radio-ui ein Piktogramm angezeigt. In der Demo des radio-ui ist hierfür der Ordner `bilder` vorgesehen. Prinzipiell kann aber jeder Ablageort für Bilder verwendet werden. Jedem Sender ist ein URL zu einem Bild über die Datei `sender.json` zugeordnet. Der URL für ein Bild kann zur Laufzeit über die Funktion `Sender ändern` geändert werden.
48 kbit http://hr-hr3-live.cast.addradio.de/hr/hr3/live/mp3/48/stream.mp3
## Installation
### hr info
Zur Verwendung des radio-ui muss dessen Code mit den Komponenen kombiniert werden, die vom radio-ui benötigt werden.
[Livestream-Übersicht](http://www.hr-inforadio.de/livestream/index.html)
1. Code aus diesem Repository herunterladen
1. Die unter Abhängigkeiten oben angegebenen Komponenten herunterladen
1. Aus den heruntergeladenen Teilen eine Ordnerstruktur bilden
128 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3
````
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
lib/
  fonts/
    Amethysta/
      Amethysta-Regular.ttf
    Oswald/
      Oswald-Regular.ttf
      Oswald-Bold.ttf
    Roboto_Condensed/
      RobotoCondensed-Regular.ttf
      RobotoCondensed-Bold-ttf
bilder/
  hier Bilder nach Wahl
````
48 kBit/s http://hr-hrinfo-live.cast.addradio.de/hr/hrinfo/live/mp3/48/stream.mp3
Die obige Ordnerstruktur wird auf einem HTTP-Server wie z.B. [Tomcat](https://de.wikipedia.org/wiki/Apache_Tomcat) oder [lighttpd](https://de.wikipedia.org/wiki/Lighttpd) hinterlegt und kann dann mit einem Browser aufgerufen werden.
### radiobob
## Schnittstellenbeschreibung
[Livestream-Übersicht](http://www.radiobob.de/radiobob/empfang/livestream)
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.
MP3: http://bob.hoerradar.de/radiobob-live-mp3-hq
### Sender
Mobile Nutzung: http://bob.hoerradar.de/aac-radiobob
#### Senderliste lesen
### FFH
Aufruf
[Livestream-Übersicht](https://www.ffh.de/musik/webradios/stream-adressen.html)
````
data/sender.json
````
128kbps http://mp3.ffh.de/radioffh/hqlivestream.mp3
Antwort
48kbps http://mp3.ffh.de/radioffh/livestream.aac
````
{
  "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.
    ]
  }
}
````
#### Neuen Sender speichern
Noch nicht realisiert.
#### Änderungen an einem Sender speichern
Noch nicht realisiert.
#### Sender löschen
Noch nicht realisiert.
### Abspieler
#### Abspielerliste lesen
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.
    ]
  }
}
````
#### Neuen Abspieler speichern
Noch nicht realisiert.
#### Änderungen an einem Abspieler speichern
Noch nicht realisiert.
#### Abspieler löschen
Noch nicht realisiert.