BitCrusher, Freeverb, JCReverb, Chebyshev, and PitchShift need the app to run from a web server. In the project folder run: npm start then open http://localhost:3000
BEATBOP is a browser-based step sequencer and groovebox. It's designed to run in both desktop and mobile devices, so you can create music at home or on the go. Import or export your project, MIDI tracks, or record and save an audio file.
Landscape mode recommended for mobile devices.
| ZONE | PURPOSE |
|---|---|
| Header | Logo, transport (Stop/Play/Record), More options (⋯), Help (?), Settings (⚙) |
| Timeline | Minimap of all pages; ‹ › navigation; click a page to jump; green border = page currently playing |
| Toolbar | Randomize (🔀), step actions (ADD/DEL/COPY/PASTE), Page dropdown (P 1/1), Undo/Redo |
| Randomize | Randomize the current page for all tracks (instrument-aware; bass and synths share a key) |
| Copy / Paste | Copy a step (click a step) or a page (click a page in the timeline); paste by clicking a step or a page |
| Track Grid | Track header (name, M/S, mode ⊞/🎹, ⚙, Instrument) + steps or notes grid |
| Console | Last-action readout; expand (▾) for full history — click an entry to revert to that state |
| CONTROL | ACTION |
|---|---|
| ■ Stop | Stop playback, reset to step 1 |
| ▶ Play | Start playback (shows ⏸ while playing) |
| ⏸ Pause | Pause; click again to resume |
| ● Record | Capture live audio output |
| Space | Toggle play/pause from keyboard |
Open ⋯ More options in the header to set BPM (20–300) and Swing. BPM is applied immediately to the transport. Swing delays odd-numbered steps for a shuffle feel (0% = straight, 50–70% = hip-hop/jazz groove).
Click + ADD TRACK below the grid. To delete, right-click a track label → Delete Track.
| CONTROL | ACTION |
|---|---|
| Color dot | Visual identifier for the track |
| Name | Click to rename |
| M / S | Mute / Solo |
| ⚙ | Track options (same as right-click on label) |
| Instrument | Opens Instrument settings (category, variant, sound options) |
| 🔀 (Track) | Randomize this track only (current page; instrument-aware) |
| ⊞ / 🎹 | Toggle Steps vs Notes layout |
| Volume | Per-track level (in track context menu) |
Click Instrument (or open via track context menu) to set Category (Sampler, Drums, Bass, Monosynth, Polysynth, Guitar, Keys, Strings), Variant (e.g. Kick/Snare; Synth Guitar/Electric Guitar/Acoustic Sample; Piano/Organ; Synth Cello/Cello), Base Note, and — for synths — SOUND (ToneShaper controls):
Drum and synth types have their own Tone.js options (decay, harmonicity, resonance, etc.). Save or Cancel applies or reverts changes.
| ENGINE | BEST FOR |
|---|---|
| Synth | Leads, bass, pads (waveform + ADSR) |
| FM | Bells, e-piano, metallic tones |
| AM | Organs, tremolo textures |
| Pluck | Guitar, harp (Karplus-Strong) |
| Membrane | Kick drums, toms |
| Metal | Hi-hats, cymbals |
| Poly | Chords, layered pads |
Set category to Sampler in Instrument settings, then LOAD SAMPLE. Supports .wav, .mp3, .ogg, .aiff.
In STEPS mode with ADD (+) selected, click any cell to activate it. Click an active cell to turn it off. Drag across cells to paint/erase in bulk.
Right-click or double-click any step to open the Step Editor popup:
| PARAMETER | RANGE | EFFECT |
|---|---|---|
| Velocity | 0–127 | Note loudness and brightness |
| Duration | 1–16 (16ths) | How long the note sustains after the step triggers |
| Pitch offset | semitones | Raises/lowers note relative to track's base pitch; note name shown live |
| Swing | 0–100% | Individual step delay, independent of global swing |
Step numbers highlighted in bold (1, 5, 9, 13) mark the four quarter-note beats of a 4/4 bar.
A tie links a step to the previous note, holding it through both steps for a longer sustained note. Right-click a step → Toggle Tie.
Pages let you chain multiple 16-step patterns together. During playback, BEATBOP plays Page 1, then Page 2, then Page 3… looping back to Page 1. This creates evolving compositions up to 256 steps long (16 pages × 16 steps).
The Toolbar shows P 1/1 (current page / total). Click it to open the Page menu (New, Copy, Paste, Clear, Delete). In the timeline, a green border highlights the page currently playing during playback. You can click any page in the timeline to jump there; during playback you can still navigate the view without stopping.
Click the P 1/1 button in the Toolbar to access:
| BUTTON | ACTION |
|---|---|
| NEW PAGE | Add a page after the current one (pre-filled with current page's content) |
| COPY PG | Copy all track data from this page to the clipboard |
| PASTE PG | Paste clipboard page data onto the current page |
| CLEAR ALL | Erase every step on the current page across all tracks |
| DEL PAGE | Remove the current page (minimum 1 page always remains) |
A full piano roll interface for precise melodic and harmonic editing. Tracks in Notes layout show each step as a column of 8 rectangles (scale degrees 1–8). Click a track's notes grid to open the piano roll for that track (clicking on modals or overlays will not open the editor). Use the ⊞ / 🎹 button in the track header to switch that track between Steps and Notes layout. On narrow screens (<600px) the back button is icon-only.
| TOOL | KEY | ACTION |
|---|---|---|
| ✎ Draw | D | Click empty cell to add note; click again to remove. Drag to paint across multiple steps. |
| ✕ Erase | E | Tap or drag over notes to remove them. |
CLEAR removes all notes from the current track.
Click SNAP 1/16 in the toolbar to cycle: 1/16 → 1/8 → 1/4 → 1/2. Notes snap to the nearest grid value when placed or moved.
In the Velocity strip at the bottom of the editor, click and drag any bar upward to increase velocity, downward to decrease it.
Each track has its own layout: Steps (step cells) or Notes (scale-slot grid). Use the ⊞ (Steps) / 🎹 (Notes) button in the track header to toggle. Sampler and Drums default to Steps; all other categories default to Notes.
| BUTTON | ACTION |
|---|---|
| + (Add) | Click or drag to add steps |
| − (Delete) | Click or drag to remove steps |
| Copy | Copy a step (then click a step to paste) or copy a page (then click a page in the timeline to paste) |
| Paste | Paste: click a step to paste step data, or click a page in the timeline to paste a copied page |
Shows a pitch visualization (8 scale slots per step). Click the notes grid to open the piano roll Note Editor. Track context menu: Copy Track / Paste Track for full track data.
Toolbar 🔀 — Randomizes the current page for all tracks; instrument-aware (drums, bass, leads, chords); bass and synths share a key for a cohesive sound. Track context menu 🔀 — Randomize only that track (current page).
The P 1/1 button opens the page menu: New, Copy, Paste, Clear, Delete. You can also copy/paste pages via the toolbar Copy/Paste buttons and clicking the timeline.
The ↩ / ↪ buttons and Ctrl+Z / Ctrl+Y undo and redo. Expand the Console (▾) to see full history — click an entry to revert to that state (confirm when prompted).
Step cell right-click — volume, Edit Step…, Toggle Tie, Copy/Paste Track, Import/Export MIDI, Load Sample, Delete Track.
Track label right-click or ⚙ — Instrument, Track Randomize (🔀), Copy/Paste track, Import/Export MIDI, Mute, Solo, Load Sample, Staff Notation, Delete Track.
Open ⚙ Settings and click SAVE PROJECT. Downloads beatbop_project.json containing your full composition — BPM, swing, all tracks, all steps, all pages.
Open ⚙ Settings → LOAD PROJECT and select a previously saved .json file. The current session is replaced.
Right-click any track label or step → Export Track MIDI. Downloads a standard .mid Type-0 file for the current page. Import directly into Ableton Live, Logic, GarageBand, FL Studio, or any DAW.
.webm audio fileSettings → EXPORT MIDI downloads all tracks as one .mid file. To export a single track, right-click the track label or a step → Export MIDI.
Settings → MIDI IMPORT replaces all tracks with the first track from a MIDI file. To import into one track only, right-click the track label or a step → Import MIDI.
Right-click any track (or click ⚙) → Export Staff Notation to view a canvas-rendered musical staff for that track.
| SETTING | OPTIONS | EFFECT |
|---|---|---|
| STEPS | 8 / 16 / 32 | Steps per page on all tracks |
| QUANTIZE | 16th / 8th / 8th triplet / Quarter | Note grid snap for Note Editor |
| SWING | 0–100% | Global shuffle (also in ⋯ More options) |
| KEY | ACTION |
|---|---|
| Space | Play / Pause |
| R | Start / Stop recording |
| ← | Go to previous page |
| → | Go to next page (creates new if on last page) |
| KEY | ACTION |
|---|---|
| S | Switch to Select tool |
| D | Switch to Draw tool |
| E | Switch to Erase tool |
| Delete | Delete selected notes |
| Backspace | Delete selected notes |
| ACTION | EFFECT |
|---|---|
| Double-click step | Open Step Editor popup |
| Right-click step | Open step context menu |
| Right-click track label | Open track options menu |
| Long-press (touch) | Open context menu on mobile |
| Drag across steps | Paint/erase steps in bulk |
| Click minimap | Jump to that page |
Recording complete. Save the captured audio as a .webm file?