Ein Player für Ihren Sender
Ein Stream ist der Anfang.
Der Player macht ihn zugänglich.
Luna Radio Player ist ein von Sodah entwickelter HTML5 Radio Player für Websites. Er verbindet die Wiedergabe vorhandener Radiostreams mit Songinformationen und einer konfigurierbaren Darstellung.
Eine Audio-URL allein erklärt noch nicht, welcher Titel gerade läuft. Der Player ergänzt den Stream um eine passende Metadatenquelle und zeigt Interpret und Titel direkt auf der Website. Gestaltung, Cover und Visualizer lassen sich auf den jeweiligen Auftritt abstimmen.
Funktionen
Was dieser HTML5
Radio Player mitbringt.
Wiedergabe, Information und Gestaltung greifen ineinander. Sie wählen, welche Darstellung zu Ihrer Website passt.
Radio direkt hören.
Start, Pause und Lautstärke bedienen den eingebundenen Stream. Lade- und Offline-Zustände werden in der Oberfläche berücksichtigt.
Wissen, was läuft.
Der Player fragt Songinformationen wiederholt ab und aktualisiert die Anzeige bei einem Titelwechsel.
Cover zum Programm.
Cover können aus unterstützten Metadatenquellen stammen oder über die iTunes-Schnittstelle gesucht werden. Alternativ nutzen Sie ein festes Bild.
Ihr Auftritt. Ihr Layout.
Eine große Ansicht oder eine kompakte Leiste schaffen unterschiedliche Einbaumöglichkeiten. Der Player berechnet sein Layout anhand des Containers.
Audio sichtbar machen.
Elf Visualizer-Darstellungen stehen im Code bereit. Echte Audiodaten nutzen die Web Audio API; alternativ ist eine simulierte Darstellung möglich.
Auch außerhalb der Seite.
In unterstützenden Browsern übergibt die Media Session API Titel, Interpret und Cover an die Mediensteuerung des Geräts.
Streams & Songinformationen
Die passende Verbindung.
Für Ihren Stream.
Audiowiedergabe und Titelanzeige sind zwei getrennte Wege. Entscheidend sind die Stream-URL, der Streamtyp und die gewählte Metadatenquelle.
laut.fm
Der Sendername wird aus der Stream-URL gelesen. Die öffentliche current_song-API liefert Interpret und Titel.
Icecast 2
Songdaten kommen aus status-json.xsl. Bei mehreren Quellen wird der konfigurierte Mountpoint zugeordnet.
SHOUTcast 2
Der aktuelle Titel wird über currentsong mit der eingestellten Sender-ID abgefragt. Der Audiopfad wird separat konfiguriert.
Radiojar & radio.co
Eigene API-Anbindungen lesen die aktuell gespielten Titel und verfügbare Cover anhand der konfigurierten Stations-ID.
HLS
HLS-Streams werden über die enthaltene Hls.js-Bibliothek angebunden. Der HLS-Metadatenmodus verarbeitet Informationen aus Streamsegmenten.
Andere
Eine eigene Titel-URL, ein konfigurierbarer CORS-Proxy und die mitgelieferten PHP-Dateien für API- und ICY-Abfragen sind vorgesehen. Diese Wege erfordern eine passende Server-Konfiguration. Auch ein älterer Radionomy-Codepfad ist vorhanden; dessen aktuelle Nutzbarkeit wird hier nicht zugesagt.
01
Grundlage bereitstellen.
Ein vorhandener Radiostream, die Player-Datei, ein HTML-Container und ein passender Domain-Token bilden die Basis.
02
Quelle und Darstellung wählen.
Mit lunaRadio(…) werden Streamtyp, Titelquelle, Ansicht, Farben und Cover konfiguriert.
03
Wiedergabe und Titel prüfen.
Nach dem Aufbau startet die Metadatenabfrage. Das Intervall beträgt standardmäßig fünf Sekunden. Die Audiowiedergabe beginnt per Bedienung oder zulässigem Autoplay.
Layout-Beispiele
Technische Voraussetzungen
Was vor dem Start
geklärt sein sollte.
Website & Token
Der Player benötigt JavaScript, HTML5 Audio und einen passenden Domain-Token. Er ist kein Streamingserver und erzeugt kein eigenes Radioprogramm.
Browser & CORS
Streamformat, HTTPS und Freigaben des Anbieters müssen zur Website passen. Autoplay, Audioanalyse und Gerätesteuerung hängen vom Browser ab.
Optionale PHP-Wege
Für fallback und stream-icy-meta sind PHP und cURL erforderlich. Diese Hilfsdateien müssen vor einem öffentlichen Einsatz sicherheitstechnisch geprüft werden.
Daten & externe Dienste
Stream, Titel, Cover und optional Schriften werden von den eingerichteten Quellen geladen. Datenschutz und eine gegebenenfalls notwendige Einwilligung sind Teil der Website-Integration.
Häufige Fragen
Gut zu wissen.
Konkrete Antworten zu Einrichtung, Titelanzeige und technischen Grenzen.
Inhalt
Fragen Sie Ihre KI nach Sodah Webdesign
Verlassen Sie sich nicht nur auf unser Wort. Fragen Sie Ihre bevorzugte KI, was sie über Sodah Webdesign denkt.
Wählen Sie den klugen Weg
Wir arbeiten direkt mit Geschäftsführern, Marketingverantwortlichen und Projektleitern zusammen. Dabei integrieren wir uns in bestehende Abläufe und übernehmen die technische sowie inhaltliche Umsetzung der anstehenden Aufgaben.
