Groove Box
Groove Box is a web application designed for real-time music creation and live performance. The project uses Nuxt 3, Pinia for a modular architecture, UnoCSS for a lightweight design system, and the Web Audio API for sound generation and manipulation. Users can add multiple tracks (drums, synths, etc.), configure each step individually (note, activation, volume), control tempo and swing, and save their creations persistently. The whole system is designed to ensure smooth performance and an intuitive user experience.
Project Links
Key points
Modular Architecture with Pinia
Each part of the application (AudioEngine, Sequencer, Tracks) is managed by a dedicated Pinia store, ensuring a clear separation of concerns. This modular design makes it easy to add new features such as effects, instruments, or advanced pattern management.
Web Audio API and Sound Generation
The application directly leverages the Web Audio API to generate oscillators, filters, and to play preloaded audio samples in real time. "Lead" instruments use oscillators with per-step pitch control, while drum instruments are triggered using preloaded audio samples.
Tempo, Swing, and Persistent Storage
Groove Box allows users to adjust tempo and apply swing to bring groove to their sequences. Patterns are automatically saved using Pinia PersistedState, allowing users to recover their compositions even after closing the application.
Challenges
Adapting the Web Audio API for precise real-time sequencing while maintaining a smooth UX, especially for managing swing and multi-track synchronization.
Designing a clean modular architecture with Pinia to allow the project to evolve toward more effects, instruments, and advanced functionalities while remaining maintainable and scalable.