ROCK NATION RADIO
A high-energy, dark-mode single-page experience for Rock Nation Radio, an independent 24/7 rock station streaming worldwide. Built around a live audio stream and a custom real-time now-playing engine that pulls the current track, album art, listener count, and recently-played history straight from the broadcast feed.
Rock Nation Radio is an independent rock station that broadcasts 24/7 to a worldwide audience from a deliberately anonymous location. They needed a website with the attitude of the music: loud, dark, and unmistakably rock, one that could turn a first-time visitor into a listener in a single click. The catch is that a radio site lives or dies on one thing, the live experience, so the page had to feel genuinely on-air rather than a static brochure with a play button bolted on.
We built a single-page site with a grungy, chrome-and-neon identity and wired a real-time now-playing engine into the station's live broadcast. The moment the page loads, it shows exactly what is spinning right now, the album art, the current listener count, and the last few tracks that aired, all refreshing on their own as the broadcast rolls.
Real-time now-playing engine polls the station's live stream feed to display the current track, artist, album art, listener count, and bitrate, plus an auto-updating recently-played list, with no page reloads
One-click live streaming the 24/7 broadcast is embedded so a visitor can press play and be instantly listening, with no account and no app
A full dark-mode brand experience a custom identity in brushed chrome and neon purple, a scrolling wall of 29 album covers, a live broadcast clock, an animated equalizer, and a marquee ticker
The Now-Playing Engine
The heart of the site: a live readout of the current track and album art, the real-time listener count, and a recently-played history, all pulled from the broadcast feed and refreshed automatically.
The Wall of Rock
Two rows of album covers scroll in opposite directions behind the 680 hours on rotation stat, a fast, GPU-friendly way to show the depth of the catalog.
Brand and Story
"From the underground, for the nation." The brand story leans into the anonymous, off-the-grid persona with a chrome mic, neon glow, and the station's SOCAN licensing front and center.
Real-Time Now-Playing
A hand-written engine polls the station's live stream API every 30 seconds to surface the current track, artist, album art, live listener count, and codec, plus an auto-updating recently-played list. It degrades gracefully to a tidy neutral state if the feed ever goes quiet.
One-Click Live Listening
The 24/7 stream is embedded so visitors press play and are instantly on-air, with no account and no app. A persistent Listen Live button and an animated equalizer keep the live experience present on every scroll.
Zero-Dependency Performance
The whole site is a static Astro build with no JavaScript frameworks and no runtime libraries. Every effect, from the chrome type to the equalizer, marquees, and album wall, is hand-built CSS, self-hosted fonts, and sharp-optimized imagery, with full reduced-motion support.
The technical centerpiece is the now-playing layer. Rather than a plain embedded widget, we wrote a lightweight vanilla-TypeScript engine that fetches the station's live stream metadata, parses out the messy broadcaster-supplied track strings, and renders a clean on-air card plus a recently-played history with per-track album art. It re-polls every 30 seconds, and again whenever the listener switches back to the tab, so the page always reflects what is actually on air, and it falls back to a calm neutral state if the feed drops.
Everything around it is engineered for speed and mood. The build ships zero JavaScript frameworks: the animated equalizer, opposing album marquees, live broadcast clock, marquee ticker, and brushed-chrome display type are all hand-written CSS, with self-hosted Anton, Archivo, and Space Mono fonts and sharp-optimized webp artwork. A film-grain overlay, stage-light vignette, and a recurring lightning-bolt motif give it the feel of a rock poster, and the whole thing honors prefers-reduced-motion and ships full Open Graph and RadioStation structured data.
EXPLORE MORE PROJECTS
Green Oasis Services
A CMS-powered platform for Edmonton's most trusted lawn care company, three audiences, quote forms on every page.
Read Case Study
BioSciAI
The investor-ready home of a University of Alberta AI startup building next-generation diagnostics for fungal pathogens, featuring a custom Three.js 3D cell animation and a Storyblok-managed research showcase.
Read Case Study
Edmonton Top Law
One of Edmonton's top litigation firms, a commanding 30+ page build with qualifying client intake and full Stripe-powered invoice payments built right into the site.
Read Case StudyWant Results Like These?
Get a free consultation to discuss your project. No pressure, no sales pitch, just an honest conversation about what you need and how we can help.