I Built a DAW and a DJ Tool in the Browser Because My English Teacher Asked

A musical instrument in a dimly lit room, ready to be played

My English teacher is a musician. The other day he was showing me some of his compositions and said something like "I wish I could just sketch a beat quickly without opening a massive app." He didn't want Ableton. He didn't want to install anything. He wanted to open a tab and start making music.

That stuck with me.

My mother studied at the Escola de Música de Barcelona back in the day. My neighbor produces electronic music in his spare room. Music is everywhere around me, and I kept hearing the same frustration: production tools are either expensive, complex, or require you to upload audio to some cloud service that may or may not respect your privacy.

So I built two tools. Both run entirely in your browser. No accounts, no uploads, no subscriptions.

The Loop Music Creator: a browser-based DAW

The first tool is a full loop-based DAW that runs on the Web Audio API. You get:

7 track types: drums, synth, bass, lead, pad, percussion, and sampler
14 synth presets: from FM piano to Karplus-Strong plucked strings to 8-bit chiptune
Step sequencer for drum patterns and a piano roll for melodic tracks
Per-track effects: 3-band EQ, compressor, reverb/delay sends
Master effects chain: reverb, delay, compressor, master EQ
Multi-scene arrangement: organize verses, choruses, bridges
Tap tempo and per-track swing for groove
WAV export and project save/load (.loop.json format)

Everything is synthesized in real-time. No samples are loaded from a server. The drum sounds are generated using noise synthesis and oscillator shaping, the synths use FM, additive, and subtractive methods depending on the preset.

The architecture

The audio engine is decoupled from React state. A useRef holds the engine instance while a useReducer manages the DAW state. This avoids the classic problem of React re-renders causing audio glitches. The engine schedules notes ahead using AudioContext.currentTime with a lookahead buffer; a technique well-documented in Chris Wilson's "A Tale of Two Clocks".

Each track gets its own gain node, panner, and effects chain routed to a master bus. The master bus has reverb (convolution-free algorithmic approach), delay with feedback, a dynamics compressor, and a 3-band EQ.

The project serializer handles AudioBuffer encoding/decoding to base64 for the sampler track; so you can save and share complete projects including imported audio.

A music production studio with warm lighting and mixing equipment

YouTube Loop Mix: a DJ tool in your browser

The second tool is a YouTube Loop Mix & DJ Tool; dual decks with crossfader, just like a real DJ setup.

My neighbor kept asking me "can I just loop a section of a YouTube video and mix it with another track?" He'd find a killer drum break on YouTube, want to loop 4 bars, and blend it with a synth pad from a local file. Every existing tool either required downloading the video first or didn't support mixing two sources.

The YouTube Loop Mix gives you:

Dual decks for loading YouTube videos or local audio files
A-B loop markers to loop any section of a track with precision
Crossfader for smooth transitions between decks
3-band EQ (low/mid/high) per deck for live mixing
Cue points to mark and jump to specific moments
BPM detection to help you beat-match tracks
WAV export of your final mix

It's the kind of tool that turns a YouTube rabbit hole into a creative session. Find a breakbeat, loop it, EQ out the highs, crossfade into a melody from your local library; all without leaving the browser.

Sheet music and musical theory notation on a wooden surface

Why browser-based?

Three reasons.

1. Zero friction. My teacher opened the link on his school laptop and was sketching beats within 30 seconds. No "download our 2GB installer" wall. No "sign up with Google" interstitial.

2. Privacy. The audio never leaves your machine. Compare that to online DAWs like BandLab or Soundtrap that upload your recordings to their servers. For someone sketching ideas they might not want public, this matters.

3. Portability. The .loop.json project format is human-readable JSON. You can version control it, diff it, share it on Discord, or even generate it programmatically. I've already written a script that creates projects from MIDI data.

The Web Audio API is underrated

Most developers don't realize how powerful the Web Audio API has become. You get:

Sub-millisecond scheduling precision
Hardware-accelerated DSP (compressors, filters, convolution)
Oscillators with all standard waveforms
AnalyserNode for real-time FFT visualization
Offline rendering for export (no real-time constraint)

The main limitation is latency on first interaction (browsers require user gesture to start AudioContext), but once running, it's surprisingly solid for production work. Chrome's audio worklet even lets you write custom DSP in JavaScript running on a dedicated thread.

Try them

Loop Music Creator; build beats, compose melodies, mix and export
YouTube Loop Mix & DJ Tool; dual decks, crossfader, A-B loops, EQ, and WAV export

Both tools are free, open to anyone, and process everything locally. If you make something cool with the Loop Creator, you can export the .loop.json and share it; the format is designed to be portable.