Beat Generator App: Build Your Own Web Audio Drum Machine in 30 Seconds
Every top result for this keyword is either a closed App Store product with in-app purchases, an AI that returns a finished audio file, or a GitHub tutorial where you still have to write the JavaScript yourself. There is a fourth option nobody talks about. Describe the app in one sentence, get back a single HTML file with the Web Audio API wired up, no signup, under 30 seconds. Here is exactly how it works and how to make it yours.
The keyword hides a surprisingly small object
When people search “beat generator app” they often expect something the size of Logic Pro. The actual shape is much smaller. A beat generator app is a step sequencer. A step sequencer is a 2D array of booleans, a clock, and a function per drum voice. Drop any one of those and the app stops working. Add anything else and the app gets nicer but not fundamentally different.
The reason this matters for generating the app is scope. The smaller the honest definition, the more likely a model finishes it in one shot. A 300-line HTML file is inside Claude Haiku’s sweet spot. A full DAW is not. So if you prompt for “a beat maker like GarageBand” you will get disappointment. If you prompt for “a 16 step sequencer with a pad grid and Web Audio voices” you will get a working app before you finish reading this paragraph.
The five pieces of every beat generator app
Before you prompt for one, know the parts. This is not a list for show. It is the exact checklist a generated file needs to satisfy before it can play a single hit.
Pattern state
A 2D boolean array. lanes x steps. Flip a cell by clicking a button. Save by serializing to JSON. Load by reversing.
Voices
Each drum is a function that takes a start time and schedules oscillators or noise with gain envelopes on the AudioContext.
Scheduler
setInterval at (60 / BPM / 4) * 1000 ms for simple use. For accuracy, a lookahead loop using AudioContext.currentTime.
Transport
Play starts the scheduler. Stop clears the interval and resets the step counter. Clear zeroes the pattern array.
Visual playhead
A single className toggle per step. requestAnimationFrame optional. The grid cell at [step] gets a teal outline while active.
What a minimum-viable single-file app looks like
This is roughly what Quick mode streams back for a first prompt. No libraries, no build step, no npm. It opens in any browser. It plays sound. It is under 300 lines.
How mk0r turns a sentence into that file
Everything below is readable in the repo. Quick mode lives in src/app/api/chat/route.ts and the model choice lives in src/app/api/chat/model/route.ts. The VM backend uses E2B template 2yi5lxazr1abcs2ew6h8 pinned in src/core/e2b.ts. None of this is marketing. You can read it.
Quick mode pipeline
Request to playable pad, end to end
Prompt
Plain English
Claude Haiku
FREE_MODEL
NDJSON stream
readNDJSON()
iframe preview
HTML renders live
Web Audio
AudioContext plays
The preview iframe updates as tokens stream in, so the pad grid is visible before the scheduler code finishes writing.
The scheduler line is the one that matters
One line decides whether the app feels like an instrument or a toy. It is the interval. At 120 BPM, each beat is 500 ms, and a 16-step bar runs at 16 sixteenth notes per bar, so each step is 125 ms. The math is (60 / BPM / 4) * 1000. If you prompt for “lookahead scheduler using AudioContext.currentTime” you get the tight version that the Chris Wilson pattern uses and the timing stops drifting. If you just say “play a beat” you get setInterval, which is fine until the tab loses focus.
What your generated file must contain to actually play a beat
- One AudioContext for the whole page
- A 2D boolean array for the pattern state
- A pad grid of buttons bound to the array
- A scheduler that advances on an interval
- A voice function per lane that takes a start time
- Play, stop, and clear buttons
- Optional: visual playhead, BPM slider, swing, randomize
Try the prompt yourself
Open mk0r, paste one of the starter prompts below, and watch Haiku stream the pad grid in under 30 seconds. No signup, no paywall, no install.
Open mk0r →Six prompts that produce six very different beat generators
Change the prompt, change the app. These are the six I bounce between most. Each one produces a meaningfully different single-file output. Paste any of them into mk0r and hit enter.
Build a 16-step drum machine with kick, snare, hi-hat, clap. Teal theme.
16-step sequencer, 4 lanes, BPM slider 60-200, swing knob 0-50%, synthesized voices only.
Drum machine that loads kick.wav, snare.wav, hat.wav, clap.wav from /samples. 4 pattern slots A-D, chain button, BPM 128.
Drum machine on row 1-4, mono synth on row 5, click a cell in row 5 to schedule a C-minor arpeggio note at that step.
Step sequencer where the currently-playing column glows, and each active cell pulses on trigger with a 100ms teal flash.
Beat generator with a one-pole lowpass, light bitcrush, and tape-wow LFO on the master bus. Toggle button to bypass.
The step-by-step, written plain
From 'I want a beat maker' to an HTML file
Type one sentence
Open mk0r.com. No signup wall appears, no sign-in link blocks you. Type: "Build a 16-step drum machine with kick, snare, hi-hat, and clap. Teal accent, BPM slider, play and stop buttons."
Watch the HTML stream in
Quick mode is Claude Haiku pinned to FREE_MODEL = "haiku" in the repo. It streams HTML token by token through readNDJSON() in the chat route. The preview iframe updates as tokens arrive, so the pad grid appears before the scheduler code finishes writing.
Click a cell
The cell toggles to teal. The AudioContext initializes on first gesture (browser autoplay policy). Hit play. A scheduler loop starts at 120 BPM divided by 4, each step is 125 milliseconds, and the active cells on each row trigger their voice.
Edit by prompting
"Add a swing knob that shifts every other 16th by up to 50%." The model rewrites the scheduler to offset odd steps by a fraction of the step duration. "Make the kick a sample from a URL." Now voices.kick fetches a WAV, decodes it once at boot, and plays it with createBufferSource.
Keep the file
When you are happy with it, download the HTML or copy it into your own repo. Host it on any static host. The file phones nothing home and has no mk0r runtime in it. What you see is what you ship.
Where the VM mode fits in (and when to switch)
Quick mode is one HTML file. That is perfect for a drum machine. It stops being perfect the moment you want pattern chaining with keyboard shortcuts, state that survives a refresh, or a shareable link per pattern. At that point you switch to VM mode. The same prompt box. A different backend.
The E2B sandbox comes pre-baked with Vite + React + TypeScript + Tailwind CSS v4, a dev server on port 5173, and Playwright MCP on port 3001 for browser testing. By the time you finish typing, someone else’s pre-warmed sandbox is already yours. You get the same pad grid, now as a real React component tree you can grow.
Generated beat app vs. App Store beat app
Honest side-by-side. This is the trade you are making.
| Feature | Typical App Store beat maker | mk0r (generated HTML app) |
|---|---|---|
| Time to first playable pad grid | 30-90 minutes (tutorial) | ~20-30 seconds (stream) |
| Account required | Apple ID or Google Play signin | None |
| You own the source code | No, closed binary | Yes, the HTML is yours |
| Change the scheduler logic | Impossible without jailbreak | Edit the JS directly |
| Swap the kick for your own sample | Requires in-app purchase | One follow-up prompt |
| Host on your own domain | Not possible | Any static host works |
| Runs offline from a single file | Usually no | Yes |
| Works on mobile and desktop browser | iOS only or Android only | Yes |
Generated beat app vs. AI music generator
The second trade. This one is subtler. People lump these in together. They should not.
| Feature | AI audio generator (you get the file) | mk0r (you get the app) |
|---|---|---|
| What you get back | An MP3 or WAV (finished audio) | HTML + JS source (a working app) |
| Can you keep editing the pattern? | No, the file is fixed | Yes, the grid is editable |
| Can you change the BPM after export? | Re-generate from scratch | Yes, change the BPM slider |
| Can you embed it on your site? | Upload a file | Paste the HTML |
| Licensing of the output | Depends on provider ToS | Your code, your rules |
| Works when the provider goes offline | No, service-dependent | Yes, file runs locally |
Small rules that make the output much better
A 30-second generation is fast. A good 30-second generation is not automatic. These are the half-dozen habits that matter.
Do prompt for the shape, not the song
Say "16 steps, 4 lanes, BPM slider, teal pads." The model nails UI. Let YOU choose the pattern.
Do iterate one knob at a time
"Add swing." "Now add accent per step." Small diffs regenerate cleanly and stream faster than a full rewrite.
Do mention Web Audio explicitly
Saying "use the Web Audio API, no external libraries" kills the chance the model reaches for tone.js or howler.
Do ask for sample loading once happy
Synthesized drums are fast to prototype. Once the grid feels right, swap voices for AudioBufferSource and load your own WAVs.
Don't ask for realtime MIDI in
Web MIDI exists but is gated. If you need external MIDI, switch to VM mode and use a React + Vite project.
Don't expect sample-accurate timing from setInterval
For serious timing, ask for "lookahead scheduler using AudioContext.currentTime" per the Chris Wilson pattern.
The anchor fact nobody will copy
Most pages in this keyword cluster lift each other’s bullet points. The one thing that is hard to fake is a readable source file. Quick mode’s model is a one-line export:
The stream is NDJSON, parsed by readNDJSON() at src/app/api/chat/route.ts:113-148, yielding SessionNotification chunks as they arrive. Per-session boot is measured as sessionBootMs on line 233. The VM template is locked in src/core/e2b.ts:30-32 as 2yi5lxazr1abcs2ew6h8.
If a competitor claims “instant,” ask them which model, which template, which file. If they cannot point at a line of source, they are selling the word and not the thing.
The honest limits
A beat generator produced this way is excellent for personal sketches, browser demos, landing-page audio, and prototype instruments that need a real pad grid on screen. It is not a DAW. If you need 64-channel audio routing with sends, side-chained compression, automation lanes, and VST hosting, you should still buy Ableton Live. If you need an iOS release with In-App Purchase and TestFlight, you still need Xcode and an Apple Developer account.
What this method replaces is the first two hours of wiring audio plumbing to a UI. Those two hours used to be the obstacle that killed the idea before the beat got written. Now they take 30 seconds. What you do with the other 119 minutes 30 seconds of your afternoon is on you.
Want to talk through your specific drum-machine idea?
I can show you which prompt shape produces which app shape, live. Book 20 minutes. Bring the thing you want to build.
Book a 20 min walkthroughFrequently asked questions
What counts as a beat generator app, technically?
A beat generator app is a step sequencer with a fixed tempo, a grid of pads (usually 16 steps across 4 or 8 drum lanes), and a playback engine. The playback engine schedules audio events on a clock and triggers a sound per active cell. In a browser, the clock and the sounds both come from the Web Audio API: one AudioContext, a setInterval or scheduler loop, and either synthesized voices (oscillators, noise bursts, gain envelopes) or sample buffers. Nothing else is required.
Why would I generate the app instead of downloading one from the App Store?
Because every App Store beat maker is a closed box. You cannot change how the hi-hat pattern accents, you cannot swap the kick for your own sample without an upgrade, you cannot embed the sequencer on your own site, and you pay a subscription for the privilege. A generated HTML file is the opposite of all of those. You see the code. You change the code. You paste it into Netlify and ship it.
How fast is mk0r's Quick mode actually?
Quick mode is pinned to Claude Haiku in src/app/api/chat/model/route.ts (FREE_MODEL = 'haiku') and streams HTML token-by-token through a ReadableStream. Landing copy shows '<30s average build time.' The per-session boot is measured as sessionBootMs in the chat route, and the preview renders into an iframe as the response streams, so you typically see the first pad grid before the final bar of JavaScript finishes writing.
Do I need to sign up, pay, or install anything?
No. mk0r's landing page says it directly: 'no signup, no paywall, no friction.' You open mk0r.com, type 'build a 16-step drum machine with kick, snare, hi-hat, clap', and the app renders in a phone preview while it streams. No email, no credit card, no native install.
Can I actually use the Web Audio API from a generated single-file app?
Yes. The Web Audio API is built into every modern browser, requires no npm install, and is available from any HTML file via window.AudioContext. The smallest working beat generator is an AudioContext, a createOscillator call for the tone sounds, a createBufferSource with noise for the snare and hat, a gain envelope, and a scheduler running at (60 / BPM / 4) seconds per step. That whole thing fits in a single file under 300 lines.
How is this different from Beatlander, MusicGPT, or ImagineArt?
Those tools generate finished audio. You send a text prompt and you get back an MP3 or a WAV. You do not get the instrument, the grid, the tempo, the pattern, or any control over how it was built. mk0r generates the app itself. You get HTML and JavaScript you can open in a tab, host anywhere, modify line by line, and keep forever.
Can I swap the in-browser synth for real drum samples?
Yes. Ask for it in the follow-up prompt. Replace 'kick is a sine wave at 60Hz with a 0.2s gain envelope' with 'load kick.wav, snare.wav, hat.wav from a samples folder and play them with createBufferSource.' The model rewrites the trigger function to decode and play AudioBuffer objects instead of synthesized voices. The grid UI stays the same.
What if I want a full React + Vite project instead of one HTML file?
Switch from Quick mode to VM mode. The VM backend spins up E2B template 2yi5lxazr1abcs2ew6h8, pre-baked with Vite + React + TypeScript + Tailwind v4 and Playwright MCP on port 3001. The template boots in about 2.5 seconds from a warm pool. The model writes components, the dev server hot-reloads at localhost:5173 inside the sandbox, and you see the result in the same preview.
Is the output good enough to actually use, or is this a toy?
For a personal beat sketchpad, a landing-page audio demo, an exam study timer with rhythm cues, or a homework project, it is good enough to ship as-is. For a production DAW or a released iOS app, it is a starting skeleton that you extend. The honest framing is: it collapses the first two hours of wiring audio plumbing into twenty seconds of prompt, and leaves the musical and UX decisions to you.
Will the generated code run offline?
Yes, once you have the file. The Web Audio API does not phone home, the page does not need an internet connection to play sounds, and if you save the HTML locally or host it on any static host (GitHub Pages, Netlify, Cloudflare Pages) it runs the same way. The only network request is the initial page load.
No signup. No paywall. No install. Just describe the app you want.