How RootNote Works
RootNote is a free interactive fretboard, ear training, and scale practice companion for guitar and bass players built on Next.js 16. By leveraging the native Web Audio API, smplr Soundfont playback, and an advanced pitch-detection pipeline running YIN and Dynamic Wavelet algorithms, every feature described below runs directly in your browser — no downloads required.
Last updated: July 4, 2026
What Is the RootNote Fretboard?
RootNote features a fully interactive 20-fret guitar and bass fretboard that displays note positions, scale patterns, and training targets in real time. Click any fret to hear that note through your speakers using realistic acoustic guitar or electric bass samples. It adapts automatically when you switch between 4-string bass and 6-string guitar.
The fretboard is your primary practice surface. Notes light up in customizable colors to show scale positions, interval relationships, training targets, and every occurrence of a note across the neck. Switch between a clean CSS grid view and a photographic maple or rosewood texture from the Settings drawer.
How Is the RootNote Interface Organized?
RootNote has three main areas: the Stage (center) displays training targets and feedback, the Sidebar (right) holds mode-specific controls and settings, and the Fretboard (bottom) shows your instrument's neck with all 20 frets of note positions. The header bar contains instrument selection, audio controls, and quick-access settings.
How Does Free Play Mode Work?
Free Play is RootNote's idle mode: click any fret to hear that note, explore positions across the neck, and warm up before training. There is no scoring or pressure — it's a sandbox for fretboard exploration. The clicked note lights up green so you can see all its positions across the neck instantly.
Mode Work?
RootNote's Notes mode is an interactive ear-to-fret training tool that displays a target note on screen, highlights its position on a virtual fretboard, and uses real-time pitch detection to validate the note you play on your physical guitar or bass instrument. Correct answers score points and advance automatically.
- Click Start — a target note appears on stage and lights up on the fretboard
- Play that note on your instrument — RootNote detects the pitch
- Correct: score a point, next target appears automatically
- Miss: the app shows the correct answer and moves on
Turn on "Show all positions" to see every occurrence of the target note lit up across the entire fretboard. Your accuracy, streak, and total score are tracked in real time.
Mode Work?
Interval Study mode is a visual fretboard exploration tool that highlights all positions of two notes — a root and its interval target — in customizable colors. Pick a root note, choose a direction (ascending or descending), and select one of 12 intervals to instantly see the spatial relationship between any two notes on the neck.
Press SPACE to hear the root and target notes played through your speakers. No scoring, no pressure — this is a reference and exploration tool for learning interval shapes and patterns across the fretboard.
Mode Work?
Interval Quiz mode plays a root note followed by a target interval through your speakers — you identify which interval you heard by clicking the correct answer button. Configure which intervals to practice, how many per round (1–3), the direction, and how many answer buttons to show (2–12). Buttons always stay in the same position so you build muscle memory.
- The app plays a root note followed by a target note
- Answer buttons appear — pick the interval you heard
- Press SPACE to replay the interval, ENTER to continue
- Stats track rounds, accuracy, and streak
and Rhythm Practice Work?
Scales mode lets you practice 59 scales across 6 categories with real-time pitch validation. Choose a scale, root note, and position, then play each degree in sequence as the app prompts you with the next note (I, iii, ♭VII). Toggle Rhythm Mode to add a metronome at 40–200 BPM and practice in time with the beat.
- Practice in straight order, broken thirds, or groups of 3 or 4
- Position locking: practice within a 5-fret window to learn box patterns
- Highlight scale notes on the fretboard in customizable colors
- Proper music theory spelling for all degrees (♭3, ♯4, etc.)
and How Does It Help Practice?
The Drone is a sustained reference tone that plays continuously in the background — like a tuning fork or tanpura — to give you a constant pitch reference while practicing. Open it from the app header, choose a note, and adjust the volume. In Intervals mode it can automatically follow your root note, so you always have a pitch anchor without manual adjustments.
Fretboard Colors and Highlights?
Open the Scale Colors drawer (🎨 icon) to assign a different color to each of the 12 scale degrees, control non-scale note opacity from 0–100%, and customize the target highlight color and thickness (1–10px). Changes apply immediately and are saved in your browser — no Apply button needed.
- Per-degree colors — 12 color pickers, one for each scale degree
- Non-scale note opacity — 0% hides them completely, 100% shows all notes
- Target highlight — customize the color and thickness of the active target stroke
and Preferences Can I Configure?
The Settings drawer (gear icon) controls your instrument type (4-string bass or 6-string guitar), language (English or Hungarian), notation system (A-B-C or A-H-C), fretboard display mode, visible fret range, note label size, and stage font family and size.
General
- Instrument: 4-string Bass or 6-string Guitar
- Language: English or Hungarian (Magyar)
- Notation: A-B-C (international) or A-H-C (German/Hungarian)
Fretboard
- Mode: CSS Grid or Photographic Image (maple/rosewood)
- Range: 5–22 visible frets
- Note size: adjustable font size on fretboard
Stage Font
- 5 brand fonts: DynaPuff, Fruktur, Cherry Bomb One, Cherry Cream Soda, Ojuju
- 6 size steps from XL through 6XL
Specifications?
RootNote is built on Next.js 16 with server-side rendering, uses the Web Audio API for real-time pitch detection, and employs a multi-algorithm pipeline (FFT_SIZE=4096, YIN → DynamicWavelet → ACF2PLUS fallback) for accurate note recognition. It supports Chrome, Firefox, Safari, and Edge — no downloads or sign-ups required.
| Platform | Next.js 16 with server-side rendering |
| Audio | Web Audio API, smplr Soundfont playback |
| Pitch Detection | FFT_SIZE=4096, YIN → Dynamic Wavelet → ACF2PLUS fallback |
| Browsers | Chrome, Firefox, Safari, Edge (Web Audio API required) |
| Offline | Requires initial internet load; works offline after first visit |
| MIDI | Not supported — audio input only |
| Price | Free. No sign-up required. |