# đŸ“» 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 --- *Viel Spass beim Radiohören!*