Beat Maker

Beat Maker
Draw a drum pattern, write a chord progression over it, and keep the loop as a WAV. Every sound is synthesised in your browser, so there is nothing to download before it plays.
Start from:
Tempo
82
Swing
26%
Bars
Drums
Click to fill, again for an accent. Drag along a row to paint.
1
·
·
·
2
·
·
·
3
·
·
·
4
·
·
·
Kick
Snare
Clap
Hat
Open hat
Tom lo
Tom hi
Rim
Ride
Shaker
Chords — one per bar
Every chord offered fits the chosen key, so any combination of them sounds right. You can also type a chord name yourself.
Progression:
Chord pad
Chord level
90%
Bass
Bass level
100%
Seamless loop
about 23s · 1.9 MB
A seamless file wraps the ring-out onto the start, so it repeats without a click — which is what background music needs. Turn it off for a loop that simply ends.

A drum machine and a chord backing on one page. Draw a rhythm on the grid, pick a key and a progression, and you have a loop you can leave running under a video, a stream or a podcast. Every sound is synthesised in your browser, so nothing is downloaded before it plays and nothing you make is uploaded anywhere.

How to use Beat Maker

  1. Start from a preset. Lo-fi, Boom Bap, House, Trap, Ambient, Bossa and City Pop each load a rhythm, a tempo and a progression that already work together.
  2. Edit the grid. Click a cell to fill it, click again for an accent, and drag along a row to draw several at once. The rows are a full kit: kick, snare, clap, closed and open hats, two toms, rim, ride and shaker.
  3. Set the tempo and the swing. Swing pushes every other sixteenth late, which is what stops a pattern sounding like a machine.
  4. Choose the loop length — one, two or four bars. Longer loops repeat less obviously.
  5. Pick a key, then choose a chord for each bar from the list. Every chord offered belongs to that key, so any combination of them works.
  6. Decide how the chords are played: a sustained pad, an arpeggio, or short stabs on beats two and four. Add a bass line underneath — root notes, eighths, offbeats or a walking line.
  7. Press Download to keep it. Leave Seamless loop on and the file repeats without a click. The toggle beside the button decides what you get: OPUS is about a tenth the size of the WAV, MP3 plays on anything, and WAV is what an editor wants.

Tips & gotchas

  • Mute a row rather than clearing it. The speaker icon beside each name keeps the pattern while you listen without it.
  • Accents are what give a bar its shape. A hat pattern of equal hits sounds flat; accenting the downbeat fixes it immediately.
  • The Roman numeral beside each chord is the notation song sheets use. Choosing I, V, vi then IV is the most common progression in popular music.
  • Copy link puts the whole loop in the URL, so you can send it to someone or reopen it on another machine.
  • Everything you set is kept in this browser, so the page comes back the way you left it.

Frequently asked questions

Do I need to know anything about music?

No. Load a preset, pick a key, and choose chords from the list. The list only ever offers the seven chords that belong to the key you picked, so there is no combination of them that sounds wrong. The Roman numerals are there if you want to learn what you are choosing, and can be ignored if you do not.

Where do the sounds come from — is anything downloaded?

Nothing is downloaded. The kick and toms are sine waves whose pitch falls away the way a drum head does. The hats and ride are six inharmonic square waves through a highpass filter, which is the trick the TR-808 used and the reason a drum machine cymbal is recognisable at all. The snare is a tuned head plus bandpassed noise, and the clap is four short noise bursts a few milliseconds apart followed by the room — a single burst would just be a short snare. The chords and bass are synthesised strings and piano. All of it is rendered once when you press play and then reused.

Which export format should I pick?

Opus and WAV cost you nothing to produce: your browser already contains an Opus encoder, and a WAV is a 44-byte header in front of the samples. Opus is around a tenth the size of the WAV and the same length to the millisecond, which makes it the right default for anything that will be played on a phone or dropped into a video. WAV is what to pick when the file is going into an editor, or anywhere old enough not to know what a .opus is. MP3 sits between them: it is the format that opens absolutely everywhere, and the only one here that has to fetch an encoder — about 170 kB of LAME compiled to JavaScript, downloaded the first time you export one and never on page load. To trim what you exported, or to change its format afterwards, the audio converter and trimmer does both.

What does "seamless loop" actually do?

The last hat of a bar is still decaying when the loop restarts. A file cut exactly at the bar line has a hole there, and it clicks once per repeat, forever. Seamless renders past the end and wraps that ring-out onto the beginning, so the file joins to itself perfectly. Turn it off when you want a loop that simply ends.

Can I use what I make?

Yes. The audio is generated by your own browser from your own pattern, there is no sample library with a licence attached, and nothing is sent anywhere. Use it for whatever you like.

Related tools
Character Counter
PDF Tools — Merge, Split, Rotate
Screen Recorder
Online Timer & Stopwatch