During the week, I code. On weekends, I produce music. These two worlds remained separate for me for a long time, until the day I decided to bring them together.
The Spark
It all started when I wanted to share my music with my loved ones. Existing platforms didn't really meet my needs. I wanted something that would showcase my music, stay personal, and work perfectly on all devices.
So I started building Ouest Audio, a complete music streaming application — playlists, queue, shuffle, multiple sources.
Then I realized that most developers mainly needed a solid foundation for audio playback, not a full app. That's when I decided to extract the core audio functionality into a separate, composable component registry: audio/ui.
The Composable Approach
Rather than building yet another monolithic player, I focused on something more flexible. In the philosophy of shadcn, audio/ui is a registry designed to be copied into your project rather than installed as a dependency. You own the code. You modify it however you want.
The goal: make audio development as simple as assembling React components.
The player above is composed of independent building blocks — playback controls, progress bar, queue management, volume. Each piece works alone. All pieces work together.
What I Learned
The Web Audio API is powerful but complex. Browser compatibility is an ongoing battle. Autoplay policies are strict. Audio context can be suspended. Resources must be properly cleaned up.
Zustand proved to be an excellent choice for state management — with automatic localStorage persistence for playback state, queue, history, and user preferences. But it requires granular selectors to avoid unnecessary re-renders.
What these past two years taught me is that lessons from the music world and the technical world converge more than you'd think. In both cases: keep the API simple, work mobile-first, and accessibility is not optional.
Where Things Stand
audio/ui is now a complete registry — player, queue, track management, Zustand store, and extended UI components like a buffered Slider or a Sortable List.
To add it to your project:
I keep improving it with advanced features, audio visualizations, and enriched documentation.
This project was an opportunity to bring together my two passions. And what comes next looks even more interesting.
- audio/ui — Component registry and documentation
- GitHub Repository — Contributions welcome!