Chord Studio

Chord Studio aims to make music production accessible for all, with customizations based on user-prompt engineering and live tempo, instrument, and melodic adjustments.

Comment

Inspiration

Every producer remembers the frustration of sitting in front of a blank DAW with a sound in their head but no way to get it out fast. Even the people who have the want to try and create a beat from scratch, but are too intimidated and overwhelmed to attempt to do so due to the complexities of music producing technologies such as Fl Studios or Ableton that look daunting. Chord Studio was built for that moment, the gap between having a musical idea and being able to hear it. We wanted to make something that felt less like a tool and more like a collaborator: describe your vision in plain English and have a complete musical foundation ready in seconds, no theory knowledge required.

What it does

Chord Studio lets you describe music the way you'd describe it to another producer, say "dark trap in C minor, 140 BPM" or "chill lo-fi with jazz extensions", and instantly generates a full arrangement. You get a complete chord progression, genre-accurate drum pattern, bass line, and optional melody, all playing back live in your browser through a synthesized piano keyboard that ripples with light on every chord change. When you're happy with the result, you can even export it as a multi-track MIDI pack (chords, bass, and drums as separate files) ready to drop straight into FL Studio, Ableton, or any DAW.

How we built it

The frontend is Next.js 16 with React 19 and TypeScript, organized into a clean modular architecture separating UI components, music logic, audio synthesis, and MIDI encoding. The entire audio engine runs client-side using the Web Audio API, including 30+ synthesized instrument voices, 30+ drum sounds built from oscillators and noise buffers, and 5 different generic melody generation styles with voice leading, all scheduled with sub-millisecond precision. The AI backend is a Node.js/Express server that sends natural language prompts to GPT-4o with a carefully engineered system prompt that enforces music theory rules, genre-specific drum DNA, and coherence constraints linking harmonic complexity to rhythmic density. Velocity humanization and a post-processing coherence validator run locally with zero extra API cost.

Challenges we ran into

Getting the AI to generate musically coherent output consistently was the hardest problem. An LLM that doesn't understand music theory will happily pair dense 16th-note hi-hat rolls with complex maj9 chord extensions, which sounds cluttered, or generate a reggaeton pattern without the dembow snare that defines the genre. We solved this by building a detailed genre context system with explicit "complexity budget" rules, then adding a local coherence validator that auto-corrects common mistakes before the response ever reaches the frontend. Synchronizing Web Audio API scheduling with React state without drift or stale closures required moving the entire playback engine into a mutable ref outside the React render cycle.

Accomplishments that we're proud of

The Piano Ripple system, a three-layer visual interaction where keys glow, concentric ripple rings emanate, and a sine-modulated wave sweeps the keyboard on every chord change, came out better than we imagined and makes the app feel alive in a way that screenshots can't capture. The audio engine producing eight genuinely distinct instrument voices entirely from Web Audio API primitives, with no samples, is something we're proud of technically. And the genre intelligence, the fact that asking for reggaeton gives you an authentic dembow pattern while asking for jazz gives you sparse reactive drums underneath complex chord extensions demonstrates that the AI layer is doing real musical thinking, not just filling in a template.

What we learned

Prompting an LLM for structured creative output requires treating it like programming, not conversation. The system prompt that actually works reads more like a music production specification document than natural language, explicit rules, genre DNA blocks, coherence constraints, and a complexity budget system that mirrors how real producers think about the relationship between harmonic and rhythmic density. We also learned that the Web Audio API is far more capable than most developers realize: a convincing piano, FM electric piano, and additive organ, all from scratch, with no audio files.

What's next for Chord Studio

The immediate priority is to be able to download mp3 versions of the produced beat. Also we hope to be able to incorporate more than just one instrument and add a feature to bring multiple instruments together. Longer term, we want to use real sample-based audio using the Web Audio API's buffer source nodes for more realistic sounds, and a collaboration mode where two users can build on the same progression in real time. The MIDI export already gets Chord Studio into any DAW, the next step is making the browser itself a DAW-quality composition environment.

Built With

Share this project:

Updates