SpinRadio: Interactive 3D World Radio Streaming Platform (Web & iOS)
High-performance audio streaming platform featuring custom mathematical 2D Canvas globe projection, live ICY metadata extraction, and native iOS application.
Challenge, Approach & Verified Outcome
Rendering an interactive 3D planetary globe and streaming live international audio feeds with zero lag, without burdening mobile devices with heavy 3D engine overhead (Three.js/WebGL).
Engineered a lightweight, hardware-efficient 3D orthographic projection engine executing directly on standard 2D HTML5 Canvas, paired with a custom Node.js ICY stream reader for real-time track identification and native iOS lock-screen media controls.
A published, production-grade platform running at spinradio.app and the Apple App Store, achieving 60 FPS globe rotation, sub-second station tuning, and resilient audio playback across 10,000+ global streams.
Measured Technical & Operational Impact
Lightweight orthographic math rendering 3D sphere without WebGL battery drain.
Continuous station directory with live ICY metadata parsing and health checks.
Low-latency buffer initialization with automated codec fallback (AAC/MP3/HLS).
Full system background audio playback and OS lock-screen media integration.
Client Context & Environment
SpinRadio (spinradio.app) was conceived and built by AgenorIT’s digital product engineering team as a flagship demonstration of extreme frontend performance, custom mathematical rendering, and low-latency media streaming.
The goal was to create an intuitive, tactile radio tuner mapped across a rotating 3D earth, accessible instantaneously in any web browser and downloadable as a native iOS application.
The Engineering Challenge
Combining continuous real-time audio playback with interactive 3D rotational projection across diverse mobile and desktop devices presented significant performance bottlenecks:
- CPU & Battery Efficiency: Standard 3D WebGL runtimes (Three.js) introduce substantial bundle bloat (600KB+) and heavy GPU battery drain on mobile phones.
- Stream Codec Fragmentation: Global radio feeds use wildly varying bitrates, codecs (AAC, MP3, OGG, HLS), and headers that frequently fail or drop connection on mobile networks.
- Live Metadata Parsing: Extracting real-time "Now Playing" artist and track titles from binary Shoutcast/Icecast byte streams without stalling the audio buffer.
- Cross-Platform Control: Ensuring audio plays seamlessly in the background while users lock their screens or switch apps across both iOS and modern mobile browsers.
Chronological Delivery & Concrete Artefacts
AgenorIT designed and implemented a bespoke software architecture optimized for maximum speed and battery longevity:
Custom Orthographic 3D Canvas Engine
Built a custom mathematical 3D sphere projection directly on a 2D HTML5 Canvas using yaw/pitch trigonometry, rendering vector continental outlines from a micro-GeoJSON dataset with zero WebGL overhead.
- •Math-driven 3D-to-2D projection engine (globe.js)
- •Optimized vector boundary rasterizer with hemisphere clipping
Real-Time ICY Metadata & Stream Extraction Service
Constructed an asynchronous stream inspector that connects to Icecast/Shoutcast server headers, extracting live broadcast metadata and track names on the fly with UTF-8 character fallback.
- •Node.js ICY byte reader (server/icyReader.js)
- •Automated radio feed health verification pipeline
Audio Pipeline & MediaSession API Integration
Integrated the HTML5 Audio pipeline with the W3C MediaSession API and iOS AVFoundation, providing native system lock-screen album artwork, station controls, and background streaming.
- •AudioController.js with dynamic buffer policies
- •Native iOS background playback entitlements via Capacitor
Adaptive Theming & Telemetry Architecture
Designed a high-contrast dark/light design system with smooth CSS variable transitions, audio visualizer canvas waves, and live listener telemetry.
- •Gesture-driven mobile exploration UI
- •Real-time telemetry event bus
Components Deployed in Production
Rendering
iOS Native
Streaming
Metadata API
Cross-Platform
Cartography
Verified Outcomes
SpinRadio stands as verifiable proof of AgenorIT’s ability to engineer consumer-grade digital products that combine mathematical graphics, audio engineering, and flawless performance.
- Deployed live at spinradio.app and published on the Apple App Store (Developer ID: 6779936020).
- Fluid 60 FPS planetary exploration with sub-millisecond per-frame CPU render times.
- Instantaneous station tuning and live track identification across 10,000+ international feeds.
- Zero framework bloat — 100% custom-crafted graphics and audio architecture.
Live App Store Listing & Interactive Experience
Explore the live product on the Apple App Store or access the web deployment running in production.
Official Apple App Store listing for SpinRadio (Rated 5.0 Stars, Version 1.0.7) featuring 3D globe station discovery and live radio streaming.
Scan with iPhone Camera
Point your iPhone or iPad camera at the QR code below to download SpinRadio directly from the Apple App Store.
Discuss a Similar Architecture for Your Organisation
Speak directly with our principal engineers about architecting your cloud migration, Entra identity system, or high-performance digital product.