-
-
GrooveGrid running with an active beat — 8 tracks, real-time frequency visualizer, and automatic scale tuning.
Inspiration
I wanted to create something that makes music creation accessible to anyone, even people with no musical theory background. Most beat makers just let you tap random notes — I wanted one that actually sounds good by design.
What it does
GrooveGrid is a browser-based beat sequencer with 8 tracks: 4 drum tracks (Kick, Snare, Hi-Hat, Open Hi-Hat) and 4 melody tracks (Lead, Pad, Bass, Chord). The melody tracks automatically tune to whatever musical scale you choose — so every beat you make is harmonically correct without any music theory knowledge needed. A real-time frequency visualizer reacts to the sound as it plays.
How we built it
Built with React and Vite for the UI, and the Web Audio API for all sound synthesis — no audio files, no external libraries. Every sound is generated mathematically in the browser: the kick uses an oscillator with an exponential frequency drop, the snare uses filtered white noise, and the melody tracks use oscillators mapped to scale intervals. I implemented a lookahead scheduler to keep timing precise even under heavy CPU load.
Challenges we ran into
Getting the audio timing right was the hardest part. Browser setTimeout is not precise enough for musical timing, so I built a lookahead scheduler that schedules notes slightly ahead of time using the Web Audio API's internal clock, which runs independently of the JavaScript thread.
Accomplishments that we're proud of
Getting all sound synthesis working purely through code with zero audio files. The beat scheduler runs with precise timing using the Web Audio API's internal clock, and the automatic scale mapping means any combination of notes the user picks will always sound musical.
What we learned
How to synthesize different instrument sounds from scratch using the Web Audio API, and how to map musical scales to frequencies programmatically.
What's next for GrooveGrid
- Save and share beats via URL
- More instrument types (clap, tom, synth bass)
- Mobile touch support
- Export beat as an audio file (WAV/MP3)
Built With
- css
- html
- javascript
- react
- vite
- web-audio-api
