SoundVent Persistent Music Player
Founder & Lead Engineer
SaaS
Music
Audio Player
State Management
Next.js
React
Web Audio
Next.js
React
Zustand
Web Audio API
TypeScript
TailwindCSS
HTML5 Audio
A unified audio system powering continuous playback across the entire platform. The persistent music player is one of the foundational systems inside SoundVent — a continuous, platform-wide audio engine that allows listeners to browse profiles, scroll through feeds, open posts, and explore music without ever interrupting playback. Unlike traditional audio widgets or page-scoped players, SoundVent's player is built as a true singleton: one audio engine, one global state, and seamless continuity across every route and interface.
Overview
The SoundVent music experience needed to feel as fluid as modern streaming apps — no stopping, no reloads, no restarts. To accomplish this, I designed a persistent audio system that sits at the core of the platform. It controls playback, manages queues, syncs progress, and handles all UI interactions, all while remaining mounted across every navigation.
Whether users are checking out artists, scrolling through posts, or exploring the marketplace, their music keeps playing. The player is always available, always in sync, and behaves consistently no matter where they are in the app.
Architecture
The SoundVent player is built as a singleton — a single instance that owns audio playback across the entire application. This ensures that music continues uninterrupted, and all UI components talk to the same engine.
Key architectural elements include:
• Singleton Audio Engine — The audio engine is instantiated once and shared globally. UI components never create their own audio instances; they communicate through a central controller to avoid conflicts or duplicated playback.
• Global Store Integration — The player exposes its state and actions through a platform-level store, allowing any part of the UI to update the queue, switch tracks, pause, resume, or seek.
• Persistent Layout Layer — The player lives inside a non-unmounting layout boundary. This ensures both the player component and the audio engine remain alive as users navigate the app.
• Event-Driven Syncing — The audio engine syncs changes back to the store through event listeners for timeupdate, play, pause, ended, and metadata loading.
• Waveform & Visualization Layer — The player exposes an analyzer node from the singleton engine to power waveform and spectrum visualizations across multiple components.
This architecture allows SoundVent to deliver a streaming experience that feels native, responsive, and reliable — exactly what users expect from a modern music platform.
UI/UX
The UI is designed to be familiar, approachable, and performance-focused. It blends in with the SoundVent design system while maintaining its own identity as a platform-level utility.
UX highlights include:
• Bottom-anchored player bar that's always available without interrupting browsing.
• Expandable player view with artwork, timeline, queue controls, and playback details.
• Minimized state for users who want to browse without visual distraction.
• Queue management that lets listeners build or modify a session on the fly.
• Real-time visualizer driven by the singleton engine's analyzer node.
The overall goal was to make playback feel effortless — a stable companion to the rest of the platform rather than a standalone feature.
Challenges & Solutions
1. Ensuring audio never restarts on navigation
Traditional routing reloads audio elements, which instantly breaks continuity.
Solution: The player and audio engine live inside a persistent layout layer that never unmounts. Routes load underneath it.
2. Preventing duplicate audio engine instances
Multiple mounts would cause overlapping playback, unsynced UI, and inconsistent state.
Solution: A true singleton pattern ensures only one audio engine ever exists. All UI modules reference the same instance.
3. Keeping progress, UI, and state in sync
Audio events need to reflect instantly in the UI, and UI controls need to update the engine without lag.
Solution: Event listeners fire updates into the global store, and UI actions route back to the engine through a unified API.
4. Integrating waveform visualization safely
The audio visualization layer required the Web Audio API, which can't be initialized prematurely or multiple times.
Solution: The analyzer is created once at engine initialization and fed into visualizers on demand.
5. Maintaining performance with heavy UI
A music player should never slow down browsing or affect scroll performance.
Solution: Decoupled rendering, throttled state updates, and a highly optimized visualizer.
Impact
The persistent music player became a defining feature of SoundVent — a core part of the user experience that makes the platform feel alive, cohesive, and modern. It elevates browsing into a continuous listening session and reinforces the platform's identity as a place where music and interaction coexist seamlessly.
For the broader system, it demonstrates a scalable pattern: platform-wide features powered by singleton engines, global state, and persistent layouts. This pattern informs many other parts of SoundVent's architecture.
For users, it creates an experience that feels premium, stable, and expressive — exactly the tone SoundVent was built to set.