# Tune Meadow: three HTML MIDI player demos

Static pages, no backend, no runtime CDN. Everything is vendored under `assets/`.

| Page | Song | Visual | Length |
|---|---|---|---|
| `piano.html` | Für Elise (Beethoven) | Falling notes onto an 88-key keyboard, right and left hand colours | 2:11 (131.4 s; the last note ends at about 130.4 s) |
| `guitar.html` | Spanish Romance (anonymous) | Six-string tab with a moving cursor, plus a fretboard that lights string and fret | 1:04 (64.3 s) |
| `drums.html` | When the Saints Go Marching In | Lanes (crash, hi-hat, tom, snare, kick) flowing to a hit line | 1:41 (100.8 s) |

## Run it

The pages fetch their MIDI files, so open them through a local static server, not `file://`:

```
npx serve /workspace/tunemeadow-demos/demos
# or
python3 -m http.server 8765 -d /workspace/tunemeadow-demos/demos
```

Then open `/` (the demos home), `/piano.html`, `/guitar.html` or `/drums.html`. Chrome on desktop and Android is the tested target.

## Features (all three pages)

Play and pause (button or Space), seekable progress bar (drag, click or arrow keys), tempo 50–150%, A-B loop (set A, set B, Loop toggles, Clear), metronome (accent on the bar start; 3/8 counts one pulse per bar), volume, responsive layout.

- Piano: key highlight, right and left hand colours, mute each hand, Web MIDI keyboard input (bonus; plays through the same piano).
- Guitar: tab with moving cursor that follows the current row, click the tab to seek, fretboard highlight of the sounding string and fret.
- Drums: labelled lanes, lane and hit-line glow on every hit, click a lane label or its button to mute that drum, optional quiet melody guide.

## How it works

- `assets/tm-engine.js` is a small look-ahead scheduler. Song time is kept at 100% tempo and mapped to the audio clock through anchors, so seek, tempo change and A-B wraps do not drift. The draw loop reads the same clock (minus output latency) so visuals follow the audio.
- `assets/piano.js`, `guitar.js`, `drums.js` hold each page's rendering (Canvas 2D) and sound.
- Guitar fingering is computed in the browser: notes at the same onset are grouped, each gets a string and fret in standard tuning (frets 0–15), and a dynamic-programming search minimises hand movement.
- `assets/midi/make-saints.js` regenerates `assets/midi/saints-drums.mid` (`node make-saints.js`).

## Libraries and licenses

| Library | Version | License | Path |
|---|---|---|---|
| Tone.js | 15.1.22 | MIT | `assets/vendor/tone/` |
| @tonejs/midi | 2.0.28 | MIT | `assets/vendor/tonejs-midi/` |
| Salamander Grand Piano V3 samples (Alexander Holm) | V3 | CC BY 3.0 | `assets/vendor/salamander/` |
| FluidR3_GM nylon guitar via midi-js-soundfonts | n/a | CC BY 3.0 (as stated by midi-js-soundfonts) | `assets/vendor/soundfont/` |
| Fraunces and DM Sans (latin subsets) | Google Fonts v38 / v17 | SIL OFL 1.1 | `assets/fonts/` |

alphaTab was not used: the guitar tab is drawn on a canvas by this project, so there is no MPL-2.0 dependency. Music licenses and exact URLs are in `SOURCES.md`. Attribution required by CC BY / CC BY-SA is in each page footer and in `SOURCES.md`.

## Credits

Attribution for everything these demos use. Dates, direct file URLs and notes are in `SOURCES.md`.

- **Spanish Romance** (`guitar.html`): Mutopia Project piece #795, licensed [CC BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/). Arranger/typesetter (Mutopia maintainer): jeff covey. Mutopia page: https://www.mutopiaproject.org/cgibin/piece-info.cgi?id=795. Changes made: the MIDI is unchanged; this demo adds an automatically computed guitar tab fingering and a canvas tab view, which is a derived work shared under the same CC BY-SA terms.
- **Für Elise** (`piano.html`): Mutopia Project piece #931, Public Domain. Engraver/typesetter: Stelios Samelis. Mutopia page: https://www.mutopiaproject.org/cgibin/piece-info.cgi?id=931. MIDI unchanged.
- **When the Saints Go Marching In** (`drums.html`): traditional public-domain tune. The melody and the General MIDI channel-10 drum pattern were generated by this project (`assets/midi/make-saints.js`). No third-party MIDI file.
- **Salamander Grand Piano V3** samples by Alexander Holm, [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). Reference: https://archive.org/details/SalamanderGrandPianoV3.
- **FluidR3_GM nylon guitar** via midi-js-soundfonts, CC BY 3.0 (as stated by that project; see `SOURCES.md`).
- **Tone.js** (MIT) and **@tonejs/midi** (MIT).
- **Fraunces** and **DM Sans** fonts, SIL Open Font License 1.1.

## Layout

```
index.html  piano.html  guitar.html  drums.html  _headers  SOURCES.md  README.md
assets/midi/    fur-elise-mutopia-931.mid, spanish-romance-mutopia-795.mid, saints-drums.mid, make-saints.js
assets/vendor/  tone, tonejs-midi, salamander (30 mp3), soundfont (guitar)
assets/fonts/   fraunces-latin.woff2, dm-sans-latin.woff2
assets/         tm.css, tm-engine.js, piano.js, guitar.js, drums.js
screenshots/    one desktop screenshot per page
```

## Known limits

See the bottom of `/tmp/tunemeadow-demos/SUMMARY.md` for the honest verification notes. In short: these are demos with a draft arrangement; audio was checked by signal level in headless Chrome, not by ear.