Free online beat maker, and how to make your own

Your own drum machine, built in stages

This is an advanced project, built in six stages, but you still won't write any code. You'll describe each part to a free AI assistant, paste what it writes into a file, and listen.

• A 16-step beat maker that opens in any web browser and works offline
• Six drums made with code (kick, snare, clap, hi-hat, open hat, perc) in three kits: 808, 909 and lo-fi
• A chord row and an 808 bass that follow a four-chord progression, so the beat changes every bar and always sounds in key
• A melody row of eight notes from a scale where every combination sounds good
• Accents, and hi-hat rolls for trap beats
• A big Play button, the space bar, tempo with tap tempo, swing and volume
• Seven genre presets, "Surprise me", undo, share links, and WAV and MIDI download

Good for: anyone who's made a Starter project and wants a bigger challenge, music fans who want a beat maker with no account or paid sounds, and teachers mixing music, maths and code.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. The AI tries to do too much, something breaks, and it's hard to tell what. So this guide builds the beat maker in stages. After each stage, check it works and save a copy (beats-v1.html, beats-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

Build it in six steps

1. Ask for the grid, the drums and a big Play button

   Copy this promptCopy

   I don't know how to code. Please make me a beat maker (a step sequencer drum machine) that runs in a web browser.
   
   Requirements:
   - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it.
   - No external libraries, no sound files, no internet connection needed. Make every sound with the Web Audio API.
   - A grid with 6 rows and 16 columns: Kick, Snare, Clap, Hi-hat, Open hat and Perc. Clicking a square turns it on or off.
   - A big, obvious Play / Stop button at the top. When playing, a playhead moves along the 16 steps and plays every sound switched on in that column, then loops.
   - The space bar also plays and stops. Use preventDefault so the page never scrolls when I press it, and don't let it trigger twice if the Play button has focus.
   - Make the drums sound good: an 808-style kick (a sine wave that drops quickly in pitch, slightly distorted), a snare of filtered noise plus a short tone, a clap of three quick noise bursts, and hi-hats made from six square waves at clashing pitches through a high-pass filter, like a real 808. A closed hi-hat cuts off the open hi-hat.
   - Use accurate timing: schedule the sounds a little ahead with the audio clock (audioContext.currentTime), not setTimeout alone, so the beat doesn't wobble.
   - A dark background, rounded squares, each row its own bright colour.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as beats.html and double-click it. Press Play, then click some squares. A good first beat: Kick on steps 1, 8 and 11, Snare and Clap on step 9, Hi-hat on every other step. That's the start of a trap beat.

   No sound? Browsers only allow sound after you click something on the page, so press Play first. Check your volume, then tell the AI exactly what happens.

2. Tempo, swing, accents and rolls

   Copy this promptCopy

   That works, thank you. Now please add:
   - A tempo display from 60 to 180 BPM with − and + buttons, plus a "Tap" button: tap it in time and it sets the tempo.
   - A swing slider from 0% to 60% that delays every second step a little, for a hip hop bounce, and a volume slider.
   - Tapping a square cycles it: off, on, accent (louder, shown brighter with a dot), then off again. On the hi-hat row, an accent plays a quick roll of three hits instead, for trap beats.
   - Click and drag across the grid to paint the same value onto lots of squares. It must work with a finger on a phone too.
   - Clicking a row's name plays that sound once.
   - The playhead column glows, squares flash when they play, and the Play button pulses on every beat.
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).

3. Add chords and an 808 bass

   This is the step that makes it sound like real music.

   Copy this promptCopy

   Please add a "Chords & bass" section under the drums with two rows:
   - Chords: each square that's on plays a chord, held until the next square in that row or the end of the bar.
   - 808 bass: each square plays a deep, slightly distorted sine wave bass on the root note of the current chord, with a quick pitch drop at the start, also held until the next hit.
   
   The chords come from a four-chord progression that moves on one chord every time the 16 steps loop, so the beat changes every bar. Add a menu with these progressions, all in A minor:
   - Moody: Am, F, C, G
   - Dreamy: Fmaj7, Em7, Dm7, Am7
   - Dark: Am, Dm, F, E
   - Uplifting: F, G, Am, C
   - One chord: Am
   
   Show the four chord names in a strip above the grid and light up the one that's playing. Give the chords two sounds to choose from: Keys (an electric piano using a little FM synthesis) and Pad (detuned sawtooth waves through a low-pass filter, with a slow fade in). Each time the kick plays, briefly turn the chords and bass down (a sidechain "pump"). Send me the complete updated file.

4. Add a melody, drum kits and a polished sound

   Copy this promptCopy

   Please add:
   - A Melody section: 8 more rows, one for each note of the A minor pentatonic scale, highest at the top (A5, G5, E5, D5, C5, A4, G4, E4). Every combination sounds good over the chords. Three sounds to choose from: Pluck (detuned sawtooths with a closing filter), Bell (FM synthesis) and Lead (square and sawtooth with vibrato). Send the melody through an echo timed to the tempo.
   - Three drum kits: 808 (long boomy kick, cowbell perc), 909 (punchy kick, brighter hats, rim shot perc) and Lo-fi (soft kick, a gentle low-pass filter over everything and quiet vinyl crackle).
   - A reverb made with a ConvolverNode and an impulse generated from decaying noise, for the snare, clap, chords and melody.
   - A compressor on the final output, then a soft limiter (a tanh curve on a WaveShaperNode) so the sound never crackles or clips.
   
   Send me the complete updated file.

5. Presets, "Surprise me", undo and saving

   Copy this promptCopy

   Please add:
   - Seven preset buttons that load a complete beat (drums, chords, bass and melody) with its own tempo, swing, kit, progression and sounds: Trap (140 BPM, 808, hi-hat rolls, Dark chords), Boom bap (90 BPM, swung, Lo-fi kit), Lo-fi (78 BPM, lots of swing, Dreamy chords), House (124 BPM, 909, offbeat open hats), Afrobeats (104 BPM), Reggaeton (95 BPM, the dembow rhythm) and Synthwave (108 BPM, Pad chords, Lead melody). Pressing one starts it playing.
   - A "Surprise me" button: pick a genre, keep its groove, change a few drum hits, and write a new short melody that moves up and down the scale.
   - An Undo button (and Ctrl+Z or Cmd+Z) that steps back through my changes, and a Clear button.
   - Save the beat in the browser (localStorage) so it's still there when I come back.
   
   Send me the complete updated file.

6. A visualiser, share links and downloads

   This is the part that makes people say "how did you make that?"

   Copy this promptCopy

   Please add:
   - A visualiser behind the chord strip: bars drawn on a canvas that jump with the music, using an AnalyserNode, coloured from pink to green, sharp on high-resolution screens.
   - "Share link": pack the whole beat (every square, tempo, swing, kit, progression and sounds) into a short code at the end of the page address after #beat=, and copy the link. When someone opens a link like that, load that beat.
   - "Download WAV": render four bars (once through the chords) with an OfflineAudioContext using exactly the same sound code, and save it as my-beat.wav.
   - "Download MIDI": save the same four bars as a standard MIDI file, drums on channel 10 using General MIDI drum notes, so I can open it in GarageBand, FL Studio or Ableton.
   - Lay it all out like a polished music app that still fits on a phone screen.
   
   Send me the complete updated file.

   Share links only work for other people once your beat maker is online. See Putting your project online for free.

Quick fixes

On my phone, dragging across the grid scrolls the page instead of switching squares on. Please use pointer events, set touch-action: none on the grid, and use document.elementFromPoint to find which square my finger is over while it moves. Send me the complete fixed file.

Twist it into something else

Once the engine works, it can become all sorts of things:

Made a beat you're proud of? Share the link and tag us. We feature reader projects.

Sound from numbers, in perfect time

There are plenty of free beat makers online, but building one teaches you the thing behind all of them: making sound from numbers and keeping perfect time. It's also proof that you can build something genuinely complex by asking for it one stage at a time. That habit is what turns a first project into a hobby.

What to build next