📻 Radioplayer mit Presets

Ein moderner, leichtgewichtiger Internetradio-Player zum Selber-Hosten. Der Player ist modular aufgebaut, responsiv und bietet volle Kontrolle über deine Senderliste.

📂 Projektstruktur

/Radioplayer
├── index.html            # Hauptseite (Frontend-Einstieg)
├── main.js               # Zentrales Steuerungs-Skript
├── README.md             # Dokumentation
├── LICENSE               # Lizenzinformationen
│
├── assets/               # Design-Ressourcen
│   ├── style.css         # Zentrales Stylesheet
│   ├── fonts/            # Lokal eingebundene Webfonts (DSGVO-konform)
│   └── img/              # Favicons und Icons
│
├── js/                   # Modularisierte JavaScript-Logik
│   ├── meta-handler.js   # Abruf von Stream-Metadaten
│   ├── preset-manager.js # Logik zur Speicherung (LocalStorage)
│   ├── preset-ui.js      # Verwaltung der Bearbeiten-Oberfläche
│   ├── sleeptimer.js     # Timer-Funktionalität
│   └── ui-helper.js      # Modals, Footer-Initialisierung & UI-Tools
│
└── php/                  # Serverseitige Skripte
    └── metadata.php      # Proxy zum Auslesen von ICY-Metadaten

✨ Features

• Läuft auch auf Servern ohne PHP: Es ist nur HTML und Javascript nötig.
• Individuelle Presets: Sender können einfach hinzugefügt, bearbeitet, gelöscht und per Drag & Drop sortiert werden.
• Metadaten-Anzeige: Automatische Anzeige von Sendername und aktuellem Song (diese Funktion erfordert PHP-Unterstützung).
• Flexibler Import/Export: Sichere deine Senderliste als JSON-Datei oder als kompakten String.
• Sleeptimer: Praktische Abschaltautomatik für entspanntes Hören.
• Local Storage: Deine Einstellungen werden direkt im Browser gespeichert – kein Backend-Setup für die Datenbank nötig.
• Modularer Code: Sauber getrennte Logik für UI, Presets, Metadaten und Player.

🛠 Installation

1. Lade alle Dateien herunter und kopiere sie auf deinen Webserver.
2. Falls du die Titelanzeige (Metadaten) nutzen möchtest, muss dein Server PHP unterstützen.
3. Die Datei webradio_presets.json dient als Standard-Vorlage beim ersten Start oder wenn alle vorhandenen Presets gelöscht werden.

📂 Dateistruktur

Um den Code wartungsfreundlich zu halten, ist das Projekt in Module unterteilt:

• index.html: Das Grundgerüst des Players.
• main.js: Die Schaltzentrale (steuert den Ablauf).
• ui-helper.js: Verwaltet Modals, Titel und Footer-Anzeigen.
• preset-manager.js: Übernimmt das Speichern, Laden und die Kompression der Senderliste.
• meta-handler.js: Kommuniziert mit dem PHP-Proxy für Songtitel.
• sleeptimer.js: Logik für die automatische Abschaltung.
• metadata.php: Der Proxy, der die Metadaten von den Radio-Streams abruft.

🚀 Nutzung

• Sender hinzufügen: Über "Presets bearbeiten" kannst du eigene Stream-URLs eintragen.
• Sortieren: Nutze das ☰-Symbol in der Liste, um die Reihenfolge per Drag & Drop zu ändern.
• Teilen: Exportiere deine Liste als Code-String, um sie auf einem anderen Gerät (z.B. Handy oder Tablet) einfach wieder zu importieren.

🔍 Fehlerbehebung (Troubleshooting)

• Keine Titelanzeige: Überprüfe, ob die metadata.php im Ordner /optional liegt und dein Server PHP-Requests erlaubt (CURL muss in der PHP-Konfiguration meist aktiviert sein).
• Presets werden nicht gespeichert: Stelle sicher, dass dein Browser "Local Storage" erlaubt und nicht im privaten Modus ist, der Daten nach dem Schliessen löscht.
• Stream spielt nicht ab: Einige Browser blockieren "Mixed Content" (HTTP-Streams auf einer HTTPS-Seite). Achte darauf, nach Möglichkeit https://-Stream-URLs zu verwenden.

⚖️ Lizenz

Unlicense

💌 Kontakt

Fediverse / Masotodon: @simon@social.thepipes.ch

---

Viel Spass beim Radiohören!