SoundFlow Music Player
Feature-rich web audio player featuring a real-time Web Audio API frequency visualizer, 3-band parametric equalizer, persisted Zustand playback state, and fluid Framer Motion animations.
What challenges was this built to solve?
Standard web audio interfaces lack real-time audio analysis, fail to persist playlist and volume state across page transitions, and feel rigid without hardware-accelerated animations.
Technical Architecture
Constructed a high-craft audio player with canvas-based visualizers using Web Audio API's AnalyserNode, custom BiquadFilterNodes for low/mid/high equalizer bands, and Zustand with local storage persistence.
fps
60 FPS Audio Visualizer
eq
3-Band Parametric EQ
persistence
100% Zustand Local Sync
Engineering Bottlenecks Overcome
Why These Technologies?
Zustand + React Query vs Redux
Zustand manages ephemeral, client-only UI states (such as active modals, audio nodes, and draft filters) with minimal boilerplate. React Query handles all asynchronous remote cache invalidation and server reconciliation.
Next.js App Router & Server Components
Kept heavy database and serialization logic on the server to minimize client bundle payloads. Client components are strictly restricted to interactive boundaries (audio players, filters, form inputs).
Strict Zod Schemas
Shared type contracts between client form validation and backend route handlers eliminate duplicate logic and guarantee typed safety across runtime boundaries.
Virtualized DOM Lists
Windowing renders only what is visible within the viewport, ensuring continuous 60fps scrolling even when threads reach 10,000+ messages.
Impact & Verification
Delivered a fluid, visually responsive audio player with zero audio glitching and seamless playback persistence. [TODO: Benchmark mobile audio battery impact].