usefulweb.appDependable little tools for people and AI agents. Tonegrid
Theme: Auto

Theme

Tone matrix & beat sequencer

Tonegrid

Light up squares to build looping melodies and beats, then arrange them into songs.

Launch Tonegrid → Tutorials

Tonegrid is a tone matrix for your browser: switch squares on and a playhead turns them into a looping melody, with a separate drum grid for the beat. Pick a key and scale so every note fits, shape the groove with tempo and swing, chain up to eight patterns into a song, and export WAV, MIDI, MP3 or a share link. Every sound is synthesized on your device and nothing plays until you press Play.

Free · runs in your browser · no sign-up · Version 2.0.0

Screenshots

Features

  • Melody matrix

    Light up 1–24 note rows across 1–32 steps. Squares in the same column ring together as chords; higher rows play higher pitches.

  • Separate drum grid

    Up to eight synthesized drums — kick, snare, hi-hats, clap, tom, rim and shaker — on their own 1–32 step grid.

  • Keys and scales

    Nine scales from pentatonic and blues to Dorian and harmonic minor, in any key from C3 to B4, so every square sounds right.

  • Tempo, swing and tap tempo

    Set 40–220 BPM by slider, number or tapping, and add up to 45% swing for a shuffled groove — even while the loop plays.

  • Five synth voices and a mixer

    Soft bell, pure sine, warm triangle, pluck or airy pad, with master volume, melody and drum levels and mute buttons.

  • Patterns A to H

    Keep up to eight patterns in one project. Add, duplicate, copy and paste them, shift notes in time or move the melody up and down.

  • Song arrangement

    Chain patterns into parts with 1–16 repeats each, reorder them and switch between Pattern and Song playback.

  • Polyrhythms built in

    Melody and drums may have different lengths — 12 steps against 16 — and drift against each other until the full cycle lines up.

  • Seven templates

    Start from lo-fi, arcade, shuffle blues, polyrhythm or a three-part song, or scatter a fresh random melody when you are stuck.

  • WAV, MIDI and MP3

    Render a seamless WAV loop or the whole song in your browser, download a General MIDI file, or convert to MP3, Ogg, Opus, M4A or FLAC.

  • Release-ready audio

    Optionally add a fade-out and match streaming loudness (−14 LUFS) with the site’s audio tools before you download.

  • Share links and files

    Send a link that contains the whole project, save .tonegrid.json files, and hand rendered audio to other premium apps.

  • Autosave and undo

    Projects autosave in this browser with a recent-projects list, full undo and redo, and optional Google Drive saving when signed in.

  • Playable by keyboard

    Every square is a named button: arrow keys move, Space toggles. Shortcuts can be switched off and the playhead respects reduced motion.

  • Text patterns

    Copy a pattern as readable x-and-dot text or paste one in — the same notation the Pattern Builder API understands.

Templates

Start from a ready-made project and change it to fit.

Built-in tools

Tonegrid uses these tools. Each one also has its own page and works on its own, in the browser, through the JSON API and through MCP.

For AI agents

Tonegrid runs on a deterministic engine. The same functions are available as tools with a JSON API and MCP, so scripts and AI agents get exactly the results the app shows.

  • Tonegrid Pattern Builder – Turn x-and-dot step notation into a Tonegrid project and a MIDI file.
    Tool page · POST https://tonegrid.usefulweb.app/api/v1/tools/tonegrid-pattern-builder/calculate · MCP tonegrid_pattern_builder
  • Tonegrid Scale and Sequence Planner – Map a scale to a note grid and plan your melody.
    Tool page · POST https://tonegrid.usefulweb.app/api/v1/tools/tonegrid-scale-planner/calculate · MCP tonegrid_scale_planner
  • Universal Audio Converter – Convert MP3, WAV, FLAC, Ogg, Opus, M4A and AIFF with bitrate and sample-rate control.
    Tool page · POST https://tonegrid.usefulweb.app/api/v1/tools/audio-converter/calculate · MCP audio_converter
  • Audio Cutter & Merger – Trim audio, keep or remove ranges, fade in/out, or join up to 10 clips with crossfades.
    Tool page · POST https://tonegrid.usefulweb.app/api/v1/tools/audio-cutter-merger/calculate · MCP audio_cutter_merger
  • Audio Loudness Normalizer – Measure LUFS and true peak, then normalise to Spotify, podcast or EBU R 128 targets.
    Tool page · POST https://tonegrid.usefulweb.app/api/v1/tools/audio-loudness-normalizer/calculate · MCP audio_loudness_normalizer

Build a project through the API, then open it in the app with a link to https://tonegrid.usefulweb.app/app#project=<base64url JSON>.

Import & export

Import

  • Tonegrid project (.tonegrid.json, versions 1–3)
  • Share link (#project=)
  • Text pattern (x-and-dot notation)

Export

  • Tonegrid project (.tonegrid.json)
  • WAV audio (pattern loop or song)
  • MIDI file (.mid, General MIDI)
  • MP3, Ogg Vorbis, Opus, M4A, FLAC (via site tools)
  • Share link
  • Text pattern

Keyboard shortcuts

Keyboard shortcuts in Tonegrid
KeysAction
PPlay or stop
1 … 8Select pattern A to H
[ / ]Shift the pattern one step earlier or later
Arrow keysMove between squares in a grid
Space / EnterTurn the focused square on or off
Home / EndFirst or last step of the row
Ctrl + ZUndo
Ctrl + Shift + ZRedo
Ctrl + SSave project file
Ctrl + OOpen project file
?Show keyboard shortcuts (single-key shortcuts can be switched off there)

Frequently asked questions

How do I make a melody?

Switch squares on in the melody grid and press Play (or P). Columns are steps in time from left to right, rows are notes from high to low, and squares in the same column play together as a chord.

Why does every combination sound good?

The rows follow the key and scale you choose. Pentatonic scales have no clashing half steps, so any squares fit together; switch to chromatic if you want every note.

Can I use Tonegrid with only a keyboard or a screen reader?

Yes. Each square is a button named with its note and step and announced as pressed or not pressed. Arrow keys move, Space or Enter toggles, and every menu and dialog works with the keyboard. Single-key shortcuts can be switched off in the shortcut list.

Will it start playing by itself?

No. Sound only starts when you press Play, and the optional note preview only sounds when you switch a square on. Nothing plays when a page, template or link opens.

What do melody and drum lengths that differ do?

Each grid loops at its own length, so 12 melody steps against 16 drum steps drift apart and line up again after 48 steps. WAV export of a pattern renders that full cycle.

Where are my projects stored?

In this browser (IndexedDB) on this device, listed under Recent projects. Save a .tonegrid.json file or a share link to keep or move a copy. Signed-in users can also save to their Google Drive.

Is anything uploaded?

Not for playing, saving, WAV or MIDI. Only when you choose MP3, Ogg, Opus, M4A, FLAC, a fade-out or loudness matching is the rendered audio sent to the usefulweb.site audio tools; those files are deleted after about two hours.

Can I use the music I make?

Yes. The sounds are synthesized by Tonegrid’s own code with no third-party samples, so the melodies and recordings you make are yours to use.

How does the MIDI file map the drums?

Melody notes are on MIDI channel 1 with a matching General MIDI instrument; drums are on channel 10 using General MIDI percussion keys, for example kick 36, snare 38 and closed hi-hat 42.

Limitations

What Tonegrid does not do (yet):

  • Steps are sixteenth notes of equal length (plus swing); there are no note lengths, velocities per square, triplets or tempo changes within a song.
  • All patterns in a project share the same grid sizes, key, scale and sound.
  • Sounds are simple built-in synthesizers; you cannot load your own samples or plug-ins.
  • WAV and other audio exports are limited to five minutes and 8,000 notes and drum hits; converting to compressed formats needs an internet connection.
  • Playback timing depends on your browser and may pause or stutter while the tab is in the background or the device is busy.
  • MIDI export contains notes only, not the Tonegrid sounds or mixer settings.
  • There is no audio or MIDI recording from instruments and no live collaboration.

Tutorials

Learn Tonegrid step by step.

  1. Your first melody in five minutesLight up squares in the melody grid, press Play, and learn how rows, steps and chords work in Tonegrid.Beginner 5 min
  2. Add a beat with the drum gridProgram kick, snare and hi-hats on the separate drum grid, balance the mix and let different grid lengths create a polyrhythm.Beginner 6 min
  3. Keys, scales, tempo and soundsChoose a key and one of nine scales, set the tempo by slider, number or tapping, and pick one of five synth voices.Beginner 6 min
  4. Patterns and song arrangementKeep up to eight patterns, copy and vary them, then chain them into a song with repeats and switch between Pattern and Song playback.Intermediate 8 min
  5. Export WAV, MIDI and MP3, and share your musicRender a seamless WAV loop or the whole song, download a General MIDI file, convert to MP3 with a fade-out and streaming loudness, and share projects as files or links.Intermediate 7 min
  6. Play Tonegrid with the keyboardMove through the grids with arrow keys, toggle squares with Space, use shortcuts or switch them off, and adjust the playhead for reduced motion and screen readers.Beginner 5 min
  7. Text patterns and the Pattern Builder APICopy a pattern as x-and-dot text, paste text back into Tonegrid, and build projects and MIDI files through the JSON API or MCP.Advanced 8 min

Ready to try it?

Launch Tonegrid →

Other premium apps