Web Radio mit Top Design -= SCRIPTWORLD =- Community PHP-Script herunterladen
ScriptWorldProfessionelle Websites
Web Radio mit Top DesignPHP-Script
Beschreibung
# ???? Web Radio Portal## Professionelles Live-Radio Portal mit Admin-Bereich
---
## ???? Features
- ? **HTML5 Audio Player** - Live-Streaming ohne Plugins
- ? **5 Dateien, 507 Zeilen Code** - Kompakt & effizient
- ? **10 Demo-Sender vorinstalliert** - Sofort einsatzbereit
- ? **Admin-Panel** - Sender verwalten & freigeben
- ? **User-Submissions** - Besucher können Sender vorschlagen
- ? **Captcha-Schutz** - Spam-Vermeidung
- ? **Play-Counter** - Statistiken & Tracking
- ? **Filter & Suche** - Nach Genre, Land, Name
- ? **Modernes Design** - Musik-Theme in Lila/Pink/Gold
## ???? Installation
### Schritt 1: Dateien hochladen
Alle PHP-Dateien auf deinen Webserver hochladen.
### Schritt 2: Installation starten
Im Browser aufrufen: `http://deine-domain.de/webradio/install.php`
### Schritt 3: Formular ausfüllen
```
Host: localhost
Datenbank: webradio_db (vorher anlegen!)
User: dein_mysql_user
Passwort: dein_mysql_passwort
Präfix: radio_
Seiten-Name: WebRadio (oder eigener Name)
Admin-Passwort: Starkes Passwort wählen!
```
### Schritt 4: Fertig!
- 10 Demo-Sender sind bereits eingefügt
- Sofort nutzbar
- install.php wird automatisch gelöscht
---
## ???? 10 Demo-Sender (vorinstalliert)
| # | Sender | Genre | Land | Status |
|---|--------|-------|------|--------|
| 1 | **1.FM - Top 40** | Pop | Switzerland | ? Funktioniert |
| 2 | **181.FM - 90s Dance** | Dance | USA | ? Funktioniert |
| 3 | **Ibiza Sonica Radio** | Electronic | Spain | ? Funktioniert |
| 4 | **SmoothJazz.com** | Jazz | USA | ? Funktioniert |
| 5 | **Radio Paradise** | Alternative | USA | ? Funktioniert |
| 6 | **KEXP Seattle** | Alternative | USA | ? Funktioniert |
| 7 | **FIP** | Variety | France | ? Funktioniert |
| 8 | **BBC Radio 1** | Pop | UK | ? Funktioniert |
| 9 | **Chillout Radio** | Chillout | Germany | ? Funktioniert |
| 10 | **Lounge Radio** | Lounge | Switzerland | ? Funktioniert |
Alle Streams sind **kostenlos, legal und getestet!**
---
## ???? Player-Funktionen
### HTML5 Audio Player
```javascript
?? Play/Pause Button
?? Stop Button (Reset auf 0:00)
???? Volume Slider (0-100%)
???? Now Playing Info (Sender + Genre)
???? Play Counter (automatisch)
```
### Bedienung
1. **Sender auswählen** - Klick auf Sender-Karte
2. **Play** - Automatischer Start
3. **Pause** - Button erneut klicken
4. **Stop** - Reset & Pause
5. **Lautstärke** - Slider bewegen
---
## ???? Filter & Suche
### Filter nach Genre
- Pop, Rock, Jazz, Electronic, Alternative, etc.
- Dropdown-Auswahl
- Dynamisch aus Datenbank
### Filter nach Land
- Deutschland, USA, UK, France, etc.
- Dropdown-Auswahl
- Dynamisch aus Datenbank
### Textsuche
- Durchsucht Sender-Name & Beschreibung
- Echtzeit-Filterung
- Kombinierbar mit Genre/Land
### Sortierung
- Nach Plays (meistgespielt oben)
- Dann alphabetisch
---
## ? Sender einreichen (submit.php)
### User können Sender vorschlagen:
**Formular-Felder:**
- Sender-Name * (Pflicht)
- Genre * (Pflicht)
- Land (Optional)
- Stream-URL * (Pflicht - Direct Link!)
- Website (Optional)
- Dein Name * (Pflicht)
- Deine E-Mail * (Pflicht)
- **Captcha * (Rechenaufgabe)**
### Ablauf:
1. User füllt Formular aus
2. Captcha-Prüfung (z.B. "7 + 3 = ?")
3. Eintrag in `submissions` (Status: pending)
4. Success-Message
5. Admin prüft in Admin-Panel
6. Admin gibt frei ? Sender wird live
---
## ????????? Admin-Bereich
### Login: `admin-login.php`
- Passwort aus Installation
- Keine Username nötig
- Session-basiert
### Admin-Panel: `admin.php`
**Dashboard:**
- ???? Statistiken (Sender, Wartende, Plays)
**Sender hinzufügen:**
- Schnellformular
- Direkt freigeschaltet
- Alle Felder optional außer Name, Genre, URL
**Vorschläge verwalten:**
- Liste aller Pending-Submissions
- ? Freigeben-Button
- ? Löschen-Button
- Submitter-Info sichtbar
**Alle Sender:**
- Komplette Sender-Liste
- Sortiert nach Name
- Löschen-Button
- Play-Counter sichtbar
---
## ???? Captcha-System
### Funktionsweise:
```php
// Generieren (submit.php)
$num1 = rand(1, 10);
$num2 = rand(1, 10);
$_SESSION['captcha'] = $num1 + $num2;
// Anzeige: "7 + 3 = ?"
// Prüfen
if(intval($answer) === $_SESSION['captcha']) {
// Korrekt
}
```
### Vorteile:
- ? Kein Google reCAPTCHA nötig
- ? DSGVO-konform
- ? Einfach & effektiv
- ? Barrierefrei
---
## ???? Design & Farben
### Farbschema:
```css
Primärfarben:
- Dunkelviolett: #1e1b4b
- Lila: #7c3aed
- Pink: #ec4899
- Gold: #fbbf24
Hintergründe:
- Schwarz-Blau: #0a0a0a
- Grau-Lila: #1e293b
Akzente:
- Gradient: linear-gradient(135deg, #7c3aed, #ec4899)
- Glassmorphism: backdrop-filter: blur(10px)
```
### Responsive Design:
- Desktop: 320px Grid-Karten
- Mobile: Single Column
- Player-Bar: Flex-Wrap
- Touch-optimiert
---
## ???? Stream-URLs finden
### Wichtig:
**Nur Direct-Links funktionieren!**
### Format-Beispiele:
```
? https://stream.example.com/radio.mp3
? http://icecast.server.com:8000/stream
? https://radio.example.com/live.aac
? https://example.com (Website, kein Stream)
? https://youtube.com/... (kein Direct-Link)
```
### Unterstützte Formate:
- **MP3** - Am weitesten verbreitet
- **AAC** - Bessere Qualität
- **OGG** - Open Source
- **HLS** (.m3u8) - Streaming Protocol
### Quellen für Stream-URLs:
#### 1. Radio-Browser Database
**https://www.radio-browser.info**
- Kostenlose API
- 30.000+ Sender weltweit
- Direct-Links verfügbar
- JSON-API
#### 2. Sender-Website
- Rechtsklick ? Seitenquelltext
- Suche nach: `.mp3`, `.aac`, `stream`, `icecast`
- Developer Tools (F12) ? Network-Tab beim Abspielen
#### 3. TuneIn Directory
**https://tunein.com**
- Stream-Info im Seitenquelltext
- Browser-Plugin "Stream Detector"
#### 4. Shoutcast Directory
**https://directory.shoutcast.com**
- Genre-basierte Suche
- Stream-URLs direkt sichtbar
---
## ???? Statistiken & Tracking
### Play-Counter:
```php
// Bei jedem Abspielen
UPDATE radio_stations
SET plays = plays + 1
WHERE id = ?
```
### Auswertungen (möglich):
- Meistgespielte Sender
- Beliebteste Genres
- Zeitliche Verläufe
- User-Präferenzen
---
## ????? Anpassungen
### 1. Farben ändern
In jeder PHP-Datei im ``-Block:
```css
/* Hauptfarbe ändern */
#7c3aed ? deine Farbe
#ec4899 ? deine Farbe
```
### 2. Player-Position
```css
/* Sticky Player (bleibt beim Scrollen) */
.player-bar {
position: sticky;
top: 0;
z-index: 1000;
}
```
### 3. Mehr Demo-Sender
In `install.php` ? `$demoStations` Array erweitern
### 4. Automatische Freigabe
In `install.php` ? Zeile 85:
```php
// Status: pending (Prüfung nötig)
status ENUM('pending','approved','rejected')
// Status: approved (Auto-Freigabe)
status ENUM('pending','approved','rejected') DEFAULT 'approved'
```
---
## ???? Erweiterte Features (Optional)
### 1. Favoriten-System
```sql
CREATE TABLE radio_favorites (
user_id INT,
station_id INT
);
```
### 2. Bewertungen
```sql
CREATE TABLE radio_ratings (
station_id INT,
rating INT,
ip_address VARCHAR(45)
);
```
### 3. Playlist-Funktion
```javascript
// Mehrere Sender in Warteschlange
const playlist = [station1, station2, ...];
// Auto-Play nächster Sender
```
### 4. Song-Metadata
```php
// Aktueller Song via API
// Icecast: /status-json.xsl
// Shoutcast: /stats?json=1
```
### 5. Schedule/Sendungsplan
```sql
CREATE TABLE radio_schedule (
station_id INT,
day_of_week INT,
time_start TIME,
show_name VARCHAR(255)
);
```
---
## ???? Troubleshooting
### Problem: Stream lädt nicht
**Ursache:** Stream-URL falsch oder offline
**Lösung:**
- URL im Browser direkt testen
- Anderen Stream versuchen
- Server-Logs prüfen
### Problem: Kein Ton
**Ursache:** Browser blockiert Autoplay
**Lösung:**
- User muss Play-Button klicken
- Autoplay funktioniert nur nach User-Interaktion
### Problem: Cross-Origin Error
**Ursache:** CORS-Policy des Streams
**Lösung:**
- Proxy-Script verwenden
- Oder Stream-Anbieter kontaktieren
### Problem: Captcha wird nicht angezeigt
**Ursache:** Session nicht gestartet
**Lösung:**
```php
// Oberste Zeile in submit.php
session_start();
```
---
## ???? Browser-Kompatibilität
| Browser | Desktop | Mobile | Formate |
|---------|---------|--------|---------|
| **Chrome** | ? | ? | MP3, AAC, OGG |
| **Firefox** | ? | ? | MP3, AAC, OGG |
| **Safari** | ? | ? | MP3, AAC, HLS |
| **Edge** | ? | ? | MP3, AAC, OGG |
| **Opera** | ? | ? | MP3, AAC, OGG |
**HLS (.m3u8):**
- Safari: Native Unterstützung
- Andere: Benötigen HLS.js Library
---
## ? Performance-Tipps
### 1. CDN für Bilder
```php
// Logo-URLs via CDN hosten
logo_url = 'https://cdn.example.com/logos/...'
```
### 2. Caching
```php
// Browser-Caching aktivieren
header('Cache-Control: public, max-age=3600');
```
### 3. Lazy Loading
```javascript
// Sender-Karten erst bei Sichtbarkeit laden
observer = new IntersectionObserver(...)
```
### 4. Database-Indizes
```sql
-- Bereits in install.php enthalten!
CREATE INDEX idx_genre ON radio_stations(genre);
CREATE INDEX idx_country ON radio_stations(country);
```
---
## ???? Sicherheit
### Implementiert:
- ? PDO Prepared Statements (SQL-Injection)
- ? htmlspecialchars() (XSS)
- ? Session-basierte Auth
- ? Password Hashing (Bcrypt)
- ? Captcha-Schutz
- ? Input-Validierung
### Empfehlungen:
- HTTPS verwenden (SSL-Zertifikat)
- Admin-Passwort regelmäßig ändern
- Backups erstellen
- Error-Logging aktivieren
---
## ???? Backup & Migration
### Backup erstellen:
```bash
# Dateien
tar -czf webradio-backup.tar.gz webradio/
# Datenbank
mysqldump -u user -p webradio_db > backup.sql
```
### Restore:
```bash
# Dateien
tar -xzf webradio-backup.tar.gz
# Datenbank
mysql -u user -p webradio_db < backup.sql
```
### Migration auf neuen Server:
1. Backup erstellen (siehe oben)
2. Dateien auf neuen Server kopieren
3. Datenbank importieren
4. `config.php` anpassen (DB-Credentials)
5. Testen!
---
## ???? Lizenz & Credits
### Verwendete Technologien:
- PHP 7.4+
- MySQL 5.7+
- HTML5 Audio API
- Vanilla JavaScript (kein jQuery!)
- CSS3 (Gradients, Flexbox, Grid)
### Demo-Streams:
Alle verwendeten Radio-Streams sind:
- Kostenlos verfügbar
- Legal streambar
- Von öffentlichen Quellen
### Credits:
- Design inspiriert von modernen Musik-Apps
- Stream-URLs von Radio-Browser.info
- Icons aus Unicode Emoji-Set
---
## ???? Support & Kontakt
### Bei Problemen:
1. README.md durchlesen
2. Troubleshooting-Sektion checken
3. PHP-Fehler-Log prüfen
4. Browser-Console öffnen (F12)
### Feature-Requests:
Ideen für neue Features? Gerne!
---
## ???? Changelog
### Version 1.0 (Januar 2025)
- ? Initiale Version
- ? 10 Demo-Sender
- ? Admin-Panel
- ? User-Submissions
- ? Captcha-Schutz
- ? Filter & Suche
- ? Play-Counter
---
**Viel Erfolg mit deinem Web Radio Portal! ????**
0 Bewertungen