75 lines
No EOL
4.1 KiB
Markdown
75 lines
No EOL
4.1 KiB
Markdown
# 📻 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 <https://codeberg.org/simonpipe/Radioplayer-with-Presets/src/branch/main/LICENSE>
|
||
|
||
## 💌 Kontakt
|
||
<img src="https://social.thepipes.ch/fileserver/01YNW70Y1J0JS976ND7GHB71B3/emoji/original/01K76NQ5R2VSSHN8ZC4NA87XM3.png" alt="GoToSocial (Fediverse)" title="GoToSocial (Fediverse)" height="16"/> @simon@social.thepipes.ch
|
||
|
||
---
|
||
*Viel Spass beim Radiohören!* |