Tab Player 🪕

A browser-based banjo tab player and learning app — desktop and mobile. Play, learn, and edit clawhammer/old-time banjo tabs with real soundfont audio, right in the browser.

Live: https://tabplayer-banjo.netlify.app

Built with React + TypeScript + Vite. Audio is a full in-browser SF2 synthesizer (spessasynth, AudioWorklet) playing the bundled 32 MB GeneralUser-GS soundfont, so the banjo actually sounds like a banjo.

Features

Five modes:

• Play — tab viewer + soundfont playback. Tuning / instrument / octave / tempo / swing / drums / loop; song selector, 123 ↔ note-name toggle, chord annotations, editable note colour-coding, lyrics, multi-part switching (melody / clawhammer / backup).
• Edit — click & drag notes, type to set frets, keyboard shortcuts, full inspector (string / fret / duration / picking & fretting fingers / technique). Download the edited .tabsong, or print / export to PDF.
• Neck — interactive fretboard + chord builder; hear it, name it, drop it into the tab.
• Theory — contextual explainer (click any note) + a Nashville Number System view.
• Quest — a full learning curriculum (songs broken into progressive melody & backup levels plus skill drills), two player profiles, XP / levels / badges. Drills adapt to your instrument (5-string banjo / 4-string tenor) and style (clawhammer / pick).

Songs: Julie, Rocky Road to Dublin, Cripple Creek — plus you can open any .tabsong file. Profiles, settings, and progress persist in localStorage.

Develop

npm install
npm run dev      # http://localhost:5173
npm run build    # type-check + bundle → dist/
npm run preview  # serve the production build

Project layout

src/
  model/      # tabsong types, layout engraver, chords, theory, curriculum, library
  audio/      # AudioEngine — spessasynth + the eighth-grid playback scheduler
  state/      # zustand stores (app/profiles/progress + the song document) + hooks
  components/ # TabCanvas (renderer/editor) + one file per mode
public/       # GeneralUser-GS.sf2, the AudioWorklet, arrangements.json, the .tabsong files
TABSONG_FORMAT.md   # the .tabsong file format

The 32 MB soundfont and the AudioWorklet processor live in public/ and are served as static files. If you bump spessasynth_lib, re-copy the worklet:

cp node_modules/spessasynth_lib/dist/spessasynth_processor.min.js public/

Deploy (Netlify)

netlify.toml is configured (build npm run build, publish dist, SPA redirect, long-cache headers for the soundfont/worklet). This repo is already linked to a Netlify site, so:

npm run deploy            # netlify deploy --build --prod

First-time setup on a new machine: npm run login (netlify login), then npm run deploy.

First page load downloads the ~32 MB soundfont (cached hard afterward). Audio starts on the first tap/click, per browser autoplay rules.