# HTML5 Radio Player für Ihre Website

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

[WordPress Radio Player Plugin] (https://www.sodah.de/tools/radio-player-plugin/) powered by [Webdesign-Agentur Mainz] (https://www.sodah.de/webdesign-agentur/mainz/) [JAVASCRIPT HTML RADIO PLAYER] (https://radioplayer.luna-universe.com) marketing by [Online Marketing Agentur Mainz] (https://www.sodah.de/online-marketing-agentur/) [Download JS-Version] (https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Fcodecanyon.net%2Fitem%2Fnative-flash-radio%2F9672527) [Download WP-Version] (https://1.envato.market/c/1297729/275988/4415?u=https%3A%2F%2Fcodecanyon.net%2Fitem%2Fnative-flash-radio-wp-plugin%2F9987649)

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

- Wiedergabe über HTML5 Audio
- Andere Player-Instanzen pausieren beim Start
- Konfigurierbarer Offline-Text

#### Wissen, was läuft.

Der Player fragt Songinformationen wiederholt ab und aktualisiert die Anzeige bei einem Titelwechsel.

- Interpret und Songtitel
- Einstellbares Abfrageintervall
- Eigene Metadaten-URL als Alternative

#### Cover zum Programm.

Cover können aus unterstützten Metadatenquellen stammen oder über die iTunes-Schnittstelle gesucht werden. Alternativ nutzen Sie ein festes Bild.

- Konfigurierbares Standard-Cover
- Runde oder quadratische Darstellung
- Bildwechsel mit Überblendung

#### Ihr Auftritt. Ihr Layout.

Eine große Ansicht oder eine kompakte Leiste schaffen unterschiedliche Einbaumöglichkeiten. Der Player berechnet sein Layout anhand des Containers.

- Farben und Schrift konfigurierbar
- Laufschrift für Sendername und Titel
- Richtung und Tempo einstellbar

#### Audio sichtbar machen.

Elf Visualizer-Darstellungen stehen im Code bereit. Echte Audiodaten nutzen die [Web Audio API] (https://de.wikipedia.org/wiki/Web _Audio _API) ; alternativ ist eine simulierte Darstellung möglich.

- Farben und Transparenz einstellbar
- Unschärfe- und Nachzieheffekte
- Abhängig von Browser und CORS

#### Auch außerhalb der Seite.

In unterstützenden Browsern übergibt die [Media Session API] (https://developer.mozilla.org/de/docs/Web/API/Media _Session _API) Titel, Interpret und Cover an die Mediensteuerung des Geräts.

- Play- und Pause-Aktionen
- Optional lokale Lautstärke-Speicherung
- Lokale Speicherung der Visualizer-Auswahl

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

! [Screenshot des LU Radio Players, ein responsives WordPress Plugin für Internetradios mit Visualizer.] (https://www.sodah.de/wp-content/uploads/2024/01/radiojar.jpg) ! [Screenshot des LU Radio Players, ein responsives WordPress Plugin für Online-Radios mit Audio-Visualizer.] (https://www.sodah.de/wp-content/uploads/2024/01/icecast.jpg) ! [Screenshot des LU Radio Players, ein responsives WordPress Plugin für Webradio-Streaming.] (https://www.sodah.de/wp-content/uploads/2024/01/hls.jpg) ! [LU Radio Player WordPress Plugin für Radio-Streams wie Shoutcast, Icecast, Radionomy mit Metadaten und Visualizer.] (https://www.sodah.de/wp-content/uploads/2024/01/shoutcast.jpg) ! [Screenshot des LU Radio Players für WordPress mit Anzeige von Songtitel und Coverbild] (https://www.sodah.de/wp-content/uploads/2024/01/radio.co _.jpg) ! [WordPress Radio Player Plugin Luna Radio für Shoutcast, Icecast & HLS mit Metadaten und Visualizer] (https://www.sodah.de/wp-content/uploads/2024/01/radionomy.jpg)

#### 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] (https://de.wikipedia.org/wiki/HTTP _Live _Streaming) werden über die enthaltene Hls.js-Bibliothek angebunden. Der HLS-Metadatenmodus verarbeitet Informationen aus Streamsegmenten.

#### Andere

Eine eigene Titel-URL, ein konfigurierbarer [CORS-Proxy] (https://de.wikipedia.org/wiki/Cross-Origin _Resource _Sharing) 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.

## So funktioniert die Einbindung

### Vom Radiostream  
zum Teil Ihrer Website.

[Online Konfigurator] (https://radioplayer.luna-universe.com/shortcode)

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

[WordPress Radio Player Plugin] (https://www.sodah.de/tools/radio-player-plugin/) powered by [Webdesign-Agentur Mainz] (https://www.sodah.de/webdesign-agentur/mainz/) [JAVASCRIPT HTML RADIO PLAYER] (https://radioplayer.luna-universe.com) marketing by [Online Marketing Agentur Mainz] (https://www.sodah.de/online-marketing-agentur/) [WordPress Radio Player Plugin] (https://www.sodah.de/tools/radio-player-plugin/) powered by [Webdesign-Agentur Mainz] (https://www.sodah.de/webdesign-agentur/mainz/) [JAVASCRIPT HTML RADIO PLAYER] (https://radioplayer.luna-universe.com) marketing by [Online Marketing Agentur Mainz] (https://www.sodah.de/online-marketing-agentur/) [WordPress Radio Player Plugin] (https://www.sodah.de/tools/radio-player-plugin/) powered by [Webdesign-Agentur Mainz] (https://www.sodah.de/webdesign-agentur/mainz/) [JAVASCRIPT HTML RADIO PLAYER] (https://radioplayer.luna-universe.com) marketing by [Online Marketing Agentur Mainz] (https://www.sodah.de/online-marketing-agentur/)

## Technische Voraussetzungen

### Was vor dem Start  
geklärt sein sollte.

#### Website & Token

Der Player benötigt [JavaScript] (https://de.wikipedia.org/wiki/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] (https://www.sodah.de/online-marketing-agentur/) .

## Zusammenarbeit mit Sodah

### Ihr Radioprogramm.  
Passend in Ihren Webauftritt eingebunden.

Besprechen Sie mit Sodah, wie der Player zu Ihrer Website passt: vom Einbau und der Gestaltung bis zur Abstimmung von Stream- und Metadatenquelle. Der Ansatzpunkt ist Ihr vorhandenes Radioprogramm.

[WordPress-Webentwicklung] (https://www.sodah.de/webentwicklung-agentur/) [Support & Wartung] (https://www.sodah.de/webdesign-agentur/support-wartung/)

## Häufige Fragen

### Gut zu wissen.

Konkrete Antworten zu Einrichtung, Titelanzeige und technischen Grenzen.

### [Was ist der Luna Radio Player?] (#17f24edd087734813)

Luna Radio Player ist ein HTML5 Radio Player von Sodah Webdesign. Er wird per JavaScript in eine Website eingebunden und spielt einen vorhandenen Radiostream ab. Je nach Einrichtung ergänzt er Songtitel, Coverbilder und Visualizer.

### [Ist das ein WordPress-Plugin?] (#7fa57f00b93c9e89a)

Die vorliegende Version ist ein JavaScript-Player mit optionalen PHP-Hilfsdateien. Ein WordPress-Plugin mit eigener Admin-Oberfläche oder Shortcodes ist nicht enthalten. Die Einbindung in eine WordPress-Website muss über deren Seitencode erfolgen.

### [Wie zeigt der Player Songtitel von laut.fm an?] (#730136de7d50afa76)

Mit streamtype: lautfm und metadatatechnic: api ermittelt der Player den Sender aus der Stream-URL und liest artist.name und title aus der öffentlichen current _song-API. Der Standard-Abstand beträgt 5000 Millisekunden. Fehlerhafte oder leere Antworten leeren die Anzeige; der nächste reguläre Abruf versucht es erneut.

### [Brauche ich PHP oder eine Datenbank?] (#211ab17a8177b5a24)

Eine Datenbank ist im Player nicht vorgesehen. Direkte, vom Browser erlaubte API-Abfragen benötigen keinen PHP-Proxy. Die mitgelieferten Metadatenwege fallback und stream-icy-meta benötigen einen Webserver mit PHP und cURL. Auch die Cover-Suche nutzt auf als iOS erkannten Geräten den PHP-Fallback.

### [Startet das Radio automatisch?] (#1ba0b632483005ec4)

Autoplay ist konfigurierbar, wird aber durch die Regeln des Browsers begrenzt. Der Code berücksichtigt einen Start nach einer Nutzerinteraktion. Automatische Wiedergabe ohne Interaktion ist nicht garantiert.

### [Welche Daten und externen Dienste werden genutzt?] (#274b7a095ea1cbd34)

Je nach Konfiguration entstehen Verbindungen zum Streamanbieter, zu Metadaten-APIs, Cover-Diensten und optional Google Fonts oder einem Proxy. Für die iTunes-Cover-Suche werden Songinformationen und die Script-Verzeichnis-URL übermittelt. Optional speichert der Player Lautstärke und Visualizer-Auswahl im lokalen Browser-Speicher. Eine Einwilligungsverwaltung ist nicht enthalten.

### [Wie lässt sich der Player mit Sodah einsetzen?] (#d781e3126a628d68a)

Sprechen Sie mit Sodah über Ihre Website und Ihren vorhandenen Radiostream. Dabei lassen sich Gestaltung, Metadatenquelle und technische Voraussetzungen für die Einbindung abstimmen. Der Player prüft einen Domain-Token; Preise, Lizenzumfang und ein öffentlicher Download werden auf dieser Seite nicht zugesagt.