Kid mode is on. Big-picture, plain words.
Build Plan · drwu-htmls

Our Own Songsterr, With Drum MIDI
That Matches the Song

A plan to turn the ixi analysis sheets we already ship into an interactive, audio-synced tab player, where the drum staff is a real DrumSep transcription instead of a thin auto-tab. The renderer, the drum engine, and the Songsterr audit are already built. One capability is missing, and that gap is the whole project.

We already made pretty music sheets on the web. This plan makes them play out loud with a dot that follows along, and gives them real drums that sound like the actual song.

notation renderer: built drum engine: built songsterr audit: built playback cursor: missing

01What the chats actually show

The first ask was to find prior chats on this. The honest answer changes the shape of the project.

In kid words: Nobody ever tried to build this before. But three of the four parts are already sitting on the shelf, finished.

No prior chat set out to build a Songsterr competitor. What exists instead is three finished capabilities that were never chained together, plus one missing link. This finding is grounded in the semantic /ask layer, the skill specs, and a direct capability scan of the live pages. A full line-by-line transcript scan timed out across thousands of sessions, so the claim rests on those three sources, not an exhaustive grep.

Already built and shipping

1. The notation renderer. The ixi sheet stack renders engraved notation and tab with abcjs. Around 100 *-ixi routes ship on the site, plus per-syllable chord and interval layers.

2. The drum engine. DrumSep MDX23C splits a drum stem into five pieces with correct General MIDI mapping. On one Shiner song it found 709 kick hits where the old method found 8.

3. Songsterr, used the right way. The songsterr-tab-guide skill audits each tab as human or AI and flags drums-or-not. Songsterr is a transcription source, never a scrape target.

The one thing missing

Playback. Every ixi sheet renders, and none of them plays or moves a cursor. Capability scan of five live pages: synth: no, cursor: no on every one. That single gap is Songsterr's defining feature, and it is the core of this build.

02Reuse map: what to keep, what to write

Green rows already exist on disk. Only the red rows are net-new code.

In kid words: Green means done. Red means we still have to make it. There is way more green than red.
PieceStatusWhere it lives
Notation and tab rendering (abcjs)shippedhooray-say-enough-ixi-v2 + ~100 ixi routes
Per-syllable chord + interval layershippedixi-interval-upgrade
Audio embedded in the pageshipped3gene-tab uses <audio>
Drum stem to five isolated piecestool readyDrumSep MDX23C, audio-stems-to-midi
Drum MIDI analysis + humanizationtool readymidi-drum-analysis, drum-realize
Songsterr audit (AI vs human, drums-or-not)shippedsongsterr-tab-guide
Audio-synced playback cursornet-newabcjs synth + TimingCallbacks
Drum staff rendered inside the scorenet-newpercussion clef fed by DrumSep MIDI
Transport: play, tempo, loop, per-staff mutenet-newabcjs SynthController controls

Six of nine rows are already done. The project is a wiring job on top of a stack that is roughly 90% built.

03Why our drums beat Songsterr's

This is the reason to build our own rather than link to theirs.

In kid words: Songsterr guesses the drums and misses most of them. We listen to the real drum track and catch every hit.
Songsterr auto-drums
8

kick hits detected by the old spectral-guess method on Shiner The Egg.

Auto-generated drum tabs miss most of the kit and read as a placeholder, which is why so many Songsterr rows are marked no-drums.

Our DrumSep path
709

kick hits on the same audio through DrumSep MDX23C, validated 2026-05-18.

Five isolated pieces, correct GM mapping, no spectral guesswork. That is the difference between a placeholder and the real part.

The reality gate stays on

DrumSep can hallucinate hi-hat or cymbal fuzz when none was played. The drum-lane reality gate holds: ship silence over fuzz, verify air-presence across mics, and check the transcription audibly against the stem before it goes in the score.

Rule: if the drummer did not really hit it, we do not draw it. We always listen and check first.

04The one gap, and how abcjs already fills it

The moving cursor and in-browser playback are not a new library. They ship inside abcjs, the renderer we already use.

In kid words: The tool that draws our music can also play it and move a dot. We just never turned that part on.
have
abc source
already generated per sheet
have
abcjs render
notation + tab on the page
turn on
CreateSynth
in-browser playback
turn on
TimingCallbacks
cursor follows the beat

ABCJS.synth.CreateSynth plays the score in the browser. ABCJS.TimingCallbacks fires per note so a cursor highlights the current bar in time. Both are first-party abcjs features. Phase 1 is wiring them to a sheet that already renders, which is a small, contained change with no new dependency.

05Three-phase build

One song per pass. Reuse, do not rebuild. Each phase ends with a concrete verification.

In kid words: First make one sheet play with a moving dot. Then give it real drums. Then put it online and prove it works.
1
Playback layer · make the notation move

Wire the cursor onto one existing ixi sheet

  • Start from one shipped abcjs route, for example hooray-say-enough-ixi-v2.
  • Add ABCJS.synth.CreateSynth + SynthController for in-browser playback.
  • Add TimingCallbacks so a cursor highlights the current note and bar in sync.
  • Add a transport: play, pause, tempo, loop a section, per-staff mute for vocal, guitar, bass, drums.
verify: cursor lands on the right bar in time, per-staff mute works
2
Differentiator · the real drum track

Feed the drum staff from DrumSep, not an auto-tab

  • Run the drum stem through DrumSep MDX23C into five pieces (kick, snare, toms, hi-hat, cymbals).
  • Merge to one drum MIDI with correct GM mapping, then render it as a percussion-clef staff in the same score.
  • Sync the drum staff to the same transport and cursor from Phase 1.
  • Apply drum-realize humanization only when the source is a spec, never over a real transcription.
verify: audible check against the stem, reality gate passes, no DrumSep fuzz shipped
3
Showcase · ship and prove

Ship the first playable song to Vercel

  • Kid-mode button, sibling markdown, cream and Wes-Anderson palette, voice-clean prose.
  • Run /ship: deploy, curl each route to 200, paste the proof block.
  • Screenshot the live player with the cursor mid-song as proof of playback.
verify: live URL returns 200, proof block green, cursor visible in screenshot

06The reusable build prompt

Paste this into a fresh session to execute the plan, one song at a time.

Build prompt · Songsterr+ / IXI Player

Write a three-phase plan to execute and produce an HTML to showcase the result. Goal: turn one existing ixi analysis sheet into an interactive, audio-synced tab player whose drum staff is a DrumSep-grade MIDI transcription, shipped to drwu-htmls.vercel.app. One song per pass. Reuse the ixi stack, do not hand-roll a new renderer.

PHASE 1 (playback): take one shipped abcjs ixi route (start with hooray-say-enough-ixi-v2). Add ABCJS.synth.CreateSynth + SynthController for in-browser playback, and TimingCallbacks for a moving cursor that highlights the current bar in sync. Add a transport: play, tempo, loop-section, per-staff mute. Verify the cursor timing and mutes.

PHASE 2 (better drums): run the drum stem through DrumSep MDX23C (kick/snare/toms/hihat/cymbals) per midi-drum-analysis and reference_best_free_drum_pipeline_stack. This is why our drums beat Songsterr (709 vs 8 kick hits on Shiner The Egg). Merge to one GM-mapped drum MIDI, render a percussion-clef drum staff in the score, sync to the same transport. Humanize via drum-realize only from a spec, never over a real transcription.

PHASE 3 (ship): kid-mode button, sibling md, cream/Wes-Anderson, voice-clean. Run /ship, curl each route to 200, paste the proof block, screenshot the live player with the cursor mid-song.

HARD GATES: one song per pass; no placeholder/fake notation; DrumSep drums must carry real drum signal (drum-lane reality gate, ship silence not fuzz); Songsterr is a transcription SOURCE, never a scrape (tab-from-songsterr-stem-transcription); AI-tab-first where both exist; run session_fraud_check --hard-only before any done-claim.