Real-time guitar visualization and fretboard learning aid. Plug your guitar into your audio interface, and FretSight detects what you play and lights it up on a digital fretboard.
Zero dependencies, no build step. Vanilla JS + Web Audio + canvas.
python3 -m http.server 8080 # then open http://localhost:8080Must be served from localhost (or https) — getUserMedia requires a secure context, so opening index.html directly via file:// cannot access the audio input.
Click Enable input, allow microphone access, then pick your interface in the device dropdown (labels appear after permission is granted).
- Live — tuner-style readout (note, octave, frequency, cents needle) with the played pitch lit on the board: exact positions bright with a ring, same note in other octaves dimmed.
- Explore — pick a note (click the note buttons, click any fret, or just play the note with "Follow what I play" on) and every position of that pitch class lights up across the whole neck, color-coded by octave. Play an open E → every E on the board.
- Scales — pick a root and a scale/mode and the whole neck lights up: root in ember, ordinary scale tones in steel, the b2/b5 metal tension tones in bone, with interval labels. Play along and whatever you play gets ringed. Includes the metal guide: per-genre cards (metalcore, nu metal, prog, thrash, death, doom/sludge, djent, black metal) with common tunings and scales you can click to load, plus techniques and songs to learn. Scale data in
js/theory.js, genre guide injs/metal.js. - Drill — call-and-response practice: FretSight names a target, you play it, it scores hits/misses/accuracy/response time. Drills: find-the-note (any octave), find-the-note-on-a-string, A minor pentatonic, C major scale, chromatic crawl, E phrygian, E phrygian dominant, A harmonic minor, power-chord roots on the low string (tuning-aware). "Show target on board" toggles hint lighting. Add drills in
js/drills.js.
Always-on strip under the board, works in every mode and doesn't need the guitar input (own AudioContext). BPM 30–300 (input, slider, ±5 steps, tap tempo), time signatures 2/4–9/8 with conventional accent groupings (7/8 = 4+3 — prog approved), accent clicks pitched higher, beat dots, click volume. Sample-accurate Web Audio lookahead scheduling in js/metronome.js.
Tuning and fret count (21/22/24) presets in the top bar; persisted in localStorage along with scale, genre, and metronome settings. Tunings: E/Eb/D/C#/C Standard, Drop D/C#/C/B/A, DADGAD, Open G. Add tunings in js/theory.js.
| File | Role |
|---|---|
js/theory.js |
Note math, tunings, fretboard mapping. Pure functions. |
js/pitch.js |
YIN pitch detection (monophonic) with parabolic interpolation. Pure functions. |
js/audio.js |
getUserMedia capture → AnalyserNode, processing effects disabled. |
js/fretboard.js |
Canvas renderer: proportional fret spacing, inlays, lit-cell API, click hit-testing. |
js/drills.js |
Drill definitions (random generators + fixed sequences). |
js/metal.js |
Metal genre guide data (tunings, scales, techniques, listening). Pure data. |
js/metronome.js |
Web Audio lookahead-scheduled metronome, meter/accent patterns. |
js/app.js |
Input pipeline (RMS gate → YIN → stability filter), the four modes, UI. |
Detection is monophonic — single notes, not chords. That's a deliberate v1 scope: drills and note-finding are single-note activities, and monophonic YIN is accurate to within a couple cents across the full range, down to Drop A's low A1 at 55 Hz (verified: node test/pitch.test.js).
node test/pitch.test.js # YIN against synthesized guitar tones, A1→E6 + silence/noise rejection
node test/theory.test.js # tunings/scales sanity + metal-guide cross-reference checks