Een webplayer bouwen voor de website

🎧 Een webplayer bouwen voor Lastpak – van idee tot realiteit

Een website zonder geluid is maar half zo levendig. Daarom wilde ik voor Lastpak een eigen webplayer die altijd zichtbaar blijft, automatisch de live-status toont en netjes meebeweegt met de rest van de site.

⚙️ De opzet

De player is volledig zelf gebouwd met een klein stukje JavaScript en CSS.
Hij leest de Icecast-status uit (om te weten of de stream online is), toont dit in realtime en werkt ook nog eens samen met Swup, zodat de muziek niet stopt bij paginawissels.

Het ontwerp is bewust compact gehouden: een zwevende kaart linksonder met een subtiele glass-blur en alleen de nodige elementen — titel, live-status, audioknop en een korte melding van wat er gebeurt (bijv. “Buffering…” of “Live”).

🧩 Wat er onder de motorkap gebeurt

• De JavaScript-code maakt automatisch verbinding met de stream en controleert elke 30 seconden of de server online is.
• CSS-variabelen regelen de vormgeving en schaduw, zodat de player past bij het thema van de site.
• Zodra Swup de content vernieuwt, past de player zichzelf aan zonder opnieuw te laden.
• De hoogte van de player wordt als CSS-variabele (--player-h) ingesteld, zodat de pagina er netjes omheen kan vloeien.

🌐 Geen externe embed

Geen radio-host of ingesloten widget — de player is volledig eigen en draait rechtstreeks op de Icecast-stream van Lastpak.
Zo blijft alles onder controle, zonder externe afhankelijkheden of branding van derden.

💬 Meer weten?

De code is onderdeel van de website zelf.
Wie nieuwsgierig is, kan in de bron duiken — maar het belangrijkste is dat het werkt:
een lichte, snelle en stijlvolle webplayer die altijd meedoet met de muziek van Lastpak.