fretwise

Interactive fretboard editor for guitar and bass. Visualize scales, modes, arpeggios, and bebop vocabulary, then actually hear them through a Karplus-Strong synthesis engine running in your browser.

Live at fretwise.vercel.app.

What it does

• 40+ patterns: every common scale (Ionian through Locrian, harmonic/melodic minor, altered, whole tone, diminished), the seven bebop scales, pentatonics, blues scales, and a full set of arpeggios (maj7, min7, dom7, 7b9, 7#9, 7#11, min11, 13, etc).
• Guitar and bass with 10 tunings: standard, drop D, DADGAD, open G, open D, half/whole step down, 5-string bass, etc.
• Audio playback for every note. Click any dot on the fretboard to hear it. Press space (or hit "Play Ascending") to walk through the pattern. Click "Strum" on an arpeggio to hear all the notes together.
• Context-aware quick-chord buttons: pick Dorian and you get iim7, iim9, IV7, Vmaj7 buttons right there. Click one and it switches to the corresponding arpeggio and strums it.
• Display modes: note names, scale degrees, intervals from root, or just dots.
• Draw mode: click any fret position to mark your own notes, useful for sketching out voicings or licks.
• URL state: everything is encoded in the query string. Share a link like ?i=guitar&t=standard&r=2&p=dorian and the recipient lands on the same view.
• Mobile-responsive: the sidebar stacks below on narrow viewports and the fretboard scrolls horizontally.

Why this exists

Most fretboard tools online either look like 2008 Flash apps or charge you to see anything past a major scale. I wanted one that:

1. Has the vocabulary a working musician actually uses (bebop scales, altered, all the arpeggio extensions).
2. Actually plays sound, with a tone that sounds like a plucked string instead of a sine wave or a 300KB MP3 sample.
3. Looks like it was designed by someone who cares about typography.

The Karplus-Strong synth

There are no audio samples in this app. Every note you hear is generated from scratch in the browser using the Karplus-Strong algorithm. It works like this:

1. Make a buffer of length sampleRate / frequency filled with white noise. That's the "pluck."
2. For every subsequent sample, write back the average of the last two samples in the buffer, scaled by a decay factor just under 1.
3. The averaging step is a one-zero lowpass filter. Bleeding high frequencies out of the buffer over time is exactly what a real plucked string does as the energy dissipates. The lowest harmonic survives longest, so you end up with a tone that rings at the fundamental and decays naturally.

I pre-render the whole note into an AudioBuffer up front (a few ms of work per pitch, cached after the first call) and play it back with an AudioBufferSourceNode. That's enough for a six-note chord with strum timing and doesn't need an AudioWorklet.

Decay rate scales with frequency, so low strings sustain longer than high strings, matching real-world string behavior. The pluck buffer gets a short attack ramp so the very first samples aren't a harsh click of pure white noise.

Code is in lib/audio.ts, about 100 lines.

Stack

• Next.js 16 + React 19, App Router, all client-side
• TypeScript
• Tailwind CSS v4
• Web Audio API (no Tone.js, no samples)

Run it locally

git clone https://github.com/c-tonneslan/fretwise
cd fretwise
npm install
npm run dev

Then open http://localhost:3000.

Keyboard shortcuts

Key	Action
space	Play pattern ascending
← / h	Move root down a semitone
→ / l	Move root up a semitone

Notes

• All the music-theory descriptions in the sidebar are mine. If you spot something wrong let me know.
• Bass MIDI notes use real bass pitches (E1 = MIDI 28), so playback is an octave below the visual representation. The note names are still right.
• The fretwise color palette and the "scale note vs arpeggio note vs bebop passing tone" color coding came out of a hand-drawn prototype HTML file. Most of the typography choices (Syne for UI, Space Mono for note labels) date back to that.

MIT. Built by Charlie Tonneslan.