The Fretboard App — Guitar Pro & Rocksmith play-along built on alphaTab

[efenderbosch]

The Fretboard App is a browser-based ear / muscle-memory trainer for bass and guitar: it names a note, you find and play it on your instrument by ear, and mic pitch detection (YIN) confirms it. That half has nothing to do with alphaTab - the other half, Play Along, is all alphaTab (1.9.0 via npm):

• Drop in a Guitar Pro file (.gp/.gp3/.gp4/.gp5/.gpx) and alphaTab renders it as tab and/or standard notation, with per-track show/mute.
• Playback runs through alphaTab's built-in synthesizer with switchable soundfonts at runtime - a small bundled bank, or heavier ones like MuseScore_General / FluidR3Mono.
• Layout is switchable between page and horizontal-scroll presets; scrolling happens in our own container (via scrollElement), sized with flex so the tab fills the viewport instead of guessing vh fractions. Home/End/PageUp/PageDown navigate the tab on top of that.
• Tempo, loops, and each song's display choices persist across reloads.

The part we're most pleased with: playing along with the real recording, not the MIDI. Attach the song's actual audio (mp3/ogg/opus/flac/…) - or open a Rocksmith CDLC package, whose own recording gets used - and a Detect pass works out how the recording lines up with the tab:

• Where bar 1 falls, estimated from where sound starts and, when the first guess doesn't hold up, searched again at candidate positions around and beyond it - that second search recovers half of all detection failures. The whole pass is tuned against a ground-truth corpus of hundreds of songs, plus deliberately-wrong tab/recording pairings to keep it honest.
• How the recording and the tab drift apart after bar 1, tracked continuously during playback - pauses included - with the line-up persisted between sessions.
• Whether it's even the right recording, judged by chroma rotation contrast: how much better the recording matches the tab than it matches in any other key. A wrong recording gets called one rather than silently played.
• What pitch the recording is actually at - a quarter-tone-sharp recording is read at +50 cents against the tab.

And when tracking can't follow, the follow is marked degraded rather than pretending the tab is still in sync. When detection can't crack a song at all, you go by ear instead: pin a note in the tab to where it sounds in the recording, as many points as you need. A pin is an absolute anchor - nothing moves one but you, not Detect, not nudging bar 1 - and the line-up honors them as fixed points. On the alphaTab side the cursor rides along with all of this: the app drives tickPosition and listens to playerPositionChanged from its own audio clock, so the notation stays in sync with arbitrary external audio instead of the MIDI sequencer.

Two patches we carry on 1.9.0: TinySoundFont gates samples on mono (sampleType & 1), so stereo SF2/SF3 zones fall through and never sound - that silences GM programs 0/1/3 (the acoustic pianos) in MuseScore_General.sf3 and FluidR3Mono_GM.sf3, and drops two regions from every drum kit. SF2 stereo is really two mono zones panned hard left/right, which the synth already handles per region, so accepting them is all it takes - 0 silent and 0 degraded presets across both fonts afterwards. And on tab staves that draw their rhythm, we force ties and slurs above the notes - the default arcs bend down into the stems on the low strings. Both are upstream candidates.

1.9's power-law spacing is user-facing in the app too: the layout options have a Stretch slider (overall density) and a Ratio slider (the duration ratio), so players can tune the engraving feel per song without touching zoom.

Stack: TypeScript + Vite, @coderline/alphatab from npm. The app is a closed-source personal project for now - happy to answer questions about any of the integration details.

Track selection:

Layout:

Detection:

Snapping notes in Rocksmith CDLC to 1/8th, 1/16th, etc. notes:

Snapped to 1/8th notes:

Snapped to 1/8th triplets:

Full interface:

Hear myself w/ NAM support:

[efenderbosch]

forgot to add a link https://thefretboardapp.fender.net/

[efenderbosch]

Follow up with a new feature.

Hear myself used to mean hearing yourself play late - the monitoring delay put your notes audibly after the beat, which made playing along more confusing than helpful. That's fixed: Play Along now has latency calibration. There's an auto mode - it plays a short run of metronome clicks, you strum along, and it measures the delay and lines the music up to match - and a manual slider if you'd rather just set it by feel. With it on, playback lines up correctly with "hear myself" across the board: Mac and Windows, Chrome and Firefox, MIDI and audio play-along, with or without a NAM model loaded. The compensation only runs while hearing yourself is on, so nothing changes when it's off.

This needed a small third patch on 1.9.0: the synthesizer's audio output connects straight to the destination with no way to insert anything, so the patch adds a setOutputDelayMs() to it that holds the music back by a set amount (and the built-in metronome/count-in shift along with it, keeping everything in step). Happy to share details if anyone's interested.