Sample-playback engine: short one-shots are embedded as base64 WAV, decoded to AudioBuffers at audio start; playInstrument plays the sample when present, else falls back to synthesis. First slice covers kick, snare, closed hat and crash from the Versilian Community Sample Library (CC0), trimmed to mono 22.05kHz/16-bit (~117KB). More acoustic voices to follow once the quality/size is confirmed by ear. Credit added to README. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
199 lines
9.1 KiB
Markdown
199 lines
9.1 KiB
Markdown
# Stackable Metronome
|
||
|
||
A browser **polymetric groove trainer / metronome** — and the design mockup for a
|
||
Raspberry Pi Pico hardware build. Stack as many "meter lanes" as you like; each is
|
||
its own little metronome with a grouping, subdivision, drum voice and per-beat
|
||
pattern. Layering lanes produces polymeter and true ratio polyrhythm.
|
||
|
||
**Live:** https://metronome.varasys.io
|
||
|
||
It's a single, self‑contained `index.html` — **zero dependencies**: no framework,
|
||
no build step, no bundled or CDN libraries, and nothing fetched at runtime. State
|
||
(set lists, the practice log, theme and UI preferences) lives in `localStorage`.
|
||
|
||
Because nothing loads from the network, you can save the page (`Ctrl`/`⌘`+`S`) and
|
||
open it straight from disk to run fully offline. One catch from a local `file://`:
|
||
the browser may not persist `localStorage` between sessions, so use **Export all**
|
||
(set‑list **⋯** menu) to back up your work.
|
||
|
||
## Features
|
||
|
||
- **Meter lanes** — grouping (odd meters), subdivision, a synthesized drum/percussion voice, per‑beat
|
||
on/off pattern (rests), mute, live measure counter.
|
||
- **Polyrhythm** — a per‑lane *poly* toggle fits a lane's beats evenly into lane 1's
|
||
bar (e.g. 5‑over‑4, 3‑over‑2).
|
||
- **Practice** — gap/mute trainer (play N / mute M bars) and a tempo ramp with a
|
||
start BPM and signed step.
|
||
- **Set lists** — named, ordered lists of saved setups; click an item to load it
|
||
(it switches live if you're already playing), **N** loads the next; each play is
|
||
logged for cross‑day comparison.
|
||
- **Sharing** — copy a link to your current settings or a whole set list (with an
|
||
optional QR generated by an external service).
|
||
- **Theming** — System / Light / Dark.
|
||
|
||
## The share language
|
||
|
||
A compact, human‑readable text encodes a full configuration (a *patch*). It's what
|
||
goes in a share link, and you can hand‑write or edit it.
|
||
|
||
### Patch grammar
|
||
|
||
```
|
||
v1 ; t<bpm> [; vol<pct>] [; cd<sec>] [; b<bars>] ; <lane> … [; tr<play>/<mute>] [; rmp<start>/<step>/<every>]
|
||
```
|
||
|
||
| Token | Meaning | Example |
|
||
|-------|---------|---------|
|
||
| `v1` | format version (always first) | `v1` |
|
||
| `t<bpm>` | tempo | `t120` |
|
||
| `vol<pct>` | master volume 0–100 | `vol70` |
|
||
| `cd<sec>` | time countdown, seconds (auto-advance with Continue) | `cd60` |
|
||
| `b<bars>` | segment length in bars (auto-advance with Continue) | `b16` |
|
||
| `tr<play>/<mute>` | gap trainer: play N bars, mute M | `tr2/2` |
|
||
| `rmp<start>/<step>/<every>` | tempo ramp: start BPM, ±step, every N bars | `rmp80/5/4` |
|
||
| `<lane>` | a meter lane (see below) | `kick:4` |
|
||
|
||
Tokens are joined with `;`. `tr` and `rmp` are omitted when off.
|
||
|
||
### Lane grammar
|
||
|
||
```
|
||
<sound> : <grouping> [ / <sub> ] [ = <pattern> ] [ ~ ] [ ! ]
|
||
```
|
||
|
||
- **sound** — one of:
|
||
`beep`, `kick`, `snare`, `rim`, `clap`, `hatClosed`, `hatOpen`, `ride`, `crash`,
|
||
`tomLow`, `tomMid`, `tomHigh`, `tambourine`, `cowbell`, `woodblock`, `claves`,
|
||
`jamblock` (unknown → `beep`).
|
||
- **grouping** — beats per bar, optionally grouped for odd meters: `4`, `3`,
|
||
`2+2+3`. Groups get a visual divider; accents are per‑step (see `=pattern`).
|
||
- **`/sub`** — subdivision: `1` quarter (default), `2` eighth, `3` triplet,
|
||
`4` sixteenth, `6` sextuplet. This also sets how many **pads** each beat splits
|
||
into. Append **`s`** for **swing** on even subdivisions — `2s` (swung eighths) or
|
||
`4s` (swung sixteenths) delay the off‑beats to a triplet (2:1) feel. Omit for quarter.
|
||
- **`=pattern`** — per‑**step dynamics**, one char per pad: **`X`** accent, **`x`**
|
||
normal, **`g`** ghost (soft), **`.`** mute (rest). Length = beats per bar × `sub`. Omit to get the
|
||
default — the first step of **each beat** accented, the rest normal (click a pad in
|
||
the UI to cycle accent → normal → mute). e.g. `4=.X.X` accents the backbeat (2 & 4);
|
||
`4/2s` is swung eighths with the default accents. (Legacy `x`/`.` on/off patterns and
|
||
short beat‑count patterns still parse.)
|
||
- **`~`** — polyrhythm: fit this lane's beats evenly into **lane 1's** bar.
|
||
- **`!`** — mute the lane.
|
||
|
||
### Examples
|
||
|
||
| Patch / lane | What it is |
|
||
|---|---|
|
||
| `kick:4` | kick on 4 quarter beats |
|
||
| `snare:4=.X.X` | accented snare backbeat (2 & 4) |
|
||
| `hatClosed:4/2` | eighth‑note hi‑hats (downbeat of each beat accented) |
|
||
| `ride:4/2s` | **swung** eighth‑note ride |
|
||
| `claves:5~` | 5 evenly across lane 1's bar (5‑over‑4 if lane 1 is `4`) |
|
||
| `kick:2+2+3=x..x..x` | 7/8, kick on each group start |
|
||
| `cowbell:3+2/2` | 5/4 grouped 3+2, eighth subdivision |
|
||
| **Full:** `v1;t120;kick:4;snare:4=.x.x;hatClosed:4/2;tr2/2` | backbeat groove with gap trainer |
|
||
|
||
### In URLs
|
||
|
||
- **Settings:** `…/#p=<patch>` — readable, e.g.
|
||
`…/#p=v1;t120;kick:4;claves:5~`
|
||
- **Set list:** `…/#sl=<base64url>` — a JSON `{title, description, items[]}` where
|
||
each item's config is a patch string. Used because titles/notes are free text.
|
||
|
||
Opening such a link applies the settings (or imports the set list) on load, then
|
||
clears the hash so a refresh won't re‑import.
|
||
|
||
## Sharing
|
||
|
||
In the set‑list panel's **⋯** menu:
|
||
- **Share settings link** / **Share set‑list link** open a dialog with the link to
|
||
**Copy** or **Open**.
|
||
- **QR ↗** opens a third‑party QR service (api.qrserver.com) with the link in its
|
||
URL so you can scan it on a phone. A banner warns you it's external — confirm the
|
||
QR decodes to the shown link before trusting it. (No QR is generated locally.)
|
||
- **Export all / Import file** back up your set lists and practice log as a JSON
|
||
file (a legacy `presets` field is included for backward compatibility).
|
||
|
||
## Keyboard shortcuts
|
||
|
||
| Key | Action |
|
||
|-----|--------|
|
||
| `Space` | play / stop (works everywhere except while typing in a text field) |
|
||
| `T` | tap tempo |
|
||
| `←` / `→` | tempo ±1 (`Shift` = ±10) |
|
||
| `A` | add meter lane |
|
||
| `↑` / `↓` / `Home` / `End` | move the **cue** cursor (crosses set lists) |
|
||
| `PgUp` / `PgDn` | cue the previous / next set list |
|
||
| `Enter` | commit the cued item — switches on the next **bar** (smooth) |
|
||
| `Shift`+`Enter` | commit now — switches on the next **beat** (rude) |
|
||
| `N` / `P` | load next / previous immediately (rude quick‑step) |
|
||
| `Alt`+`↑` / `Alt`+`↓` | reorder the cued item |
|
||
| `1`–`9` | enable / silence lane 1–9 |
|
||
| `?` | shortcuts help |
|
||
| `Esc` | close the help / share dialog · cancel an armed switch |
|
||
|
||
(Arrow / navigation keys are left alone while a slider or dropdown is focused, so they still adjust it.)
|
||
|
||
## Live performance
|
||
|
||
The set list is performance-ready: you can line up where you're going next without
|
||
disturbing what's playing, then commit on a musical boundary — no audible gap.
|
||
|
||
- **Cue, then commit.** The arrows / `Home` / `End` / `PgUp` / `PgDn` move a *cue
|
||
cursor* (amber outline) through items — across set lists, without loading anything.
|
||
**`Enter`** commits the cued item with a **smooth** cutover at the next **bar**;
|
||
**`Shift`+`Enter`** is a **rude** cutover at the next **beat** ("wrong thing playing,
|
||
fix it now"). `N` / `P` are immediate rude quick‑steps. `Esc` cancels an armed switch.
|
||
- **Bar‑length segments.** Give an item a **bar** count (Timers box, or the `b<n>`
|
||
patch token) and a bar countdown (▦) shows bars remaining. With **Continue** on, it
|
||
auto‑advances to the next item at the bar boundary — so a *song* is just a set list
|
||
of segments (each with its own tempo, ramp and bar length) that hand off seamlessly.
|
||
- All transitions — manual or auto, beat or bar — keep the clock continuous; the loaded
|
||
item can even live in a set list you're not currently viewing (the player names it).
|
||
|
||
## Versioning
|
||
|
||
`VERSION` holds the formal version. `deploy.sh` stamps the served page:
|
||
|
||
- **Formal** — a clean commit tagged `v<VERSION>` → `X.Y.Z`.
|
||
- **Dev** — anything else → `X.Y.Z-dev.<utc-timestamp>.<short-sha>[.dirty]`.
|
||
|
||
Cut a release with `./release.sh [X.Y.Z]` — the optional arg bumps & commits
|
||
`VERSION`; it then tags the current commit `v<VERSION>` (requires a clean tree).
|
||
Push the tag, then deploy.
|
||
|
||
## Deploy
|
||
|
||
`./deploy.sh` copies `index.html` (version‑stamped) into the Caddy
|
||
web root and smoke‑tests the live URL. No restart needed (`file_server` picks up
|
||
changes immediately).
|
||
|
||
## Files
|
||
|
||
| File | Purpose |
|
||
|------|---------|
|
||
| `index.html` | the whole app |
|
||
| `deploy.sh` | publish to the Caddy web root |
|
||
| `release.sh` | tag a formal version |
|
||
| `VERSION` | formal version string |
|
||
| `LICENSE` | GNU AGPL v3 license text |
|
||
|
||
## License
|
||
|
||
Copyright (C) 2026 Varasys.
|
||
|
||
This program is free software: you can redistribute it and/or modify it under
|
||
the terms of the **GNU Affero General Public License** as published by the Free
|
||
Software Foundation, either version 3 of the License, or (at your option) any
|
||
later version. See [`LICENSE`](LICENSE) for the full text.
|
||
|
||
Because the app is served over a network, the AGPL's §13 applies: anyone
|
||
interacting with a hosted instance must be able to get its source. The repo
|
||
link in the in‑app **?** help satisfies this.
|
||
|
||
### Credits
|
||
|
||
Acoustic drum one‑shots are from the **[Versilian Community Sample Library
|
||
(VCSL)](https://github.com/sgossner/VCSL)**, released under **CC0** (public
|
||
domain) — trimmed and downsampled, embedded inline. The 808/909 voices and the
|
||
electronic/percussion sounds are synthesized in Web Audio (no samples).
|