OliversWelt

Damals bin ich auf ein spannendes Projekt von Simon gestossen: Er hat sich kurzerhand seinen eigenen Radioplayer programmiert, der genau seinen Bedürfnissen entspricht.

Heute hatte ich frei und mal wieder richtig Lust zu frickeln … hier nun Teil 2 😉

Unter der Haube – Design-Upgrade, Proxy-Tricks & Sicherheit

Nachdem die Pflicht (die Synchronisation) erledigt war, kam die Kür. Denn sind wir ehrlich: Der Player funktionierte jetzt zwar auf allen Geräten perfekt synchron, sah aber noch aus wie eine Excel-Tabelle aus den 90ern. Und technisch gab es da auch noch ein paar „Zicken“, die meinen inneren Monk getriggert haben.

Also haben Gemini und ich uns noch eine zweite Session gegönnt. Hier ist das Ergebnis des Tunings:

1. Das Auge hört mit: Dark Glassmorphism

Funktionalität ist gut, aber Style ist auch wichtig – besonders, wenn der Player abends auf dem Tablet im Wohnzimmer läuft. Das alte Design musste weichen. Wir haben ein komplett neues „Dark Glassmorphism“ Theme gebaut: Dunkle Hintergründe, moderne Milchglas-Effekte und sanfte Animationen. Das Highlight: Der aktuell laufende Sender wird jetzt nicht mehr nur textlich angezeigt, sondern pulsiert mit einem türkisfarbenen Neon-Glow. Dazu haben wir das statische Pixel-Logo durch ein SVG-Icon ersetzt. Das sieht nicht nur edel aus, sondern macht die Bedienung auch viel intuitiver.

2. Der Technik-Deep-Dive: Metadaten & der Proxy

Ein nerviges Problem war die zusätzliche Anzeige der Songtitel. Oft blockierte der Browser den direkten Zugriff auf die Titel-Infos der Radiosender (Stichwort: CORS-Fehler). Der Browser sagt quasi: „Du darfst nicht mit dem Fremden reden!“ Die Lösung: Wir haben einen „Mittelsmann“ gebaut. Ein weiteres PHP-Script (metadata_proxy.php) auf dem NAS fungiert als Proxy. Das Frontend fragt nun nicht mehr den fremden Radiosender, sondern mein eigenes NAS. Das NAS holt die Daten (Server dürfen das nämlich) und reicht sie sauber an den Player weiter. Endlich sehe ich bei Sender (die es liefern und unterstützen) zuverlässig Titel und Interpret!

3. Stabilität & Sicherheit

Zwei weitere wichtige Anpassungen gab es noch:

Keine Abbrüche mehr: Hin und wieder riss der Stream ab, weil der Browser den Speicher vollaufen ließ. Durch eine gezielte Anpassung in der Audio-Engine (html5: true) zwingen wir den Player nun, den Stream direkt durchzureichen. Seitdem läuft das Radio stundenlang stabil durch.
Türsteher: Falls ich den Link zum Radio teile und jemand meine mühevoll gepflegte Liste löscht, haben wir den „Presets bearbeiten“-Button mit einem einfachen Passwortschutz versehen. Per Port-Weiterleitung ist das Radio auch extern erreichbar. Perfekt für Musik im Büro – neben meinem Emby-Server-

Fazit des Basteltags

Was als kleines Projekt begann, ist jetzt eine ausgewachsene Web-App auf meinem eigenen Server. Synchron, stabil, sicher und im schicken Dark-Mode. Das Projekt zeigt mal wieder: Mit ein bisschen Neugier, einem freien Tag und dem richtigen KI-Buddy kann man sich seine digitale Welt genau so bauen, wie man sie haben will.

Morgen widme ich mich wieder dem Design im Büro. Aber ich geniesse diese Ausflüge: Als Grafiker visuell kreativ sein, aber zwischendurch auch mal richtig in den Nerd-Kram abtauchen – genau diese Mischung macht’s für mich aus.

screenshot from 2025 12 16 22 09 20