Building a Web Player for the Website

🎧 Building a Web Player for Lastpak – from idea to reality

A website without sound feels incomplete. That’s why I wanted a custom web player for Lastpak — one that always stays visible, shows the live status automatically, and works seamlessly with the rest of the site.

⚙️ The setup

The player was built entirely with a small amount of JavaScript and CSS.
It checks the Icecast server status to see if the stream is online, updates in real time, and integrates perfectly with Swup, so playback continues smoothly during navigation.

The design is intentionally compact: a floating glass-style card in the bottom-left corner, showing just what matters — the title, live indicator, audio controls, and a short status message (“Buffering…”, “Live”, etc.).

🧩 Under the hood

• JavaScript connects to the stream and polls the Icecast server every 30 seconds to check availability.
• CSS variables define the colors, shadows, and blur effect to match the site’s theme.
• When Swup replaces page content, the player adjusts automatically without reloading.
• The player’s height is exposed as a CSS variable (--player-h), so the layout always flows naturally around it.

🌐 No external embed

No third-party widgets, no radio-host branding — the player is completely self-hosted, streaming directly from Lastpak’s Icecast server.
That means full control, minimal overhead, and a consistent look across the entire site.

💬 Want to know more?

The code lives inside the site itself.
If you’re curious, feel free to explore the source — but what really matters is that it works:
a light, fast, and elegant web player that keeps the sound of Lastpak alive everywhere on the site.