Web Performance Web Audio API Leaflet Software Design

Why We Built SpinRadio: Engineering a High-Performance 3D Audio Explorer

Published on 2026-06-03 • By Agenor Services Team

When we set out to build SpinRadio, our goal was simple yet ambitious: to map the world’s live radio broadcasts onto an interactive 3D globe that runs smoothly on every device, from low-end mobile phones to high-powered desktop workstations. Traditional 3D globes rely heavily on WebGL libraries (like Three.js), which can be memory-intensive, battery-draining, and slow to load on older mobile devices.

1. Designing a Lightweight 3D Canvas Globe

To ensure absolute accessibility, we decided to steer clear of heavy WebGL engines. Instead, we built a custom canvas projection layered on top of Leaflet. By utilizing raw 2D Canvas drawings for our beacons, we reduced the CPU and memory footprint by over 80% compared to typical 3D library implementations. The result is a buttery-smooth 60fps interaction speed, responsive touch gestures, and instant load times.

2. Tackling the Web Audio Stream Challenge

Broadcasters globally transmit audio using diverse protocols, bitrates, and containers. Our player architecture had to support Icecast, Shoutcast, HLS (m3u8), and raw AAC/MP3 files. We designed a custom HTML5 Audio Controller wrapper that manages stream buffering, handles 302/307 redirection automatically, and hooks directly into the browser's MediaSession API. This ensures that users can see station logos and track titles on their lock screen and use native keyboard or Bluetooth media controls to play, pause, or skip channels.

3. Real-Time Telemetry and Trending Algorithm

To make the application feel alive and social, we developed a real-time telemetry service. Rather than relying on static mock data, we built a lightweight Node/Express telemetry backend running in memory on our VPS. Every client securely pushes a heartbeat beacon every 20 seconds. An automated worker prunes inactive sessions, while a polling route updates live listening counters, rendering neon-green ripples on active geographic coordinates of the globe.

SpinRadio.app is a testament to what is possible when you combine vanilla web technologies with careful performance engineering. If you need a high-performance web system, native app wrappers, or real-time analytics, check out our services page to see how we can work together.