webui: a note sheet with a real pitch axis and beat grid #30
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: branderson/songtrace#30
Reference in New Issue
Block a user
Summary generated by LLM agent
Phase 2, part 1 of the editor: a note sheet that makes a line's layout readable. Editing on this sheet is the next PR.
The review drew each line's notes as 2-unit bars in a 20-unit strip, with no pitch axis and no beat grid. In practice they read as underlines, and it was hard to tell where a note sat vertically.
The sheet
Modelled on Yass's page view: one line at a time, between the player and the lyric list.
API
GET /api/jobs/{id}/pitchreturns the pitch track every 20ms in note semitones (0 = C4), withnullwhere nothing is voiced. It uses the notes stage's own voicing cut-off, so the curve agrees with what the notes were built from.Code
The sheet is its own ES module,
static/sheet.js. The page loads it with a dynamicimport()and needs only a few hooks: load on review, page on line change, clear on reset. Its geometry (note names, pitch range, beat-grid weights including beats before GAP, line spans) is plain exported functions, unit-tested withnode --testintests/js/.tests/test_static_js.pyruns those from pytest, and skips where Node is missing; CI'snode:22image has it.Testing
test_version(needs the package installed).The README screenshot isn't regenerated here, because
scripts/screenshot_webui.pyneeds Python Playwright. I'll update it with the editing PR.The review drew each line's notes as thin bars in a 20px strip, with no pitch axis or beat grid, so it was hard to tell where a note sat. Add a sheet that shows one line at a time the way an UltraStar editor does: a row per semitone, shaded like piano keys and named in a gutter, the chart's own beat grid with bars every 4 and 16 beats, notes as blocks styled by kind (golden, freestyle, rap) with low-confidence ones outlined, neighbouring lines faded in for context, syllables and aligned words beneath, and a playhead that follows the transport, paging with it. The detected pitch curve is drawn over the notes, served by a new GET /api/jobs/{id}/pitch in note semitones, so a note off the sung pitch stands out. The sheet is its own ES module; its geometry is unit-tested with node --test, run from pytest and skipped where Node is absent.e30babe287to7fa1f3912fThe beat grid came from the detected tempo (or the BPM override) and a GAP pinned to the first note, so it did not always line up with the music, and snapping did not land on its beats. A GRID bar on the sheet now sets both, redrawing the grid live as values are tried, with x2 and /2 for a tempo detected at double or half speed and ALIGN TO NOTE to move GAP the least that puts the selected note on a beat. Note editing pauses while a trial grid is unapplied, so notes never snap to a grid that is then cancelled. The grid is stored with the song's edits, so every rebuild keeps it, and grid charts with it in place of its own choice; it records that choice in tempo.json for RESET to return to. A GAP after the first note moves back by whole beats, as notes on negative beats are rejected by players. PUT and DELETE /api/jobs/{id}/grid set and reset it, rewriting the charts in place.Line breaks were always placed by songtrace, midway between lines and recomputed around edited ones, so a break could not be put where a singer breathes. The sheet now draws the breaks either side of a line as markers that drag along the beat grid, kept between the lines they separate, and double-click back to automatic. Break moves share the line's undo history and SAVE LINE, which saves the notes only if they changed, so moving a break never locks either line's notes. Moved breaks are stored in edits.json keyed by the line each comes before, follow their lines when the lyrics change, and win over the computed break on every rebuild, clamped so a break never lands inside a line's notes. The review lists each break with that line and whether it was moved, and PUT /api/jobs/{id}/breaks takes {line: seconds | null}. merge now passes untouched notes through as they are rather than rebuilding them, which added float noise to their durations.