Compare commits
21 Commits
essentia
...
kb-expansion
| Author | SHA1 | Date | |
|---|---|---|---|
 vadimwit
|
e180f85289 | ||
|
vadimwit
|
46d30935c9 | ||
|
vadimwit
|
c7f9c9571f | ||
|
vadimwit
|
ecfa7d0a65 | ||
|
vadimwit
|
de0071f7bf | ||
|
vadimwit
|
d32401af66 | ||
|
vadimwit
|
ef538787ee | ||
|
vadimwit
|
7181a138e4 | ||
|
vadimwit
|
fdb2ce8175 | ||
|
vadimwit
|
f583979b3e | ||
|
vadimwit
|
8cd9b01941 | ||
|
vadimwit
|
4a45e82abe | ||
|
vadimwit
|
b94f79f408 | ||
|
James Twose
|
7d5ad306b4 | ||
|
James Twose
|
2efc785694 | ||
|
James Twose
|
3ddf854123 | ||
|
James Twose
|
a1048b0e55 | ||
|
James Twose
|
2ce6d1e244 | ||
|
vadimwit
|
dec0fc1595 | ||
|
vadimwit
|
b989238373 | ||
|
vadimwit
|
3aadf1afbb |
@@ -0,0 +1,51 @@
|
||||
---
|
||||
name: kb-expand
|
||||
description: Expand the JamBuddy jam knowledgebase by exactly one style × instrument cell — research, author, validate, commit. Run repeatedly (or via /loop) to fill the backlog in docs/kb-backlog.md.
|
||||
---
|
||||
|
||||
# KB Expand — one cell per session
|
||||
|
||||
You are expanding JamBuddy's jam knowledgebase: intermediate-level standard progressions and ways to play them, per style × instrument. **Do exactly one cell, end to end.** Small, validated, committed.
|
||||
|
||||
## Steps
|
||||
|
||||
### 1. Orient (always, every session)
|
||||
Read, in this order:
|
||||
- `docs/kb-plan.md` — architecture, schema conventions, quality gates, success criteria
|
||||
- `docs/kb-backlog.md` — the queue
|
||||
- `src/data/kb/SCHEMA.md` and the gold standard `src/data/kb/jazz/guitar.js` — **if they exist**
|
||||
- `docs/progression-repertoire.md` §1 — cross-check progressions for the style
|
||||
- `docs/learn-curriculum.md` — the intermediate level definition for the instrument
|
||||
|
||||
### 2. Claim a cell
|
||||
Take the **first `todo` cell** in the backlog (respect the order: bootstrap → guitar → piano → bass). Mark it `in-progress` in `docs/kb-backlog.md`.
|
||||
|
||||
**If the foundation doesn't exist yet (no `src/data/kb/`), this session is Session 0:** build `src/data/kb/` with `index.js` registry, `SCHEMA.md` (formats from kb-plan.md §1, one fully-worked example, the musician checklist from §2), `scripts/validate-kb.mjs` (all mechanical checks from kb-plan.md §2 — especially the pitch-class verification of guitar shapes against chord qualities from `src/lib/theory.js` CHORD_TYPES), and the **jazz/guitar** cell as the gold standard. That is one full session; stop after it.
|
||||
|
||||
### 3. Research
|
||||
Dispatch 1-2 web-research subagents for the claimed style × instrument:
|
||||
- the style's standard progressions (verify against `docs/progression-repertoire.md`; add style-specific ones with named sources)
|
||||
- 2-3 genuinely different intermediate ways to play each progression on this instrument (voicings with exact frets/fingerings for guitar, degree recipes for piano, line patterns for bass)
|
||||
- comping rhythm(s) characteristic of the style, improv guidance (scales over each chord, target notes, 1-2 licks)
|
||||
- require named sources/URLs in the agent's report
|
||||
|
||||
### 4. Author
|
||||
Write `src/data/kb/<style>/progressions.js` (if new style) and `src/data/kb/<style>/<instrument>.js` per SCHEMA.md. Key-agnostic only: degrees and movable shapes (`rootStr` + `offsets`), open shapes with `onlyRoot`. Qualities must be keys of `CHORD_TYPES` in `src/lib/theory.js`. Register the style in `src/data/kb/index.js`.
|
||||
|
||||
### 5. Validate — hard gate
|
||||
- `node scripts/validate-kb.mjs` must pass. Fix content, don't weaken the validator.
|
||||
- Run the musician checklist in SCHEMA.md; cut or fix anything that fails it.
|
||||
- `npm run build` must pass.
|
||||
|
||||
### 6. Record and commit
|
||||
- Backlog: mark the cell `done (YYYY-MM-DD, N progressions × M plays)`.
|
||||
- Commit on the current branch: `kb: add <style> <instrument> pack` (or `kb: bootstrap foundation + jazz guitar gold standard`). Do not push unless asked.
|
||||
|
||||
### 7. Report
|
||||
Tell the user: what was added (progressions, plays, sources), validator result, and **the next cell in the queue**. If a UI milestone in the backlog just became unblocked (e.g. Jam Guide MVP after cell 0), say so explicitly.
|
||||
|
||||
## Rules
|
||||
- One cell per invocation. Never start a second cell, even if the first went quickly.
|
||||
- Never commit content that fails the validator; never relax a validator rule to make content pass — flag the conflict to the user instead.
|
||||
- Intermediate level: no 5+ fret stretches, no advanced-only voicings without an intermediate alternative in the same play set.
|
||||
- Plays per progression must be idiomatically different (register/density/technique), not transpositions of each other.
|
||||
@@ -9,33 +9,69 @@ permissions:
|
||||
contents: write
|
||||
|
||||
jobs:
|
||||
build-windows:
|
||||
runs-on: windows-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
- run: npm install
|
||||
- run: npm run electron:build:win
|
||||
env:
|
||||
CSC_IDENTITY_AUTO_DISCOVERY: false
|
||||
WIN_CSC_LINK: ''
|
||||
- uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
files: releases/*.exe
|
||||
build:
|
||||
runs-on: ${{ matrix.os }}
|
||||
strategy:
|
||||
fail-fast: false # Ensures one OS failing doesn't kill the others
|
||||
matrix:
|
||||
include:
|
||||
- os: windows-latest
|
||||
command: npm run electron:build:win
|
||||
artifact_pattern: "release/*.exe"
|
||||
- os: macos-latest
|
||||
# Added --universal here if you want to support both Intel and Apple Silicon
|
||||
command: npm run electron:build:mac -- --universal
|
||||
artifact_pattern: "release/*.dmg"
|
||||
- os: ubuntu-latest
|
||||
command: npm run electron:build:linux
|
||||
artifact_pattern: "release/*.AppImage"
|
||||
|
||||
env:
|
||||
# This fixes the "GitHub Personal Access Token is not set" error
|
||||
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
# Prevents errors related to missing code-signing certificates
|
||||
CSC_IDENTITY_AUTO_DISCOVERY: false
|
||||
|
||||
build-mac:
|
||||
runs-on: macos-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
- run: npm install
|
||||
- run: npm run electron:build:mac
|
||||
env:
|
||||
CSC_IDENTITY_AUTO_DISCOVERY: false
|
||||
- uses: softprops/action-gh-release@v2
|
||||
cache: 'npm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm install
|
||||
|
||||
- name: Build Application
|
||||
run: ${{ matrix.command }}
|
||||
|
||||
- name: Upload Artifacts
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
files: releases/*.dmg
|
||||
name: artifacts-${{ matrix.os }}
|
||||
path: ${{ matrix.artifact_pattern }}
|
||||
if-no-files-found: error
|
||||
|
||||
publish:
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Download all artifacts
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
# This downloads all "artifacts-*" into a folder named 'all-outputs'
|
||||
path: all-outputs
|
||||
merge-multiple: true
|
||||
|
||||
- name: List files for debugging
|
||||
run: ls -R all-outputs
|
||||
|
||||
- name: Create GitHub Release
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
# Point directly to the folder where all OS builds are merged
|
||||
files: all-outputs/*
|
||||
generate_release_notes: true
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
@@ -0,0 +1,110 @@
|
||||
# GOAL — From Detection to Direction
|
||||
|
||||
WhatTheFlat already solves the hard live problem: **knowing what key and chords people are playing in a jam, in real time.** This document defines the next level, in two parts:
|
||||
|
||||
1. **Chord progressions** — make it easier to work with *different* progressions: a bigger genre repertoire, clearer "1-5-4"-style readout of the detected loop, a builder where you place chords yourself, and alternative voicings for every chord in a progression.
|
||||
2. **Learn** — expand the education section for the player who already knows the basics and is confident enough to jam, but wants to go next level.
|
||||
|
||||
Supporting research and full repertoires live in:
|
||||
|
||||
- [`docs/progression-repertoire.md`](docs/progression-repertoire.md) — genre-by-genre progression tables, substitution rules, voicing data sources, UX patterns from existing tools
|
||||
- [`docs/learn-curriculum.md`](docs/learn-curriculum.md) — intermediate training methods for guitar, piano, and bass, with drills and how app features map onto them
|
||||
- [`docs/kb-plan.md`](docs/kb-plan.md) — the **jam knowledgebase**: styles × instruments × progressions × voicings, the `/kb-expand` session loop that grows it ([`docs/kb-backlog.md`](docs/kb-backlog.md)), and the **Jam Guide** panel that renders it live at the bottom of the app
|
||||
|
||||
---
|
||||
|
||||
## Part 1 — Chord progressions
|
||||
|
||||
### Where we are
|
||||
|
||||
- `PROGRESSIONS` in `src/lib/theory.js` holds **14 hardcoded progressions across 7 genres** (Pop, Blues, Folk, Jazz, Rock, '50s, Flamenco). These drive `ProgressionSuggestions.jsx`.
|
||||
- `detectRepeatingProgression()` finds the repeating loop in chord history; `ProgressionBanner.jsx` already shows it with Roman numerals (I–V–IV) via `toRomanNumeral()`.
|
||||
- `EducationPanel.jsx` + `src/lib/education.js` carry 15 famous progressions with substitutions and style variations.
|
||||
- `src/lib/voicings.js` has ~50 guitar shapes (open + barre) across 14 chord types; no inversions, no triad string-sets, thin piano coverage.
|
||||
- There is **no way to enter or arrange a progression manually** — everything is detection-driven.
|
||||
|
||||
### Goals
|
||||
|
||||
**G1 — Expanded genre repertoire (data, not code).**
|
||||
Grow `PROGRESSIONS` from 7 to ~12 genres using the researched tables in `docs/progression-repertoire.md`: Funk (Dorian i7–IV7 vamps), Reggae (two-chord skanks), Country (V/V secondary dominant moves), R&B/Neo-soul (iii–vi–ii–V, 6-2-5-1), Gospel (chained 2-5-1s), plus blues variants (quick-change, minor blues) and the J-pop "Royal Road" (IV–V–iii–vi). Progressions stay in the existing `{ name, rn, degrees }` format so suggestions, Roman numerals and key mapping keep working unchanged.
|
||||
|
||||
**G2 — Numeral clarity ("is this 1-5-4?").**
|
||||
The loop banner already shows Roman numerals; add a **Nashville-number display option** (1-5-4 instead of I-V-IV) since that is how musicians call changes at a jam. One formatting layer over `toRomanNumeral`, toggled in Settings.
|
||||
|
||||
**G3 — Progression Builder (drag and drop).**
|
||||
A panel where the user assembles a progression by hand:
|
||||
- A **key-relative chord palette** (Hookpad's best idea): the diatonic chords of the current detected/locked key, one tap to add, with borrowed-chord palette (iv, ♭VII, ♭VI, V/V…) one level deeper.
|
||||
- Slots that can be **reordered by drag and drop**, with live Roman/Nashville numerals under each chord.
|
||||
- Tap any slot → **alternative voicings** for that chord (G4).
|
||||
- Seeded from the detected loop ("send loop to builder") so a jam can be captured, edited, and varied.
|
||||
- Variation buttons per chord powered by the substitution taxonomy (diatonic swap, borrow, secondary dominant, 7th/sus/add9 color) — the rules are in `docs/progression-repertoire.md` §2.
|
||||
|
||||
**G4 — Alternative voicings per progression chord.**
|
||||
- **Guitar:** extend `voicings.js` with CAGED positions and triads on string-sets (top-3 / middle-3), or adopt the MIT-licensed [`tombatossals/chords-db`](https://github.com/tombatossals/chords-db) dataset (multiple positions per chord, JSON, with a companion React SVG renderer).
|
||||
- **Piano:** generate voicings from interval recipes rather than data files — root position, inversions, shells (1-3-7), rootless A (3-5-7-9) / B (7-9-3-5) — choosing the inversion that minimizes movement from the previous chord (voice-leading distance).
|
||||
- Surface these in the Builder (G3) and in `CurrentJamPanel` voicing strips.
|
||||
|
||||
---
|
||||
|
||||
## Part 2 — Learn: basics → jam-ready next level
|
||||
|
||||
### Audience
|
||||
|
||||
Not step one. The target player already knows open/barre chords (guitar), triads and simple lead sheets (piano), roots and simple scales (bass) — and is confident enough to show up at a jam. The Learn section's job is to take them **from "can survive a jam" to "makes the jam better."**
|
||||
|
||||
### What the research says (full detail in `docs/learn-curriculum.md`)
|
||||
|
||||
Across guitar, piano, and bass pedagogy (Berklee methods, Justin Guitar grades 4–6, Tomo Fujita, Mark Levine, Open Studio, PianoGroove, Scott's Bass Lessons, TalkingBass, Ed Friedland), the intermediate-to-advanced jump converges on four pillars:
|
||||
|
||||
| Pillar | Guitar | Piano | Bass |
|
||||
|---|---|---|---|
|
||||
| **Fretboard/keyboard liberation** | CAGED, triads on string sets, connecting pentatonic boxes | Inversions in all keys, voice leading | Neck zones, chord-tone arpeggios everywhere |
|
||||
| **Playing the changes** | Chord-tone targeting, guide tones (3rds & 7ths) | Shell + rootless voicings, sus/add9 colors | Walking lines, chromatic approach notes |
|
||||
| **Ensemble skills** | Small voicings, register discipline, comping | Comping rhythms (Charleston…), "rule of 1", staying out of the bass lane | Pocket/drummer lock, ghost notes, subdivision switching |
|
||||
| **Functional ears** | Hearing I-IV-V / vi-IV-I-V by bass line | Nashville numbers, 12-key transposition | Singing root movement, predicting the V |
|
||||
|
||||
### Goals
|
||||
|
||||
**L1 — Practice drills tab.**
|
||||
Add a drills library to the Learn section: per instrument, per pillar, the concrete drills from the curriculum doc (e.g. "first note after every chord change = the 3rd", "Charleston comping ladder", "W|H|H chromatic walkup"). Keyed to the *current detected key and loop* so every drill is in today's jam context, not abstract C major.
|
||||
|
||||
**L2 — Detection-powered feedback (the unfair advantage).**
|
||||
No practice app can hear the player; this one can. Phased:
|
||||
- **Target-note highlighting:** on each detected chord change, highlight the new chord's 3rd/7th on the fretboard/piano for a beat (drill scaffold — uses existing tier rendering).
|
||||
- **Next-chord preview tier:** when a loop is detected, show the *upcoming* chord's root and its chromatic approach notes (the bassist's walking-line scaffold).
|
||||
- **Chord-tone hit rate:** classify detected notes against the current chord (chord tone / scale tone / outside) and show a session score.
|
||||
- **Pocket report:** extend the onset/BPM pipeline to show timing drift against the established grid.
|
||||
|
||||
**L3 — Ear training from your own jam.**
|
||||
A quiz mode that hides the chord banner and asks the user to name the progression in numbers before revealing — using the *user's own chord history* as the corpus. Converts the existing detection + `toRomanNumeral` into the functional ear training every method prescribes.
|
||||
|
||||
**L4 — Mode-difference teaching.**
|
||||
When the user manually switches mode (the documented K-S limitation — by design), briefly highlight the *difference notes* (e.g. the raised 6th going minor → Dorian) on the instrument views. Turns a limitation into a lesson.
|
||||
|
||||
---
|
||||
|
||||
## What we need to go next level — priorities
|
||||
|
||||
| # | Item | Effort | Why first |
|
||||
|---|---|---|---|
|
||||
| 1 | **G1** Genre repertoire expansion | S (data only) | Immediate value, zero architectural risk |
|
||||
| 2 | **G2** Nashville number toggle | S | Directly answers "is it 1-5-4", jam-native language |
|
||||
| 3 | **G3** Progression Builder MVP (palette + reorder + numerals) | M | The single most-requested workflow gap |
|
||||
| 4 | **L1** Drills tab seeded from curriculum doc | M (content + UI) | Makes Learn level-appropriate |
|
||||
| 5 | **G4** Voicing alternatives (guitar string-sets + piano recipes) | M | Feeds both Builder and Learn |
|
||||
| 6 | **L2** Target-note highlighting + next-chord preview | M | First detection-powered trainer, reuses tier rendering |
|
||||
| 7 | **L3** Ear-training quiz on own history | M | High pedagogical value, small surface |
|
||||
| 8 | **L2** Hit-rate scoring + pocket report | L | Needs tuning of pitch/onset classification |
|
||||
| 9 | **G3** Builder phase 2: borrowed palette, variation buttons, loop import | L | Builds on MVP + substitution rules |
|
||||
| 10 | **KB** Knowledgebase + Jam Guide panel (see `docs/kb-plan.md`) | L, but looped in S-sized sessions via `/kb-expand` | The style × instrument playbook that powers improv learning |
|
||||
|
||||
### How we execute
|
||||
|
||||
Knowledgebase work runs as **looped sessions**: `/kb-expand` does exactly one style × instrument cell (research → author → validate → commit), driven by the queue in `docs/kb-backlog.md`. Tranches run on a dedicated branch — e.g. an hourly `/loop /kb-expand` for a working day — and **end with a pull request** so a whole tranche is reviewed in one place. First tranche (started 2026-06-12, branch `kb-expansion`): Session 0 bootstrap + the first guitar style cells, hourly for 8 hours, PR to `main` at the end.
|
||||
|
||||
### Definition of "next level" (success criteria)
|
||||
|
||||
- A jammer can glance at the app and call the loop in numbers ("it's a 1-5-4").
|
||||
- Suggestions cover the genres people actually jam (funk/reggae/R&B/gospel included), not just pop/blues.
|
||||
- A user can lay out their own progression, drag chords around, and see 3+ ways to voice every chord on their instrument.
|
||||
- The Learn section gives an intermediate guitarist, pianist, or bassist a *specific* next drill in the key they're jamming in right now — and at least one drill where the app verifies them by listening.
|
||||
@@ -70,6 +70,42 @@ npm run electron:build:linux
|
||||
|
||||
Output is placed in `frontend/release/`.
|
||||
|
||||
## Releasing / Tagging
|
||||
|
||||
To create a GitHub release and trigger the CI build pipeline, create an annotated tag and push it to origin. The release workflow runs on tags matching `v*` (for example `v0.6.1`).
|
||||
|
||||
Local tagging example:
|
||||
|
||||
```bash
|
||||
# update package.json version first if desired
|
||||
git tag -a v0.6.1 -m "Release v0.6.1"
|
||||
git push origin v0.6.1
|
||||
```
|
||||
|
||||
What the GitHub Action does (`.github/workflows/release.yml`):
|
||||
|
||||
- Listens for pushed tags `v*` and runs a matrix build across Windows, macOS and Linux.
|
||||
- macOS is built as a universal binary (`--universal`) so a single DMG supports both Intel and Apple Silicon.
|
||||
- Each matrix job builds the installer using `electron-builder`, uploads its artifacts, and a final `publish` job aggregates all artifacts into one GitHub release.
|
||||
|
||||
If you prefer to run builds locally before tagging, use the npm scripts in the repository root:
|
||||
|
||||
```bash
|
||||
# Windows NSIS
|
||||
npm run electron:build:win
|
||||
|
||||
# macOS DMG (universal)
|
||||
npm run electron:build:mac -- --universal
|
||||
|
||||
# Linux AppImage
|
||||
npm run electron:build:linux
|
||||
```
|
||||
|
||||
CI notes / troubleshooting
|
||||
- The workflow uploads artifacts from `release/` into the release. Ensure `package.json` build `directories.output` matches the workflow's expected `release/` folder.
|
||||
- If mac packaging for x64 on ARM-hosted runners fails, switch to `--universal` (already configured) or build x64 on an Intel runner.
|
||||
- To test the workflow locally, consider using `nektos/act` or push a temporary tag like `vtest`.
|
||||
|
||||
## Design Tokens
|
||||
|
||||
All colors are defined in `frontend/tailwind.config.js` and can be referenced by name in any component.
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
# KB Expansion Backlog
|
||||
|
||||
The queue for the `/kb-expand` loop. One cell per session, top-to-bottom. Protocol and schema: [`docs/kb-plan.md`](kb-plan.md). Statuses: `todo` → `in-progress` → `done (YYYY-MM-DD, coverage)`.
|
||||
|
||||
## Phase 0 — Foundation (must be first)
|
||||
|
||||
| # | Cell | Status |
|
||||
|---|---|---|
|
||||
| 0 | Bootstrap: `src/data/kb/` + `SCHEMA.md` + `scripts/validate-kb.mjs` + `kb/index.js` + **jazz/guitar gold standard** | done (2026-06-12, iteration 1) |
|
||||
|
||||
## Guitar
|
||||
|
||||
| # | Style | Status |
|
||||
|---|---|---|
|
||||
| 1 | Jazz (part of bootstrap) | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 2 | Blues | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 3 | Rock | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 4 | Bossa Nova | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 5 | Funk | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 6 | Reggae | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 7 | Country / Folk | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 8 | R&B / Neo-soul | done (2026-06-12, 5 progressions × 2 plays, validator ✓) |
|
||||
| 9 | Gospel | todo |
|
||||
| 10 | Pop | todo |
|
||||
|
||||
## Piano
|
||||
|
||||
| # | Style | Status |
|
||||
|---|---|---|
|
||||
| 11 | Jazz | todo |
|
||||
| 12 | Blues | todo |
|
||||
| 13 | Bossa Nova | todo |
|
||||
| 14 | Gospel | todo |
|
||||
| 15 | R&B / Neo-soul | todo |
|
||||
| 16 | Pop | todo |
|
||||
| 17 | Rock | todo |
|
||||
| 18 | Funk | todo |
|
||||
| 19 | Country / Folk | todo |
|
||||
| 20 | Reggae | todo |
|
||||
|
||||
## Bass
|
||||
|
||||
| # | Style | Status |
|
||||
|---|---|---|
|
||||
| 21 | Blues | todo |
|
||||
| 22 | Jazz | todo |
|
||||
| 23 | Funk | todo |
|
||||
| 24 | Reggae | todo |
|
||||
| 25 | Rock | todo |
|
||||
| 26 | Bossa Nova | todo |
|
||||
| 27 | R&B / Neo-soul | todo |
|
||||
| 28 | Country / Folk | todo |
|
||||
| 29 | Gospel | todo |
|
||||
| 30 | Pop | todo |
|
||||
|
||||
## UI milestones (interleave when their data exists)
|
||||
|
||||
| Milestone | Depends on | Status |
|
||||
|---|---|---|
|
||||
| Jam Guide MVP (panel, matching, `ChordDiagram.jsx`, live sync) | cell 0 | todo |
|
||||
| `MiniPiano.jsx` + recipe resolver | cell 11 | todo |
|
||||
| Bass pattern renderer | cell 21 | todo |
|
||||
| Improv layer (licks/tabs display) | a few guitar cells | todo |
|
||||
|
||||
> Notes for sessions: piano style order front-loads the styles where piano voicings differ most (jazz/gospel/neo-soul); bass order front-loads line-driven styles (blues/jazz/funk). Adjust freely — order is a default, not a rule.
|
||||
+223
@@ -0,0 +1,223 @@
|
||||
# Knowledgebase Plan — Styles × Instruments × Progressions × Voicings
|
||||
|
||||
The plan for building JamBuddy's **jam knowledgebase**: an intermediate guide to the standard progressions of each style (Jazz, Blues, Rock, Bossa Nova, …) and the different ways to *play* them per instrument (guitar first, then piano, then bass) — expandable one session at a time via a repeatable loop, and rendered live in a large **Jam Guide** panel at the bottom of the app.
|
||||
|
||||
Three principles drive everything:
|
||||
|
||||
1. **Key-agnostic data.** Everything is stored as scale degrees and movable shapes, never absolute chords. The app detects the key; one KB entry renders in all 12 keys. This is the same convention `PROGRESSIONS.degrees` and the movable shapes in `voicings.js` already use.
|
||||
2. **Machine-verifiable quality.** A validator proves every voicing actually contains the chord's tones before content lands. That's what makes agent-generated content trustworthy over many loop iterations.
|
||||
3. **One bounded cell per session.** Each expansion session completes exactly one style × instrument cell (researched, authored, validated, committed). Small enough to review, big enough to matter.
|
||||
|
||||
---
|
||||
|
||||
## 1. Architecture
|
||||
|
||||
```
|
||||
src/data/kb/
|
||||
index.js — registry aggregating all styles (UI reads only this)
|
||||
SCHEMA.md — the authoring contract (formats below, with one full example)
|
||||
jazz/
|
||||
meta.js — { id, label, feel, tempoRange, character }
|
||||
progressions.js — the style's standard progressions (instrument-independent)
|
||||
guitar.js — guitar pack: plays + comping + improv
|
||||
piano.js — piano pack
|
||||
bass.js — bass pack
|
||||
blues/ … — same shape per style
|
||||
scripts/
|
||||
validate-kb.mjs — quality gate, run with `node scripts/validate-kb.mjs`
|
||||
docs/
|
||||
kb-backlog.md — the cell matrix with statuses (the loop's queue)
|
||||
```
|
||||
|
||||
`index.js` imports whatever style folders exist — the Jam Guide's style tabs grow automatically as the loop fills cells. A style is usable for one instrument before the others exist (guitar-first rollout).
|
||||
|
||||
### Progression entry (per style)
|
||||
|
||||
```js
|
||||
// kb/jazz/progressions.js
|
||||
export default [
|
||||
{
|
||||
id: 'jazz-251-major',
|
||||
name: 'ii–V–I',
|
||||
rn: ['ii7', 'V7', 'Imaj7'],
|
||||
degrees: [2, 7, 0], // semitone offsets from key root
|
||||
qualities: ['min7', 'dom7', 'maj7'], // keys of CHORD_TYPES in theory.js
|
||||
bars: [1, 1, 2],
|
||||
mode: 'major',
|
||||
songs: ['Autumn Leaves', 'All The Things You Are'],
|
||||
tip: 'The 7th of each chord resolves down a half-step to the 3rd of the next.',
|
||||
},
|
||||
// … 4-8 progressions per style (see docs/progression-repertoire.md §1 for the lists)
|
||||
]
|
||||
```
|
||||
|
||||
### Instrument pack — guitar
|
||||
|
||||
```js
|
||||
// kb/jazz/guitar.js
|
||||
export default {
|
||||
styleIntro: '2-3 sentences on the guitarist's role in this style.',
|
||||
comping: [{ label: 'Four-to-the-bar (Freddie Green)', rhythm: '♩ ♩ ♩ ♩', description: '…' }],
|
||||
plays: {
|
||||
'jazz-251-major': [ // ≥2 "ways to play" per progression
|
||||
{
|
||||
label: 'Shell voicings',
|
||||
level: 'intermediate',
|
||||
chords: [ // one entry per progression step
|
||||
{ shape: { rootStr: 5, offsets: ['x', 0, 'x', 0, 1, 'x'], fingers: [0,1,0,2,3,0] },
|
||||
note: 'root–♭7–♭3' },
|
||||
// …
|
||||
],
|
||||
tips: 'Stay light; the 3rds and 7ths do all the work.',
|
||||
},
|
||||
{ label: 'Drop-2 on top four strings', /* … */ },
|
||||
],
|
||||
},
|
||||
improv: {
|
||||
scales: [{ over: 'ii7', scale: 'dorian', why: '…' }],
|
||||
targetNotes: 'Land the 3rd of each chord on beat 1.',
|
||||
licks: [{ tab: 'e|---…', description: '…', over: 'jazz-251-major' }],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
**Shape format** follows the existing `voicings.js` convention so the renderer is shared: movable shapes use `rootStr` + `offsets` relative to the root fret (renders in any key); open shapes use absolute `frets` + `onlyRoot` (pitch class) and only render when the key matches. Strings are arrays of 6, low-E first, `'x'` = muted.
|
||||
|
||||
### Instrument pack — piano
|
||||
|
||||
Voicings are **interval recipes** resolved per chord quality (no fingering data needed):
|
||||
|
||||
```js
|
||||
plays: {
|
||||
'jazz-251-major': [
|
||||
{
|
||||
label: 'Rootless A/B alternation',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ recipe: { LH: ['3', '5', '7', '9'] }, note: 'Type A' }, // ii7
|
||||
{ recipe: { LH: ['7', '9', '3', '13'] }, note: 'Type B' }, // V7
|
||||
{ recipe: { LH: ['3', '5', '7', '9'] }, note: 'Type A' }, // Imaj7
|
||||
],
|
||||
register: 'top note between C4 and C5',
|
||||
tips: 'Alternate types so inner voices barely move.',
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
Degrees are chord-degree strings (`'1' '3' 'b7' '9' '13'`); the resolver maps them through the chord quality's intervals (which `theory.js` chord templates already encode).
|
||||
|
||||
### Instrument pack — bass
|
||||
|
||||
Line patterns per progression step, in degrees plus approach annotations:
|
||||
|
||||
```js
|
||||
plays: {
|
||||
'blues-12bar': [
|
||||
{
|
||||
label: 'Walking, chromatic approach',
|
||||
level: 'intermediate',
|
||||
bars: [{ beats: ['R', '3', '5', 'chrom→next'] } /* … per bar */],
|
||||
tips: 'Beat 1 is always the new root; beat 4 walks into it.',
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Quality gates
|
||||
|
||||
### Mechanical — `scripts/validate-kb.mjs` (must pass before any commit)
|
||||
|
||||
- ids unique; every `plays` key references an existing progression id; `chords`/`bars` length matches the progression length
|
||||
- `degrees` ∈ 0–11; `qualities` are keys of `CHORD_TYPES`; `mode` is a known mode
|
||||
- guitar shapes: 6 entries per array, frets 0–15, **fret span ≤ 4** (intermediate hands), and — the strong check — the shape's computed pitch classes (standard tuning EADGBE) must contain the chord's root and defining tones (3rd/7th or quality equivalent) and contain **no out-of-chord tones**
|
||||
- piano recipes: every degree resolvable for that chord quality
|
||||
- coverage per cell: ≥ 4 progressions, ≥ 2 plays per progression, improv section present (guitar/piano), styleIntro present
|
||||
|
||||
### Musician checklist (human/agent self-review, in SCHEMA.md)
|
||||
|
||||
- Are the plays *idiomatically different* (register, density, difficulty), not just transpositions of each other?
|
||||
- Is each play genuinely intermediate — no 5-fret stretches, no 2-octave rootless clusters?
|
||||
- Does the style actually sound like the style (bossa ≠ jazz with different labels: distinct rhythm descriptions)?
|
||||
- Do tips teach a *transferable* idea (voice leading, register, space), not just "play this"?
|
||||
|
||||
---
|
||||
|
||||
## 3. The expansion loop
|
||||
|
||||
### The queue
|
||||
|
||||
`docs/kb-backlog.md` holds the matrix of cells with statuses (`todo` / `in-progress` / `done` + date + coverage). Order: **all guitar cells first** (most voicing complexity — it sets the quality bar), then piano, then bass. Style priority within each instrument: jazz → blues → rock → bossa → funk → reggae → country/folk → R&B/neo-soul → gospel → pop.
|
||||
|
||||
### The session protocol (encoded as the `/kb-expand` project skill)
|
||||
|
||||
Each session:
|
||||
|
||||
1. **Orient** — read this plan, `SCHEMA.md`, the backlog, and the gold-standard cell (`kb/jazz/guitar.js`, the first one built).
|
||||
2. **Claim** — take the first `todo` cell, mark it `in-progress`.
|
||||
3. **Research** — dispatch web-research agent(s) for that style × instrument: the style's standard progressions (cross-check against `docs/progression-repertoire.md`), the 2-3 idiomatic intermediate ways to play each, comping rhythms, improv approach. Named sources required.
|
||||
4. **Author** — write `progressions.js` (if the style is new) and the instrument pack, conforming to SCHEMA.md.
|
||||
5. **Validate** — run `node scripts/validate-kb.mjs`; fix until green; run the musician checklist.
|
||||
6. **Integrate** — register the style in `kb/index.js`; `npm run build` must pass.
|
||||
7. **Record** — mark the cell `done` with date + coverage stats in the backlog; commit (`kb: add <style> <instrument> pack`).
|
||||
8. **Report** — summarize what was added and name the next cell.
|
||||
|
||||
**Session 0 (bootstrap):** if `src/data/kb/`, `SCHEMA.md`, or the validator don't exist yet, the first session builds them *plus* the jazz/guitar gold-standard cell. Every later session imitates that exemplar.
|
||||
|
||||
### How to run it
|
||||
|
||||
- One session: type **`/kb-expand`** — does exactly one cell.
|
||||
- Several in a row: `/loop /kb-expand` and let it self-pace, or run `/kb-expand` whenever there's time.
|
||||
- Review cadence: cells are individual commits on a branch — review/merge per instrument tranche if preferred.
|
||||
|
||||
30 cells ≈ 30 short sessions; guitar's 10 cells deliver user-visible value immediately because the Jam Guide reads whatever exists.
|
||||
|
||||
---
|
||||
|
||||
## 4. The Jam Guide panel (UI)
|
||||
|
||||
A large panel at the **bottom of the main scroll** — while jamming you scroll down and the current progression's playbook is laid out to fit the screen.
|
||||
|
||||
```
|
||||
┌─ JAM GUIDE ─────────────────────────────── [Guitar|Piano|Bass] [Jazz][Blues][Rock][Bossa]… ─┐
|
||||
│ Matched: ii–V–I in G major your loop: Am7 → D7 → Gmaj7 │
|
||||
│ │
|
||||
│ Am7 (ii7) D7 (V7) Gmaj7 (Imaj7) │
|
||||
│ ▼ playing now │
|
||||
│ Shells [diagram] [diagram] [diagram] root–3–7, four-to-the-bar │
|
||||
│ Drop-2 [diagram] [diagram] [diagram] top-4 strings, stays high │
|
||||
│ Triads 1-3 [diagram] [diagram] [diagram] fills between vocal lines │
|
||||
│ ───────────────────────────────────────────────────────────────────────────── │
|
||||
│ IMPROV D dorian → G mixo → G major · target the 3rds: C → F# → B · lick ▸ tab… │
|
||||
└──────────────────────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
- **Component:** `JamGuide.jsx`, mounted last in `App.jsx`; collapsed header always visible, expands to ~70vh.
|
||||
- **Inputs:** `keyInfo`, `detectedProgression`, `currentChord` — plus instrument + style selection (persisted in settings; style tabs are generated from `kb/index.js`, so the panel grows as the loop runs).
|
||||
- **Matching:** convert the detected loop to degrees relative to the key root, match against the selected style's progressions **rotation-invariantly** (same canonicalization idea as `detectRepeatingProgression`). No match → fallback: per-chord voicing alternatives from `voicings.js`, so the panel is never empty.
|
||||
- **Live sync:** the active chord column highlights using the loop-position logic in `ProgressionBanner.jsx` (`findLoopPosition` — extract it to a shared util). The player reads the *next* voicing in time, in rhythm with the band.
|
||||
- **Diagrams:** new small renderers — `ChordDiagram.jsx` (6-string × 5-fret SVG grid, consumes the shape format), `MiniPiano.jsx` (~2-octave SVG, highlights resolved recipe notes), bass patterns as degree badges (R · 3 · 5 · ♭7) over a mini string diagram. Reuse design tokens (`bg-panel`, `border-border`, accent purple for chord tones).
|
||||
- **Smart fit:** CSS grid — columns = progression chords (4–6), rows = plays; rows beyond what fits collapse behind "more ways ▾"; diagrams scale to column width; on narrow windows the grid flips to one play per row, chords scrolling horizontally.
|
||||
- **Key-aware rendering:** movable shapes get their fret position computed from the detected key; open shapes appear only when the chord's root matches; piano recipes resolve through the chord quality. All 12 keys for free, per principle 1.
|
||||
|
||||
---
|
||||
|
||||
## 5. Phases
|
||||
|
||||
| Phase | What | Outcome |
|
||||
|---|---|---|
|
||||
| 0 | Foundation: `kb/` dirs, `SCHEMA.md`, validator, backlog, `/kb-expand` skill, jazz/guitar gold standard | The loop exists and has an exemplar |
|
||||
| 1 | Jam Guide MVP: panel + matching + guitar `ChordDiagram` + live sync | jazz/guitar visible in the app while jamming |
|
||||
| 2 | Loop guitar cells: blues, rock, bossa, funk, reggae, country, R&B, gospel, pop | Full guitar guide across styles |
|
||||
| 3 | Piano: `MiniPiano` renderer + recipe resolver, loop piano cells | Second instrument live |
|
||||
| 4 | Bass: pattern renderer, loop bass cells | Third instrument live |
|
||||
| 5 | Polish: improv layer with tabs/licks, Progression Builder integration (GOAL G3), ToneGym-style tap-to-hear | Guide ↔ Builder round-trip |
|
||||
|
||||
### Success criteria
|
||||
|
||||
- During a jam, scrolling to the Jam Guide shows ≥ 3 ways to play the detected progression on the selected instrument, in the detected key, with the active chord highlighted in time.
|
||||
- `/kb-expand` completes a cell in one session with the validator green, no hand-holding.
|
||||
- A new style added by the loop appears in the UI with **zero code changes** (data + registry only).
|
||||
- An intermediate player can switch Jazz → Bossa over the same ii–V–I and see *genuinely different* voicings and rhythm guidance.
|
||||
@@ -0,0 +1,129 @@
|
||||
# Learn Curriculum — Intermediate, Jam-Ready Players
|
||||
|
||||
Research-backed training repertoire for the Learn section. Companion to [`GOAL.md`](../GOAL.md) Part 2. Audience: players who know the basics and can survive a jam — the goal is making them better *in* the jam. Not beginner material.
|
||||
|
||||
Across guitar, piano, and bass pedagogy the intermediate→advanced jump converges on four pillars: **instrument liberation** (play anything anywhere), **playing the changes** (chord-tone awareness), **ensemble skills** (space, register, pocket), and **functional ears** (hearing 1-5-6-4). The per-instrument curricula below feed both the Learn UI and the knowledgebase (see `docs/kb-plan.md`).
|
||||
|
||||
---
|
||||
|
||||
## Guitar
|
||||
|
||||
### Skill taxonomy (rough order)
|
||||
|
||||
**Tier A — Fretboard liberation**
|
||||
1. CAGED system fluency — locate any chord in 5 places instantly (Fretboard Logic, Pickup Music)
|
||||
2. Triads on string sets — major/minor triads + inversions on strings 1-3, 2-4, 3-5 (Justin Guitar Grade 5, Leavitt Vol. 2)
|
||||
3. Connecting pentatonic boxes — the box 2↔3 seam is the documented weak point
|
||||
4. Scale-over-chord mapping — seeing the chord *inside* the scale shape
|
||||
|
||||
**Tier B — Playing the changes**
|
||||
5. Chord-tone / target-note soloing — land on a chord tone on beat 1 of each change
|
||||
6. Guide tones (3rds & 7ths) — the 7th of one chord resolves to the 3rd of the next
|
||||
7. Phrasing across positions
|
||||
|
||||
**Tier C — Ensemble skills**
|
||||
8. Comping with small triad voicings — stay out of the vocalist's/keys' register
|
||||
9. Internal time — metronome on beats 2 & 4, then no click (Tomo Fujita's core emphasis)
|
||||
10. Ear-led playing — "let your ears lead you instead of your eyes" (Fujita)
|
||||
|
||||
**Tier D — Functional ears**
|
||||
11. Progression recognition by ear — track the bass line first
|
||||
12. Modal awareness — how Dorian/Mixolydian overlap shapes you already know
|
||||
13. Transcribing & daily riff-writing — the recurring plateau fix
|
||||
|
||||
### Top drills
|
||||
1. **Triad voice-leading over 12-bar blues** — only close triads on one string set; on every change move each finger to the *nearest* note of the next triad. Forces inversions + minimal-motion voice leading at once.
|
||||
2. **One-CAGED-position soloing** — improvise using only one grip's chord tones + surrounding scale notes; shift position each chorus. Welds chord, arpeggio, and scale into one visual unit.
|
||||
3. **Target-note drill** — first note after each chord change must be the 3rd (then 7ths, then 7th→3rd resolutions); pentatonic filler in between. Pure pentatonic playing suddenly "follows the changes".
|
||||
4. **Pentatonic seam drill** — ascend box 1, exit through a named seam note into box 2, etc. Shifts become melodic destinations.
|
||||
5. **Metronome on 2 & 4** — click as the snare backbeat; progress to click once per bar, then none.
|
||||
6. **Comping ladder** — comp behind a recorded soloist using only 3-string triads above fret 5, varying rhythm/dynamics, never register-clashing.
|
||||
7. **Daily progression dictation** — 10-15 min naming I-IV-V vs vi-IV-I-V vs ii-V-I from songs, bass line first.
|
||||
|
||||
### Sources
|
||||
Fretboard Logic (Bill Edwards) · Justin Guitar Grades 4–6 · Tomo Fujita *Accelerate Your Guitar Playing* (Berklee) · Leavitt *A Modern Method for Guitar* Vol. 2 · Absolutely Understand Guitar · Pickup Music CAGED pathway · fundamental-changes.com (guide tones) · TrueFire (box connection, plateaus) · Premier Guitar "Rhythm Rules" · zotzinguitarlessons.com (triads in 12 keys) · ToneGym / tonedear.com · stringshock.com & jazzguitartoday.com (jam etiquette)
|
||||
|
||||
---
|
||||
|
||||
## Piano / Keys
|
||||
|
||||
### Skill taxonomy (rough order)
|
||||
|
||||
**Tier 1 — Harmonic vocabulary**
|
||||
1. Triad inversions in all 12 keys — grab any chord near the current hand position
|
||||
2. Voice leading — minimum-distance inversion choice; the biggest "amateur → pro" jump
|
||||
3. Shell voicings (root–3–7) — light, clear, gateway to comping (Open Studio, PianoGroove)
|
||||
4. Sus2/sus4/add9 colors and slash chords — pop/worship vocabulary
|
||||
5. Rootless voicings — Type A (3-5-7-9), Type B (7-9-3-5); top note between C4–C5
|
||||
|
||||
**Tier 2 — Rhythm & ensemble role**
|
||||
6. Comping rhythms — Charleston, reverse Charleston, Red Garland pattern, anticipations
|
||||
7. Register discipline — LH stays above ~G3 when a bassist is present
|
||||
8. Density discipline ("rule of 1") — in a 5-piece band, play 1/5 of the music
|
||||
9. Hand-role splitting — LH harmony/groove anchor, RH color and answers
|
||||
|
||||
**Tier 3 — Functional/ear skills**
|
||||
10. Thinking in numbers (Nashville Number System / Roman numerals)
|
||||
11. Progression recognition by ear — bass line + emotional flow of each degree
|
||||
12. Transposition fluency — known songs in all 12 keys via the number method
|
||||
13. Sight-comping — realize an unfamiliar lead sheet at tempo (Berklee keyboard method)
|
||||
|
||||
**Tier 4 — Bandstand**
|
||||
14. Form-keeping under pressure — never lose bar 1
|
||||
15. Improvising over changes — chord tones → pentatonics → scale tones
|
||||
16. Repertoire in 2-3 keys from memory
|
||||
|
||||
### Top drills
|
||||
1. **Voice-led progression loop in 12 keys** — I–V–vi–IV with minimum hand movement (C → G/B → Am → F/A), through the circle of fifths. Self-grading: you can see and hear when you jump.
|
||||
2. **Shell ii–V–I cycle** — root+3+7 through all keys, alternating types so 3rds/7ths swap and resolve by half-step. The core voice-leading mechanic made physical.
|
||||
3. **Charleston metronome ladder** — one syncopation pattern to automaticity at 80→160 BPM; comping failure in jams is usually rhythmic, not harmonic.
|
||||
4. **Backing-track subtraction** — chorus 1 whole notes only; chorus 2 LH only above G3, no roots; chorus 3 RH colors only; chorus 4 two hits per bar. Simulates bandmates occupying frequency space.
|
||||
5. **Bass-line ear training** — hum the bass note of each chord in a pop song, convert to numbers, play it.
|
||||
6. **One song, twelve keys** — number-chart a known song, new key daily.
|
||||
7. **Cold lead-sheet sight-comping** — slow metronome, once through the form, never stopping. Rehearses the actual jam failure mode.
|
||||
|
||||
### Sources
|
||||
Berklee Online Keyboard Method · Mark Levine *The Jazz Piano Book* · Open Studio Piano Pathway · PianoGroove (rootless voicings, comping) · The Jazz Piano Site (jam prep) · Piano With Jonny (voicings, transposing) · Jens Larsen (comping rhythms) · Pianote (band guide, NNS) · Worship Online / Musicademy / Sweetwater (band role) · ToneDear / ToneGym / Musical U / trainear.com (ear training)
|
||||
|
||||
---
|
||||
|
||||
## Bass
|
||||
|
||||
### Skill taxonomy (rough order)
|
||||
1. Fretboard zone mastery — every note to fret 12, lines through each zone (Friedland)
|
||||
2. Root-fifth-octave vocabulary — the "safe but musical" jam fallback
|
||||
3. Chord-tone fluency — R-3-5-7 of maj/min/dom/m7♭5 anywhere (TalkingBass: chord tones *before* scales)
|
||||
4. Scale-tone vs chord-tone discrimination — outline on strong beats, connect on weak
|
||||
5. Approach-note technique — chromatic from above/below, W|H|H walkup, dominant approach
|
||||
6. Walking bass construction — root on 1, chord tones on 1 & 3, approach into the next root on 4
|
||||
7. Subdivision command — straight 8ths / swing / shuffle / 16th funk, switching mid-groove
|
||||
8. Pocket / drummer lock — kick matching, ghost notes, dynamic mirroring
|
||||
9. Functional ear training — root movement, I/IV/V/vi by function
|
||||
10. Real-time harmonic prediction — the V "pushes home", reacting within one pass of the form
|
||||
11. Dynamics, touch, space — most cited intermediate→pro separator
|
||||
12. Fills and form awareness — fills at bars 4/8 phrase boundaries
|
||||
|
||||
### Top drills
|
||||
1. **Root-only song stripping** — play only the root of each change by ear; add 5ths and octaves on later passes. Strips songs to harmonic skeleton.
|
||||
2. **Arpeggiate the progression** — R-3-5(-7) over I-V-vi-IV in several keys, then inversions, then other neck zones.
|
||||
3. **W|H|H chromatic walkup** — between chords a 4th apart: root, whole, half, half (C-D-E♭-E→F). Formulaic forward motion that telegraphs the next chord.
|
||||
4. **Walking 12-bar / 1-6-2-5 loop** — a decision every beat about chord vs passing tone (Friedland, SBL 5-step formula).
|
||||
5. **2-bar loop challenge** — one groove for 5+ minutes changing only tone/dynamics/note length. Pocket training; exposes drift.
|
||||
6. **Subdivision switching** — 2 bars 8ths / 2 bars 16ths at 60-80 BPM; click on 2&4 only; mute the click 4 bars and check.
|
||||
7. **Sing-then-play root movement** — sing the roots before touching the bass, then 3rds/5ths/7ths.
|
||||
|
||||
### Sources
|
||||
Scott's Bass Lessons (Players Path, Groove Trainer) · TalkingBass Chord Tone Essentials · Ed Friedland *Building Walking Bass Lines* · Hal Leonard Bass Method · Berklee Practice Method: Bass · Bass Musician Magazine (drummer lock) · Premier Guitar (jam survival) · StudyBass · Learn Jazz Standards · Jazz Night School (chromatic 4) · onlinebasscourses.com · Functional Ear Trainer
|
||||
|
||||
---
|
||||
|
||||
## How the app supports this (detection-powered training)
|
||||
|
||||
These map to GOAL.md L1–L4; the app's unfair advantage is that it *hears* the player.
|
||||
|
||||
1. **Target-note highlighting** — on each detected chord change, flash the new chord's 3rd/7th on the fretboard/piano (guitar drill 3, piano drill 2). Later: score whether the first detected note after the change was a chord tone.
|
||||
2. **Voice-leading coach (piano view)** — highlight the *nearest inversion* to the previous chord, common tones marked "hold"; score total semitone travel per progression.
|
||||
3. **Next-chord preview tier (bass)** — when a loop is detected, highlight the upcoming chord's root plus its chromatic approach notes a half-step above/below — the walking-line scaffold, one beat ahead.
|
||||
4. **Progression ear-trainer on your own jam** — hide the chord banner, ask for the numbers (vi-IV-I-V), reveal. Uses chord history + `toRomanNumeral`; contextual beats abstract drills.
|
||||
5. **Pocket report** — extend the onset/BPM histogram to show beat-phase drift (rushing/dragging), plus a 2-&-4-only click synced to the detected tempo.
|
||||
6. **Mode-difference teaching** — when the user manually switches mode (the K-S limitation), briefly highlight the difference notes (minor → Dorian = raised 6th).
|
||||
@@ -0,0 +1,149 @@
|
||||
# Chord Progression Repertoire
|
||||
|
||||
Research-backed reference for expanding the progression features. Companion to [`GOAL.md`](../GOAL.md) Part 1. Notation: uppercase = major, lowercase = minor, ° = diminished, 7 = dominant unless marked maj7/m7.
|
||||
|
||||
How this maps to code today:
|
||||
|
||||
- `PROGRESSIONS` in `src/lib/theory.js` — `{ name, rn, degrees }` per progression; `degrees` are semitone offsets from the key root. This is the format new entries should use.
|
||||
- `getSuggestedProgressions(root, mode)` maps degrees → chord names in key; `toRomanNumeral()` converts any chord back to a numeral.
|
||||
- `FAMOUS_PROGRESSIONS` in `src/lib/education.js` — richer entries (songs, tips, style variations) for the Learn side.
|
||||
|
||||
## 1. Genre-by-genre progression tables
|
||||
|
||||
### Pop
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| I–V–vi–IV | "Axis of Awesome" — #1 in Hooktheory's corpus of 75k+ analyzed songs |
|
||||
| vi–IV–I–V | Same loop rotated to start on vi ("pessimistic axis") |
|
||||
| I–vi–IV–V | "Doo-wop" / "'50s progression" |
|
||||
| I–IV–vi–V | Common variant (Africa chorus) |
|
||||
| IV–V–iii–vi | "Royal Road" — J-pop/anime staple, spreading into Western pop |
|
||||
|
||||
### Rock
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| I–IV–V | Foundation of rock/blues/country |
|
||||
| I–♭VII–IV(–I) | Mixolydian rock cliché (Sweet Home Alabama as V–IV–I rotation) |
|
||||
| i–♭VII–♭VI(–V) | Andalusian-derived minor loop; with V = full Andalusian cadence |
|
||||
| I–♭III–IV | Blues-rock riff progression (borrowed ♭III) |
|
||||
|
||||
### Blues (12-bar family)
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| I7×4 / IV7×2, I7×2 / V7, IV7, I7, V7 | Standard 12-bar |
|
||||
| Bar 2 → IV7 | "Quick change" / "quick four" |
|
||||
| ii7–V7 in bars 9–10, turnaround I–VI7–ii–V7 | Jazz blues |
|
||||
| i7–iv7–i7 … ♭VI7–V7–i7 | Minor blues (The Thrill Is Gone) |
|
||||
| I–V–IV–IV–I–V–I–V | 8-bar blues (Key to the Highway) |
|
||||
|
||||
### Jazz
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| ii7–V7–Imaj7 | The fundamental cadence |
|
||||
| I–vi–ii–V (also iii–vi–ii–V) | Rhythm changes A / turnaround |
|
||||
| III7–VI7–II7–V7 | Rhythm changes bridge (circle of dominants) |
|
||||
| iim7♭5–V7♭9–i | Minor ii–V–i |
|
||||
| ii7–♭II7–Imaj7 | Tritone-sub cadence |
|
||||
| ivm7–♭VII7–Imaj7 | "Backdoor" progression |
|
||||
|
||||
### Folk / Country
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| I–IV–V(–I) | Core of both genres |
|
||||
| I–V–I–IV | Two/three-chord verse pattern |
|
||||
| i–♭VII–♭VI | Minor folk descent (Am–G–F) |
|
||||
| I–V–vi–iii–IV–I–IV–V | Pachelbel progression |
|
||||
| I–II7–V–I | Classic country secondary-dominant (V/V) move |
|
||||
|
||||
### Funk
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| I7 vamp | James Brown static dominant, voiced as 9th |
|
||||
| i7–IV7 | Dorian two-chord vamp — the most common funk pair |
|
||||
| i7 / m11 vamp | Minor one-chord groove |
|
||||
| ii7–V7 loop | Funk/disco vamp |
|
||||
|
||||
Design insight: funk needs few *progressions* but rich *chord qualities* (9, 7♯9, m11, 13sus) — colour lives in the voicing, not the changes.
|
||||
|
||||
### Reggae
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| I–V or I–IV | Two-chord skank vamps |
|
||||
| I–V–vi–IV | No Woman No Cry |
|
||||
| i–♭VII(–♭VI) | Minor roots-reggae vamp |
|
||||
| I–IV–V | Ska/rocksteady standard |
|
||||
|
||||
### R&B / Neo-soul
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| ii7–V7–Imaj7 (with 9/11/13 extensions) | Core cadence |
|
||||
| iii7–vi7–ii7–V7 | Circle movement from the mediant — neo-soul staple |
|
||||
| vi–ii–V–I | "6-2-5-1" cyclical soul loop |
|
||||
| Imaj7–IVmaj7 / Imaj7–iii7 | Two-chord vamps |
|
||||
| i7–iv7 | Dorian D'Angelo-style minor vamp |
|
||||
|
||||
### Gospel
|
||||
| Progression | Name / notes |
|
||||
|---|---|
|
||||
| ii7–V7–I | The gospel "2-5-1", often chained: 6-2-5-1, 3-6-2-5-1 |
|
||||
| I–I7–IV | Tonicizing IV (V7/IV "amen" setup) |
|
||||
| IV–iv–I | Plagal with borrowed iv |
|
||||
| I–♯i°–ii | Chromatic passing-diminished walk-up |
|
||||
|
||||
## 2. Substitution / variation taxonomy
|
||||
|
||||
Progression "families" relate through a small set of transforms — these are the generation rules for variation buttons and the Builder:
|
||||
|
||||
1. **Rotation** — any loop can start on any chord (I–V–vi–IV ≡ vi–IV–I–V). Treat loops as cyclic equivalence classes; display the rotation matching the user's tonic emphasis. (`detectRepeatingProgression` already canonicalizes rotations.)
|
||||
2. **Diatonic (function) substitution** — chords sharing two notes swap: I↔vi↔iii (tonic), IV↔ii (subdominant), V↔vii° (dominant).
|
||||
3. **Modal interchange / borrowing** — take a chord from the parallel mode: iv, ♭VI, ♭VII, ♭III, iim7♭5 in major; major IV (Dorian) in minor.
|
||||
4. **Secondary dominants** — precede any diatonic target with its V7: V/V = II7, V/vi = III7, V/IV = I7, V/ii = VI7.
|
||||
5. **Tritone substitution** — replace any dominant with the dominant a tritone away (V7 → ♭II7). Jazz flavour flag.
|
||||
6. **Backdoor dominant** — ♭VII7 resolving to I, usually as ivm7–♭VII7–I.
|
||||
7. **Quality embellishment** — same root, richer colour: triad → 7th → 9/11/13, sus2/4, add9. The main axis distinguishing genres (pop = triads/sus, jazz/neo-soul/gospel = extensions, funk = dominant 9/♯9). Already partially covered by `CHORD_SUBSTITUTIONS` in `education.js`.
|
||||
8. **Passing/approach chords** — chromatic passing diminished (I–♯i°–ii), bass-line inversions (slash chords).
|
||||
|
||||
## 3. UX patterns worth copying
|
||||
|
||||
- **Hookpad (Hooktheory)** — *key-relative chord palette*: only the diatonic chords of the current key, colour-coded consistently per scale degree (key-agnostic colours). Borrowed chords live in expandable secondary palettes. *Magic Chord* suggests the statistically likeliest next chord. Drag-and-drop onto a timeline. → Direct model for the Progression Builder (GOAL G3).
|
||||
- **Hooktheory TheoryTab** — progressions ranked by real-song frequency; each links to songs using it. "You're playing the Creep progression" is a strong engagement hook (partially exists via `FAMOUS_PROGRESSIONS` song lists).
|
||||
- **Scaler 2/3** — three-zone vertical flow: detection area (top) → suggested chords/scales (middle) → user-built progression (bottom). Maps directly onto this app: live detection → suggestions → builder.
|
||||
- **iReal Pro** — one-tap transposition; per-genre rendering of the same progression.
|
||||
- **ToneGym** — instant audio preview when tapping any chord/progression.
|
||||
|
||||
## 4. Voicing data
|
||||
|
||||
### Guitar
|
||||
Best option found: [`tombatossals/chords-db`](https://github.com/tombatossals/chords-db) (MIT, npm `@tombatossals/chords-db`, prebuilt `lib/guitar.json`):
|
||||
- All 12 keys × large suffix list, **multiple positions per chord** (open + barre + higher CAGED positions).
|
||||
- Per position: `frets` (per string, `x` = mute, low-E first), `fingers`, optional `barres`, `baseFret`. Example: `{ frets: '55775x', fingers: '114310', barres: 5 }`.
|
||||
- Companion renderer: [`tombatossals/react-chords`](https://github.com/tombatossals/react-chords) (React SVG diagrams consuming this format).
|
||||
|
||||
Triads on string-sets (top-3 / middle-3) are *not* in chords-db but are cheap to generate: for each inversion of the triad, map the 3 chord tones onto a chosen string set within a 4-fret window. This complements the existing `GUITAR_SHAPES` in `src/lib/voicings.js`.
|
||||
|
||||
### Piano
|
||||
No canonical open dataset exists. The sane model is **interval recipes resolved per chord quality** (the chord templates in `theory.js` already encode quality → semitone mapping):
|
||||
|
||||
```js
|
||||
// voicing = named recipe of chord degrees, resolved per chord quality
|
||||
{
|
||||
shell: { LH: ['1', '7'], RH: ['3'] },
|
||||
rootPosition: { LH: ['1'], RH: ['1', '3', '5', '7'] },
|
||||
rootlessA: { LH: ['3', '5', '7', '9'] }, // Type A: 3rd on bottom
|
||||
rootlessB: { LH: ['7', '9', '3', '5'] }, // Type B: 7th on bottom
|
||||
guideTones: { LH: ['3', '7'] },
|
||||
}
|
||||
```
|
||||
|
||||
Conventions to encode: rootless voicings keep the top note between C4–C5; alternate Type A/B through a progression so inner voices barely move — i.e. pick the voicing minimizing semitone travel from the previous chord (simple voice-leading distance minimization).
|
||||
|
||||
## 5. Sources
|
||||
|
||||
- Hooktheory corpus & blog: hooktheory.com/blog/i-analyzed-the-chords-of-1300-popular-songs-for-patterns-this-is-what-i-found/ ; hooktheory.com/blog/jazz-chord-progressions/
|
||||
- 12-bar variants: en.wikipedia.org/wiki/Twelve-bar_blues ; happybluesman.com/common-variations-12-bar-blues/
|
||||
- Named progressions: en.wikipedia.org/wiki/%2750s_progression ; piano.org/chord-progressions/ ; supersimplepiano.com/learn/chord-progressions/royal-road
|
||||
- Substitutions: learnjazzstandards.com (chord substitution) ; hub.yamaha.com (beyond diatonic) ; hubguitar.com (tritone subs)
|
||||
- Gospel: gospelmaps.com/top-gospel-chord-progressions/ ; gospel.hearandplay.com (2-5-1)
|
||||
- Genre vamps: orphiq.com (reggae) ; guitar-chord.org/articles/funk.html ; orangecandymusic.com & pickupmusic.com (R&B/neo-soul)
|
||||
- Tools: producelikeapro.com (Scaler review) ; hooktheory.com/hookpad
|
||||
- Voicing data: github.com/tombatossals/chords-db ; github.com/tombatossals/react-chords ; voicinglab.com & pianowithjonny.com & thejazzpianosite.com (rootless voicings)
|
||||
+1
-1
@@ -23,7 +23,7 @@ function createWindow() {
|
||||
height: 900,
|
||||
minWidth: 620,
|
||||
minHeight: 600,
|
||||
title: 'WhatTheFlat',
|
||||
title: 'WhatTheFlat ♭? - JamBuddy',
|
||||
icon: path.join(__dirname, '../assets/whattheflat-logo.png'),
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.cjs'),
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'; connect-src 'self' http://localhost:5173 ws://localhost:5173; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
|
||||
<title>WhatTheFlat</title>
|
||||
<title>WhatTheFlat ♭? - JamBuddy</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Generated
+68
-4
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "whattheflat",
|
||||
"version": "0.1.0",
|
||||
"name": "jambuddy",
|
||||
"version": "0.6.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "whattheflat",
|
||||
"version": "0.1.0",
|
||||
"name": "jambuddy",
|
||||
"version": "0.6.2",
|
||||
"dependencies": {
|
||||
"audiomotion-analyzer": "^4.5.4",
|
||||
"pitchy": "^4.1.0",
|
||||
@@ -2189,6 +2189,70 @@
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
|
||||
"version": "1.8.1",
|
||||
"dev": true,
|
||||
"inBundle": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emnapi/wasi-threads": "1.1.0",
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
|
||||
"version": "1.8.1",
|
||||
"dev": true,
|
||||
"inBundle": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
|
||||
"version": "1.1.0",
|
||||
"dev": true,
|
||||
"inBundle": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
|
||||
"version": "1.1.1",
|
||||
"dev": true,
|
||||
"inBundle": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emnapi/core": "^1.7.1",
|
||||
"@emnapi/runtime": "^1.7.1",
|
||||
"@tybys/wasm-util": "^0.10.1"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/Brooooooklyn"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
|
||||
"version": "0.10.1",
|
||||
"dev": true,
|
||||
"inBundle": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"dev": true,
|
||||
"inBundle": true,
|
||||
"license": "0BSD",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.1.tgz",
|
||||
|
||||
+5
-5
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "whattheflat",
|
||||
"name": "jambuddy",
|
||||
"description": "A jam session companion app that provides a chromatic tuner, chord progressions, and more.",
|
||||
"version": "0.6.0",
|
||||
"version": "0.6.2",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "electron/main.cjs",
|
||||
@@ -13,7 +13,7 @@
|
||||
"electron:build": "vite build && electron-builder",
|
||||
"electron:build:win": "vite build && electron-builder --win --publish never",
|
||||
"electron:build:mac": "vite build && electron-builder --mac --publish never",
|
||||
"electron:build:linux": "vite build && electron-builder --linux"
|
||||
"electron:build:linux": "vite build && electron-builder --linux --publish never"
|
||||
},
|
||||
"dependencies": {
|
||||
"audiomotion-analyzer": "^4.5.4",
|
||||
@@ -34,8 +34,8 @@
|
||||
"wait-on": "^9.0.4"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.whattheflat.app",
|
||||
"productName": "WhatTheFlat",
|
||||
"appId": "com.jambuddy.app",
|
||||
"productName": "JamBuddy",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"electron/**/*",
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
// KB quality gate — validates src/data/kb/ against the contract in src/data/kb/SCHEMA.md.
|
||||
// Run: node scripts/validate-kb.mjs (exit 1 on any error)
|
||||
import { readdirSync, existsSync } from 'node:fs'
|
||||
import { fileURLToPath, pathToFileURL } from 'node:url'
|
||||
import { dirname, join } from 'node:path'
|
||||
import { CHORD_TYPES } from '../src/lib/theory.js'
|
||||
|
||||
const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..')
|
||||
const KB = join(ROOT, 'src', 'data', 'kb')
|
||||
|
||||
const MODES = ['major', 'minor', 'dorian', 'phrygian', 'lydian', 'mixolydian']
|
||||
const OPEN_PC = [4, 9, 2, 7, 11, 4] // EADGBe low-E first
|
||||
const PERFECT_FIFTH = 7
|
||||
const BASS_TOKENS = ['R', 'b3', '3', '5', '6', 'b7', '7', '9', 'O', 'chrom>', 'chrom<', '5>', 'x', '-']
|
||||
const MIN_PROGRESSIONS = 4
|
||||
const MIN_PLAYS = 2
|
||||
const MAX_SPAN = 4
|
||||
|
||||
const errors = []
|
||||
const err = (where, msg) => errors.push(`${where}: ${msg}`)
|
||||
|
||||
// Resolve a degree string ('3', 'b9', '13'…) to a pitch class relative to the
|
||||
// chord root, through the quality's intervals where the degree is quality-dependent.
|
||||
function resolveDegree(deg, quality) {
|
||||
const iv = CHORD_TYPES[quality].intervals
|
||||
const fixed = { 1: 0, b9: 1, 9: 2, '#9': 3, 11: 5, '#11': 6, b5: 6, b13: 8, 13: 9, 6: 9, b3: 3, b7: 10 }
|
||||
if (deg === '3') return iv.find(i => i === 3 || i === 4) ?? iv.find(i => i === 2 || i === 5) ?? null
|
||||
if (deg === '5') return iv.find(i => i === 6 || i === 7 || i === 8) ?? null
|
||||
if (deg === '7') return iv.find(i => i === 9 || i === 10 || i === 11) ?? null
|
||||
return fixed[deg] ?? null
|
||||
}
|
||||
|
||||
function checkGuitarShape(where, chordStep, quality) {
|
||||
const { shape, extensions = [] } = chordStep
|
||||
if (!shape) return err(where, 'missing shape')
|
||||
const strings = shape.offsets ?? shape.frets
|
||||
if (!Array.isArray(strings) || strings.length !== 6)
|
||||
return err(where, 'offsets/frets must be an array of 6 (low E first)')
|
||||
const isMovable = !!shape.offsets
|
||||
|
||||
if (isMovable) {
|
||||
if (!(shape.rootStr >= 1 && shape.rootStr <= 6)) return err(where, `bad rootStr ${shape.rootStr}`)
|
||||
if (strings[6 - shape.rootStr] !== 0) return err(where, 'offset on the root string must be 0')
|
||||
} else {
|
||||
if (!(shape.onlyRoot >= 0 && shape.onlyRoot <= 11)) return err(where, 'open shape needs onlyRoot (pc 0-11)')
|
||||
}
|
||||
|
||||
const fretted = strings.filter(f => f !== 'x')
|
||||
if (fretted.some(f => !Number.isInteger(f) || f < -2 || f > 15))
|
||||
return err(where, `bad fret values: ${JSON.stringify(strings)}`)
|
||||
const nonOpen = fretted.filter(f => f !== 0)
|
||||
if (nonOpen.length && Math.max(...nonOpen) - Math.min(...nonOpen) > MAX_SPAN)
|
||||
return err(where, `fret span > ${MAX_SPAN} — not intermediate-friendly`)
|
||||
|
||||
// Pitch-class verification: every sounded note must belong to the chord
|
||||
// (quality intervals + declared extensions); defining tones must be present.
|
||||
const iv = CHORD_TYPES[quality].intervals
|
||||
const allowed = new Set(iv)
|
||||
for (const ext of extensions) {
|
||||
const pc = resolveDegree(ext, quality)
|
||||
if (pc === null) return err(where, `unresolvable extension '${ext}' for ${quality}`)
|
||||
allowed.add(pc)
|
||||
}
|
||||
const rootRel = isMovable ? (12 - OPEN_PC[6 - shape.rootStr]) % 12 : null
|
||||
const sounded = new Set()
|
||||
strings.forEach((f, i) => {
|
||||
if (f === 'x') return
|
||||
const pc = isMovable
|
||||
? (OPEN_PC[i] + rootRel + f + 24) % 12
|
||||
: (OPEN_PC[i] + f - shape.onlyRoot + 24) % 12
|
||||
sounded.add(pc)
|
||||
})
|
||||
for (const pc of sounded)
|
||||
if (!allowed.has(pc)) return err(where, `sounded pc ${pc} is not in ${quality} (+ext) — shape misspells the chord`)
|
||||
const required = iv.filter(i =>
|
||||
i !== PERFECT_FIFTH
|
||||
&& !(chordStep.rootless && i === 0)
|
||||
&& !(chordStep.omit3 && (i === 3 || i === 4)))
|
||||
for (const pc of required)
|
||||
if (!sounded.has(pc)) return err(where, `defining tone pc ${pc} of ${quality} missing from shape`)
|
||||
}
|
||||
|
||||
function checkPianoRecipe(where, chordStep, quality) {
|
||||
const { recipe } = chordStep
|
||||
if (!recipe) return err(where, 'missing recipe')
|
||||
for (const hand of ['LH', 'RH']) {
|
||||
const degs = recipe[hand]
|
||||
if (degs === undefined) continue
|
||||
if (!Array.isArray(degs) || !degs.length) return err(where, `${hand} must be a non-empty array`)
|
||||
if (degs.length > 5) return err(where, `${hand} has ${degs.length} notes — one hand, max 5`)
|
||||
for (const d of degs)
|
||||
if (resolveDegree(d, quality) === null) err(where, `unresolvable degree '${d}' for ${quality}`)
|
||||
}
|
||||
if (recipe.LH === undefined && recipe.RH === undefined) err(where, 'recipe needs LH and/or RH')
|
||||
}
|
||||
|
||||
function checkBassPlay(where, play, prog) {
|
||||
const totalBars = prog.bars.reduce((a, b) => a + b, 0)
|
||||
if (!Array.isArray(play.bars) || play.bars.length !== totalBars)
|
||||
return err(where, `bars length ${play.bars?.length} ≠ progression total ${totalBars}`)
|
||||
play.bars.forEach((bar, i) => {
|
||||
if (!Array.isArray(bar.beats) || !bar.beats.length) return err(`${where} bar ${i}`, 'missing beats')
|
||||
for (const b of bar.beats)
|
||||
if (!BASS_TOKENS.includes(b)) err(`${where} bar ${i}`, `unknown beat token '${b}'`)
|
||||
})
|
||||
}
|
||||
|
||||
async function loadModule(path) {
|
||||
return (await import(pathToFileURL(path).href)).default
|
||||
}
|
||||
|
||||
const styleDirs = readdirSync(KB, { withFileTypes: true }).filter(d => d.isDirectory()).map(d => d.name)
|
||||
if (!styleDirs.length) { console.error('No style folders in src/data/kb/'); process.exit(1) }
|
||||
|
||||
const registry = existsSync(join(KB, 'index.js')) ? await loadModule(join(KB, 'index.js')) : null
|
||||
if (!registry) err('kb/index.js', 'registry missing')
|
||||
|
||||
const allIds = new Set()
|
||||
let totals = { styles: 0, progressions: 0, plays: 0 }
|
||||
|
||||
for (const style of styleDirs) {
|
||||
const dir = join(KB, style)
|
||||
const w = `kb/${style}`
|
||||
if (registry && !registry[style]) err('kb/index.js', `style '${style}' not registered`)
|
||||
|
||||
const meta = existsSync(join(dir, 'meta.js')) ? await loadModule(join(dir, 'meta.js')) : null
|
||||
if (!meta) { err(w, 'meta.js missing'); continue }
|
||||
if (meta.id !== style) err(`${w}/meta.js`, `id '${meta.id}' ≠ folder '${style}'`)
|
||||
for (const f of ['label', 'feel', 'character']) if (!meta[f]) err(`${w}/meta.js`, `missing ${f}`)
|
||||
|
||||
const progs = existsSync(join(dir, 'progressions.js')) ? await loadModule(join(dir, 'progressions.js')) : null
|
||||
if (!Array.isArray(progs) || !progs.length) { err(w, 'progressions.js missing/empty'); continue }
|
||||
if (progs.length < MIN_PROGRESSIONS) err(w, `${progs.length} progressions < ${MIN_PROGRESSIONS}`)
|
||||
|
||||
const progById = {}
|
||||
for (const p of progs) {
|
||||
const pw = `${w}/progressions.js [${p.id}]`
|
||||
if (!p.id?.startsWith(`${style}-`)) err(pw, `id must start with '${style}-'`)
|
||||
if (allIds.has(p.id)) err(pw, 'duplicate id'); allIds.add(p.id)
|
||||
progById[p.id] = p
|
||||
const n = p.degrees?.length
|
||||
if (!n) { err(pw, 'degrees missing'); continue }
|
||||
for (const [field, arr] of [['rn', p.rn], ['qualities', p.qualities], ['bars', p.bars]])
|
||||
if (!Array.isArray(arr) || arr.length !== n) err(pw, `${field} length ≠ degrees length`)
|
||||
if (p.degrees.some(d => !Number.isInteger(d) || d < 0 || d > 11)) err(pw, 'degrees must be ints 0-11')
|
||||
for (const q of p.qualities ?? []) if (!CHORD_TYPES[q]) err(pw, `unknown quality '${q}'`)
|
||||
if (!MODES.includes(p.mode)) err(pw, `unknown mode '${p.mode}'`)
|
||||
if (!Array.isArray(p.songs) || !p.songs.length) err(pw, 'songs missing')
|
||||
if (!p.tip) err(pw, 'tip missing')
|
||||
}
|
||||
totals.styles++; totals.progressions += progs.length
|
||||
|
||||
for (const inst of ['guitar', 'piano', 'bass']) {
|
||||
const file = join(dir, `${inst}.js`)
|
||||
if (!existsSync(file)) continue
|
||||
const pack = await loadModule(file)
|
||||
const iw = `${w}/${inst}.js`
|
||||
if (!pack.styleIntro) err(iw, 'styleIntro missing')
|
||||
if (!Array.isArray(pack.comping) || !pack.comping.length) err(iw, 'comping missing')
|
||||
if (inst !== 'bass' && (!pack.improv?.scales?.length || !pack.improv?.targetNotes))
|
||||
err(iw, 'improv.scales / improv.targetNotes required')
|
||||
|
||||
for (const p of progs)
|
||||
if ((pack.plays?.[p.id]?.length ?? 0) < MIN_PLAYS)
|
||||
err(iw, `progression '${p.id}' has < ${MIN_PLAYS} plays`)
|
||||
|
||||
for (const [pid, plays] of Object.entries(pack.plays ?? {})) {
|
||||
const prog = progById[pid]
|
||||
if (!prog) { err(iw, `plays key '${pid}' is not a progression of this style`); continue }
|
||||
plays.forEach((play, pi) => {
|
||||
const lw = `${iw} ${pid} play[${pi}] "${play.label ?? '?'}"`
|
||||
if (!play.label || !play.level || !play.tips) err(lw, 'label/level/tips required')
|
||||
totals.plays++
|
||||
if (inst === 'bass') return checkBassPlay(lw, play, prog)
|
||||
if (!Array.isArray(play.chords) || play.chords.length !== prog.degrees.length)
|
||||
return err(lw, `chords length ≠ progression length ${prog.degrees.length}`)
|
||||
play.chords.forEach((step, ci) => {
|
||||
const cw = `${lw} chord[${ci}] (${prog.rn[ci]})`
|
||||
if (inst === 'guitar') checkGuitarShape(cw, step, prog.qualities[ci])
|
||||
else checkPianoRecipe(cw, step, prog.qualities[ci])
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length) {
|
||||
console.error(`✗ KB validation failed — ${errors.length} error(s):\n`)
|
||||
for (const e of errors) console.error(' ' + e)
|
||||
process.exit(1)
|
||||
}
|
||||
console.log(`✓ KB valid — ${totals.styles} style(s), ${totals.progressions} progressions, ${totals.plays} plays`)
|
||||
+161
-58
@@ -3,13 +3,18 @@ import AudioCapture from './components/AudioCapture'
|
||||
import ProgressionBanner from './components/ProgressionBanner'
|
||||
import ProgressionSuggestions from './components/ProgressionSuggestions'
|
||||
import Fretboard from './components/Fretboard'
|
||||
import BassFretboard from './components/BassFretboard'
|
||||
import Tuner from './components/Tuner'
|
||||
import Piano from './components/Piano'
|
||||
import Settings from './components/Settings'
|
||||
import DebugView from './components/DebugView'
|
||||
import DrumView from './components/DrumView'
|
||||
import { NOTES, detectKey, detectTopKeys, matchChordFromChroma, detectRepeatingProgression, getChordTones, getChordCandidates, getNoteHistoryAnalysis } from './lib/theory'
|
||||
import ChordDetailModal from './components/ChordDetailModal'
|
||||
import CurrentJamPanel from './components/CurrentJamPanel'
|
||||
import LoopStation from './components/LoopStation'
|
||||
import { useLoopEngine } from './services/loopEngine'
|
||||
import settingIcon from './assets/setting-icon.png'
|
||||
import viewIcon from './assets/view.png'
|
||||
|
||||
const DEFAULTS = {
|
||||
// Key detection
|
||||
@@ -24,13 +29,20 @@ const DEFAULTS = {
|
||||
// Audio input
|
||||
minClarity: 0.80,
|
||||
minVolume: 0.01,
|
||||
// Selected device (null = system default)
|
||||
audioDeviceId: null,
|
||||
}
|
||||
|
||||
function loadStored(key, fallback) {
|
||||
try { const v = localStorage.getItem(key); return v !== null ? JSON.parse(v) : fallback }
|
||||
catch { return fallback }
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
// ── Config ───────────────────────────────────────────────────────────────────
|
||||
const [config, setConfig] = useState(DEFAULTS)
|
||||
const configRef = useRef(DEFAULTS)
|
||||
useEffect(() => { configRef.current = config }, [config])
|
||||
const [config, setConfig] = useState(() => ({ ...DEFAULTS, ...loadStored('wtf_config', {}) }))
|
||||
const configRef = useRef(config)
|
||||
useEffect(() => { configRef.current = config; localStorage.setItem('wtf_config', JSON.stringify(config)) }, [config])
|
||||
|
||||
const [showSettings, setShowSettings] = useState(false)
|
||||
|
||||
@@ -42,10 +54,11 @@ export default function App() {
|
||||
const [isListening, setIsListening] = useState(false)
|
||||
|
||||
// ── Instrument view + tuner ───────────────────────────────────────────────────
|
||||
const [instrument, setInstrument] = useState('guitar') // 'guitar' | 'piano'
|
||||
const [instrument, setInstrument] = useState('piano') // 'piano' | 'guitar' | 'bass'
|
||||
const [showTuner, setShowTuner] = useState(false)
|
||||
const [showDebug, setShowDebug] = useState(false)
|
||||
const [monoColor, setMonoColor] = useState(false)
|
||||
const [showDebug, setShowDebug] = useState(false)
|
||||
const [showDrumView, setShowDrumView] = useState(false)
|
||||
const [monoColor, setMonoColor] = useState(() => loadStored('wtf_monoColor', false))
|
||||
|
||||
// ── Mic permission error ──────────────────────────────────────────────────────
|
||||
const [micError, setMicError] = useState(null)
|
||||
@@ -54,17 +67,40 @@ export default function App() {
|
||||
const [debugChroma, setDebugChroma] = useState(null)
|
||||
const [debugCandidates, setDebugCandidates] = useState([])
|
||||
const [debugNoteAnalysis, setDebugNoteAnalysis] = useState(null)
|
||||
const [debugWaveform, setDebugWaveform] = useState(null)
|
||||
|
||||
// ── Stable refs for values used inside callbacks ──────────────────────────────
|
||||
const showDebugRef = useRef(showDebug)
|
||||
const lockedKeyRef = useRef(null)
|
||||
const showDebugRef = useRef(showDebug)
|
||||
const showDrumViewRef = useRef(showDrumView)
|
||||
const lockedKeyRef = useRef(null)
|
||||
const listenStartRef = useRef(null)
|
||||
useEffect(() => { showDebugRef.current = showDebug }, [showDebug])
|
||||
useEffect(() => { showDrumViewRef.current = showDrumView }, [showDrumView])
|
||||
useEffect(() => { localStorage.setItem('wtf_monoColor', JSON.stringify(monoColor)) }, [monoColor])
|
||||
useEffect(() => { if (isListening) listenStartRef.current = Date.now() }, [isListening])
|
||||
|
||||
// ── BPM estimation from onset timestamps ─────────────────────────────────────
|
||||
const [bpm, setBpm] = useState(null)
|
||||
const onsetTimestampsRef = useRef([])
|
||||
const bpmSmoothRef = useRef(null)
|
||||
|
||||
// ── Loop station ─────────────────────────────────────────────────────────────
|
||||
const {
|
||||
slots,
|
||||
masterLen,
|
||||
setStream: loopSetStream,
|
||||
handleSlotClick,
|
||||
commitTrim,
|
||||
cancelRecord,
|
||||
retrimSlot,
|
||||
deleteSlot,
|
||||
setVolume: loopSetVolume,
|
||||
addSlot: loopAddSlot,
|
||||
audioCtxRef: loopAudioCtxRef,
|
||||
masterStartRef: loopMasterStartRef,
|
||||
masterLenRef: loopMasterLenRef,
|
||||
} = useLoopEngine(bpm)
|
||||
|
||||
// ── Key: auto-detected + optional lock ───────────────────────────────────────
|
||||
const [keyInfo, setKeyInfo] = useState(null) // auto-detected
|
||||
const [lockedKey, setLockedKey] = useState(null) // { root, mode } or null
|
||||
@@ -77,6 +113,7 @@ export default function App() {
|
||||
// ── Chord state ───────────────────────────────────────────────────────────────
|
||||
const [chordHistory, setChordHistory] = useState([])
|
||||
const [detectedProgression, setDetectedProgression] = useState(null)
|
||||
const [selectedChord, setSelectedChord] = useState(null)
|
||||
|
||||
// ── Top key candidates (shown as quick-lock chips) ────────────────────────────
|
||||
const [topKeyCandidates, setTopKeyCandidates] = useState([])
|
||||
@@ -91,6 +128,7 @@ export default function App() {
|
||||
const chromaIdxRef = useRef(0)
|
||||
const chordVotesRef = useRef([])
|
||||
const progressionVoteRef = useRef(null)
|
||||
const progressionMissRef = useRef(0)
|
||||
const pendingKeyRef = useRef(null)
|
||||
|
||||
// Keep refs in sync
|
||||
@@ -108,7 +146,16 @@ export default function App() {
|
||||
// ── Detect progression — require 2 consecutive identical results to commit ────
|
||||
useEffect(() => {
|
||||
const detected = detectRepeatingProgression(chordHistory)
|
||||
if (!detected) return
|
||||
if (!detected) {
|
||||
progressionMissRef.current++
|
||||
// Clear stale loop after 4 chord changes with no pattern found
|
||||
if (progressionMissRef.current >= 4) {
|
||||
setDetectedProgression(null)
|
||||
progressionVoteRef.current = null
|
||||
}
|
||||
return
|
||||
}
|
||||
progressionMissRef.current = 0
|
||||
const key = detected.join(',')
|
||||
if (progressionVoteRef.current === key) {
|
||||
setDetectedProgression(detected)
|
||||
@@ -124,11 +171,13 @@ export default function App() {
|
||||
keyVotesRef.current = []
|
||||
chordVotesRef.current = []
|
||||
progressionVoteRef.current = null
|
||||
progressionMissRef.current = 0
|
||||
pendingKeyRef.current = null
|
||||
chromaIdxRef.current = 0
|
||||
chromaRingRef.current = Array.from({ length: cfg.chromaSmooth }, () => new Float32Array(12))
|
||||
onsetTimestampsRef.current = []
|
||||
bpmSmoothRef.current = null
|
||||
listenStartRef.current = Date.now()
|
||||
setKeyInfo(null)
|
||||
setLockedKey(null)
|
||||
effectiveKeyRef.current = null
|
||||
@@ -140,6 +189,7 @@ export default function App() {
|
||||
setDebugChroma(null)
|
||||
setDebugCandidates([])
|
||||
setDebugNoteAnalysis(null)
|
||||
setDebugWaveform(null)
|
||||
}
|
||||
|
||||
// ── Key lock handlers ─────────────────────────────────────────────────────────
|
||||
@@ -162,6 +212,13 @@ export default function App() {
|
||||
effectiveKeyRef.current = keyInfo
|
||||
}
|
||||
|
||||
// ── Waveform handler: feeds oscilloscope / drum view ─────────────────────────
|
||||
const handleWaveform = useCallback((data) => {
|
||||
if (showDebugRef.current || showDrumViewRef.current) {
|
||||
setDebugWaveform({ ...data, onsets: [...onsetTimestampsRef.current] })
|
||||
}
|
||||
}, [])
|
||||
|
||||
// ── Note handler: drives key detection (pitch-based) ──────────────────────────
|
||||
const handleNote = useCallback(({ pitchClass }) => {
|
||||
const cfg = configRef.current
|
||||
@@ -173,7 +230,11 @@ export default function App() {
|
||||
|
||||
const result = detectKey(history)
|
||||
setTopKeyCandidates(detectTopKeys(history))
|
||||
if (showDebugRef.current) setDebugNoteAnalysis(getNoteHistoryAnalysis(history))
|
||||
if (showDebugRef.current) {
|
||||
const analysis = getNoteHistoryAnalysis(history)
|
||||
analysis.sessionSecs = listenStartRef.current ? Math.floor((Date.now() - listenStartRef.current) / 1000) : 0
|
||||
setDebugNoteAnalysis(analysis)
|
||||
}
|
||||
if (result.confidence < 0.5) return
|
||||
|
||||
const votes = keyVotesRef.current
|
||||
@@ -225,7 +286,7 @@ export default function App() {
|
||||
|
||||
if (showDebugRef.current) {
|
||||
setDebugChroma([...avg])
|
||||
setDebugCandidates(getChordCandidates(avg, key, bassPC))
|
||||
setDebugCandidates(getChordCandidates(avg, key, bassPC, 5))
|
||||
}
|
||||
|
||||
// Stability gate — if chroma is still changing across frames, we're mid-transition.
|
||||
@@ -236,10 +297,7 @@ export default function App() {
|
||||
for (const frame of ring) { const d = frame[i] - avg[i]; v += d * d }
|
||||
if (v / cfg.chromaSmooth > maxVar) maxVar = v / cfg.chromaSmooth
|
||||
}
|
||||
if (maxVar > 0.05) {
|
||||
chordVotesRef.current = []
|
||||
return
|
||||
}
|
||||
if (maxVar > 0.05) return
|
||||
|
||||
const chord = matchChordFromChroma(avg, key, bassPC, false, cfg.chordMinScore)
|
||||
if (!chord) {
|
||||
@@ -255,7 +313,7 @@ export default function App() {
|
||||
const winner = votes[0]
|
||||
setChordHistory(prev => {
|
||||
if (prev[prev.length - 1] === winner) return prev
|
||||
return [...prev.slice(-30), winner]
|
||||
return [...prev.slice(-48), winner]
|
||||
})
|
||||
|
||||
// Inject chord tones into note history to anchor key detection
|
||||
@@ -322,7 +380,9 @@ export default function App() {
|
||||
config={config}
|
||||
onChange={updateConfig}
|
||||
onClose={() => setShowSettings(false)}
|
||||
onReset={() => setConfig(DEFAULTS)}
|
||||
onReset={() => { setConfig(DEFAULTS); setMonoColor(false) }}
|
||||
monoColor={monoColor}
|
||||
onMonoColorChange={setMonoColor}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -334,28 +394,11 @@ export default function App() {
|
||||
<header className="mb-2 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-accent">
|
||||
WhatTheFlat <span className="text-gray-600">♭?</span>
|
||||
WhatTheFlat <span className="text-gray-600">♭?</span> <span className="text-amber-400">- JamBuddy</span>
|
||||
</h1>
|
||||
<p className="text-xs text-gray-600">Real-time key detection for live jams</p>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<button
|
||||
onClick={() => setMonoColor(v => !v)}
|
||||
className={`p-2 rounded-full border transition-all ${monoColor ? 'border-accent bg-accent/10' : 'border-border hover:border-gray-400'}`}
|
||||
title="Mono color mode"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ opacity: 0.75 }}>
|
||||
<circle cx="6" cy="10" r="4" fill={monoColor ? '#a855f7' : '#a855f7'} />
|
||||
<circle cx="13" cy="10" r="4" fill={monoColor ? '#c084fc' : '#f59e0b'} />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDebug(v => !v)}
|
||||
className={`p-2 rounded-full border transition-all ${showDebug ? 'border-accent bg-accent/10' : 'border-border hover:border-gray-400'}`}
|
||||
title="Behind the scenes"
|
||||
>
|
||||
<img src={viewIcon} alt="Debug view" className="w-5 h-5" style={{ filter: 'invert(1) opacity(0.75)' }} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowSettings(true)}
|
||||
className="p-2 rounded-full border border-border hover:border-gray-400 transition-all"
|
||||
@@ -393,8 +436,9 @@ export default function App() {
|
||||
onChange={e => setInstrument(e.target.value)}
|
||||
className="appearance-none bg-surface border border-border hover:border-gray-500 focus:border-accent focus:outline-none rounded-lg pl-3 pr-7 py-1 text-sm text-gray-200 cursor-pointer transition-colors"
|
||||
>
|
||||
<option value="guitar">Guitar</option>
|
||||
<option value="piano">Piano</option>
|
||||
<option value="guitar">Guitar</option>
|
||||
<option value="bass">Bass</option>
|
||||
</select>
|
||||
<span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 text-xs">▾</span>
|
||||
</div>
|
||||
@@ -490,13 +534,16 @@ export default function App() {
|
||||
onNote={handleNote}
|
||||
onChroma={handleChroma}
|
||||
onOnset={handleOnset}
|
||||
onWaveform={handleWaveform}
|
||||
isListening={isListening}
|
||||
minClarity={config.minClarity}
|
||||
minVolume={config.minVolume}
|
||||
audioDeviceId={config.audioDeviceId}
|
||||
onPermissionError={() => {
|
||||
setMicError(true)
|
||||
setIsListening(false)
|
||||
}}
|
||||
onStreamReady={loopSetStream}
|
||||
/>
|
||||
|
||||
{micError && (
|
||||
@@ -506,21 +553,24 @@ export default function App() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Chord detail modal ── */}
|
||||
<ChordDetailModal chord={selectedChord} onClose={() => setSelectedChord(null)} onChordClick={setSelectedChord} keyInfo={effectiveKey} chordHistory={chordHistory} />
|
||||
|
||||
{/* ── Progression banner ── */}
|
||||
<ProgressionBanner
|
||||
chordHistory={chordHistory}
|
||||
keyInfo={effectiveKey}
|
||||
detectedProgression={detectedProgression}
|
||||
currentChord={currentChord}
|
||||
onChordClick={setSelectedChord}
|
||||
/>
|
||||
|
||||
{/* ── Instrument + progressions row ── */}
|
||||
<div className="flex gap-3 mb-3 items-stretch">
|
||||
<div className="w-full lg:w-[70%] min-w-0">
|
||||
{instrument === 'guitar'
|
||||
? <Fretboard keyInfo={effectiveKey} currentChord={currentChord} pentatonicOnly={false} monoColor={monoColor} />
|
||||
: <Piano keyInfo={effectiveKey} currentChord={currentChord} monoColor={monoColor} />
|
||||
}
|
||||
{instrument === 'guitar' && <Fretboard keyInfo={effectiveKey} currentChord={currentChord} pentatonicOnly={false} monoColor={monoColor} />}
|
||||
{instrument === 'bass' && <BassFretboard keyInfo={effectiveKey} currentChord={currentChord} monoColor={monoColor} />}
|
||||
{instrument === 'piano' && <Piano keyInfo={effectiveKey} currentChord={currentChord} monoColor={monoColor} />}
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:block w-[30%] min-w-0 relative">
|
||||
@@ -530,30 +580,83 @@ export default function App() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Behind the scenes debug view ── */}
|
||||
{showDebug && (
|
||||
<div className="mb-3">
|
||||
<DebugView
|
||||
chroma={debugChroma}
|
||||
chordCandidates={debugCandidates}
|
||||
noteAnalysis={debugNoteAnalysis}
|
||||
keyInfo={effectiveKey}
|
||||
currentChord={currentChord}
|
||||
instrument={instrument}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Current jam — collapsible ── */}
|
||||
<CurrentJamPanel
|
||||
keyInfo={effectiveKey}
|
||||
chordHistory={chordHistory}
|
||||
detectedProgression={detectedProgression}
|
||||
onChordClick={setSelectedChord}
|
||||
/>
|
||||
|
||||
{/* ── Loop station ── */}
|
||||
<LoopStation
|
||||
slots={slots}
|
||||
bpm={bpm}
|
||||
masterLen={masterLen}
|
||||
audioCtxRef={loopAudioCtxRef}
|
||||
masterStartRef={loopMasterStartRef}
|
||||
masterLenRef={loopMasterLenRef}
|
||||
onSlotClick={handleSlotClick}
|
||||
onCommitTrim={commitTrim}
|
||||
onCancelRecord={cancelRecord}
|
||||
onRetrim={retrimSlot}
|
||||
onDelete={deleteSlot}
|
||||
onVolumeChange={loopSetVolume}
|
||||
onAddSlot={loopAddSlot}
|
||||
/>
|
||||
|
||||
{/* ── Behind the scenes — collapsible ── */}
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setShowDebug(v => !v)}
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
|
||||
>
|
||||
<span>BEHIND THE SCENES</span>
|
||||
<span>{showDebug ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
{showDebug && (
|
||||
<div className="border-t border-border p-4">
|
||||
<DebugView
|
||||
chroma={debugChroma}
|
||||
chordCandidates={debugCandidates}
|
||||
noteAnalysis={debugNoteAnalysis}
|
||||
waveform={debugWaveform}
|
||||
keyInfo={effectiveKey}
|
||||
currentChord={currentChord}
|
||||
instrument={instrument}
|
||||
monoColor={monoColor}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Rhythm / drum analyser — collapsible ── */}
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setShowDrumView(v => !v)}
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
|
||||
>
|
||||
<span>RHYTHM ANALYSER</span>
|
||||
<span>{showDrumView ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
{showDrumView && (
|
||||
<div className="border-t border-border p-4">
|
||||
<DrumView waveform={debugWaveform} bpm={bpm} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Tuner — collapsible ── */}
|
||||
<div>
|
||||
<div className="bg-panel border border-border rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setShowTuner(v => !v)}
|
||||
className="w-full flex items-center justify-between px-4 py-2 bg-panel border border-border rounded-xl text-sm text-gray-400 hover:text-gray-200 hover:border-gray-500 transition-all"
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
|
||||
>
|
||||
<span>Tuner</span>
|
||||
<span>TUNER</span>
|
||||
<span>{showTuner ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
{showTuner && <div className="mt-2"><Tuner /></div>}
|
||||
{showTuner && <div className="border-t border-border"><Tuner /></div>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -81,7 +81,7 @@ function detectBassPC(freqData, sampleRate, fftSize) {
|
||||
return ((bestMidi % 12) + 12) % 12
|
||||
}
|
||||
|
||||
export default function AudioCapture({ onNote, onChroma, onOnset, isListening, minClarity = 0.80, minVolume = 0.01, onPermissionError }) {
|
||||
export default function AudioCapture({ onNote, onChroma, onOnset, onWaveform, isListening, minClarity = 0.80, minVolume = 0.01, onPermissionError, audioDeviceId = null, onStreamReady = null }) {
|
||||
const audioCtxRef = useRef(null)
|
||||
const timeBufRef = useRef(null)
|
||||
const freqBufRef = useRef(null)
|
||||
@@ -94,20 +94,26 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
|
||||
const onNoteRef = useRef(onNote)
|
||||
const onChromaRef = useRef(onChroma)
|
||||
const onOnsetRef = useRef(onOnset)
|
||||
const onWaveformRef = useRef(onWaveform)
|
||||
const onPermissionErrorRef = useRef(onPermissionError)
|
||||
const onStreamReadyRef = useRef(onStreamReady)
|
||||
const minClarityRef = useRef(minClarity)
|
||||
const minVolumeRef = useRef(minVolume)
|
||||
const smoothRmsRef = useRef(0)
|
||||
const lastOnsetRef = useRef(0)
|
||||
const specPeakRef = useRef(null) // peak-hold spectrum for display lingering
|
||||
useEffect(() => { onNoteRef.current = onNote }, [onNote])
|
||||
useEffect(() => { onChromaRef.current = onChroma }, [onChroma])
|
||||
useEffect(() => { onOnsetRef.current = onOnset }, [onOnset])
|
||||
useEffect(() => { onWaveformRef.current = onWaveform }, [onWaveform])
|
||||
useEffect(() => { onPermissionErrorRef.current = onPermissionError }, [onPermissionError])
|
||||
useEffect(() => { onStreamReadyRef.current = onStreamReady }, [onStreamReady])
|
||||
useEffect(() => { minClarityRef.current = minClarity }, [minClarity])
|
||||
useEffect(() => { minVolumeRef.current = minVolume }, [minVolume])
|
||||
|
||||
const stop = useCallback(() => {
|
||||
activeRef.current = false
|
||||
specPeakRef.current = null
|
||||
if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null }
|
||||
if (streamRef.current) { streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null }
|
||||
if (audioCtxRef.current) { audioCtxRef.current.close(); audioCtxRef.current = null }
|
||||
@@ -117,13 +123,40 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
|
||||
stop()
|
||||
let stream
|
||||
try {
|
||||
stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
// Helpful debug: list available media devices before requesting permission
|
||||
try {
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
|
||||
const devices = await navigator.mediaDevices.enumerateDevices()
|
||||
const audioIns = devices.filter(d => d.kind === 'audioinput')
|
||||
console.log('Audio inputs available:', audioIns)
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('enumerateDevices failed', e)
|
||||
}
|
||||
|
||||
const constraints = audioDeviceId
|
||||
? { audio: { deviceId: { exact: audioDeviceId } } }
|
||||
: { audio: true }
|
||||
|
||||
console.log('Requesting getUserMedia with constraints:', constraints)
|
||||
stream = await navigator.mediaDevices.getUserMedia(constraints)
|
||||
} catch (err) {
|
||||
// If permission denied or other error, surface extra diagnostics when possible
|
||||
console.warn('getUserMedia failed', err)
|
||||
try {
|
||||
if (navigator.permissions && navigator.permissions.query) {
|
||||
const p = await navigator.permissions.query({ name: 'microphone' })
|
||||
console.log('microphone permission state:', p.state)
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore; not all environments support Permissions API for microphone
|
||||
}
|
||||
onPermissionErrorRef.current?.(err)
|
||||
return
|
||||
}
|
||||
streamRef.current = stream
|
||||
activeRef.current = true
|
||||
onStreamReadyRef.current?.(stream)
|
||||
smoothRmsRef.current = 0
|
||||
lastOnsetRef.current = 0
|
||||
|
||||
@@ -131,6 +164,14 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
|
||||
audioCtxRef.current = ctx
|
||||
const source = ctx.createMediaStreamSource(stream)
|
||||
|
||||
// Debug: log the acquired audio tracks and labels/deviceIds
|
||||
try {
|
||||
const tracks = stream.getAudioTracks()
|
||||
console.log('Acquired audio tracks:', tracks.map(t => ({ label: t.label, id: t.id, enabled: t.enabled, muted: t.muted })))
|
||||
} catch (e) {
|
||||
console.warn('Could not inspect stream tracks', e)
|
||||
}
|
||||
|
||||
// Small analyser — pitch detection needs fast time-domain data
|
||||
const pa = ctx.createAnalyser()
|
||||
pa.fftSize = PITCH_FFT
|
||||
@@ -163,6 +204,46 @@ export default function AudioCapture({ onNote, onChroma, onOnset, isListening, m
|
||||
onOnsetRef.current?.()
|
||||
}
|
||||
|
||||
// Always fire waveform callback — downsample 4096 → 512 points + log-binned spectrum
|
||||
if (onWaveformRef.current) {
|
||||
const stride = 8 // 4096 / 8 = 512 points
|
||||
const wave = new Float32Array(PITCH_FFT / stride)
|
||||
for (let i = 0; i < wave.length; i++) wave[i] = timeBuf[i * stride]
|
||||
|
||||
// Log-binned frequency spectrum: 256 bins from 40 Hz → 4000 Hz
|
||||
const LOG_BINS = 256
|
||||
const F_MIN = 40, F_MAX = 4000
|
||||
const binHz = ctx.sampleRate / ca.fftSize
|
||||
const freqBuf = freqBufRef.current
|
||||
ca.getFloatFrequencyData(freqBuf)
|
||||
const spectrum = new Float32Array(LOG_BINS)
|
||||
for (let b = 0; b < LOG_BINS; b++) {
|
||||
const f = F_MIN * Math.pow(F_MAX / F_MIN, b / (LOG_BINS - 1))
|
||||
const bin = Math.round(f / binHz)
|
||||
if (bin < freqBuf.length) {
|
||||
const db = freqBuf[bin]
|
||||
spectrum[b] = db < NOISE_FLOOR ? 0 : Math.max(0, (db - NOISE_FLOOR) / (-NOISE_FLOOR))
|
||||
}
|
||||
}
|
||||
|
||||
// Peak-hold with exponential decay — spectrum rises instantly, falls slowly
|
||||
if (!specPeakRef.current) specPeakRef.current = new Float32Array(LOG_BINS)
|
||||
const peak = specPeakRef.current
|
||||
for (let b = 0; b < LOG_BINS; b++) {
|
||||
peak[b] = spectrum[b] > peak[b] ? spectrum[b] : peak[b] * 0.92
|
||||
}
|
||||
|
||||
let detectedFreq = null, detectedNote = null
|
||||
if (rms >= minVolumeRef.current) {
|
||||
const [f, c] = detectorRef.current.findPitch(timeBuf, ctx.sampleRate)
|
||||
if (c >= minClarityRef.current && f > 60 && f < 4200) {
|
||||
detectedFreq = f
|
||||
detectedNote = NOTES[((Math.round(12 * Math.log2(f / 440) + 69) % 12) + 12) % 12]
|
||||
}
|
||||
}
|
||||
onWaveformRef.current({ wave, rms, detectedFreq, detectedNote, spectrum: peak })
|
||||
}
|
||||
|
||||
if (rms >= minVolumeRef.current) {
|
||||
const [freq, clarity] = detectorRef.current.findPitch(timeBuf, ctx.sampleRate)
|
||||
if (clarity >= minClarityRef.current && freq > 60 && freq < 4200) {
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import { getPentatonicScale, getFullScale, getChordTones, NOTES } from '../lib/theory'
|
||||
|
||||
// Standard bass tuning (top of diagram = highest string)
|
||||
const STRINGS = [
|
||||
{ label: 'G', root: 7, thickness: 1.5 },
|
||||
{ label: 'D', root: 2, thickness: 2 },
|
||||
{ label: 'A', root: 9, thickness: 2.5 },
|
||||
{ label: 'E', root: 4, thickness: 3 },
|
||||
]
|
||||
|
||||
const NUM_FRETS = 13
|
||||
const FRET_MARKERS = [3, 5, 7, 9]
|
||||
const DOUBLE_MARKER = 12
|
||||
|
||||
// Layout
|
||||
const NUT_X = 40
|
||||
const OPEN_X = 18
|
||||
const FRET_W = 52
|
||||
const STRING_H = 36 // wider spacing than guitar — 4 strings feel more spread
|
||||
const PAD_T = 28
|
||||
const PAD_B = 18
|
||||
const BOARD_W = NUT_X + (NUM_FRETS - 1) * FRET_W + 10
|
||||
const BOARD_H = PAD_T + 3 * STRING_H + PAD_B
|
||||
const DOT_R = 10
|
||||
|
||||
const fretX = f => NUT_X + (f - 0.5) * FRET_W
|
||||
const stringY = si => PAD_T + si * STRING_H
|
||||
|
||||
function noteColor(isChordTone, isPenta, isScale, mono = false) {
|
||||
if (isChordTone) return { fill: '#a855f7', text: '#fff' }
|
||||
if (isPenta) return mono ? { fill: '#c084fc', text: '#1e1b4b' } : { fill: '#f59e0b', text: '#000' }
|
||||
if (isScale) return mono ? { fill: '#e9d5ff', text: '#581c87' } : { fill: '#374151', text: '#d1d5db' }
|
||||
return null
|
||||
}
|
||||
|
||||
export default function BassFretboard({ keyInfo, currentChord, monoColor = false }) {
|
||||
const { root, mode } = keyInfo ?? {}
|
||||
|
||||
if (!root) return null
|
||||
|
||||
const pentaSet = new Set(getPentatonicScale(root, mode).map(n => NOTES.indexOf(n)))
|
||||
const scaleSet = new Set(getFullScale(root, mode).map(n => NOTES.indexOf(n)))
|
||||
const chordSet = currentChord
|
||||
? new Set(getChordTones(currentChord).map(n => NOTES.indexOf(n)))
|
||||
: new Set()
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-6">
|
||||
<p className="text-sm text-gray-500 uppercase tracking-widest mb-4">
|
||||
Bass — {root} {mode}
|
||||
{currentChord && <span className="text-amber-400 ml-2">/ {currentChord}</span>}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<svg
|
||||
viewBox={`0 0 ${BOARD_W} ${BOARD_H}`}
|
||||
width="100%"
|
||||
height="auto"
|
||||
style={{ display: 'block' }}
|
||||
>
|
||||
{/* Fretboard background */}
|
||||
<rect x={NUT_X} y={PAD_T - 6} width={BOARD_W - NUT_X - 4} height={3 * STRING_H + 12}
|
||||
fill="#1a120b" rx={2} />
|
||||
|
||||
{/* Position marker dots (centred between strings 1–2) */}
|
||||
{FRET_MARKERS.map(f => (
|
||||
<circle key={f}
|
||||
cx={fretX(f)} cy={PAD_T + 1.5 * STRING_H}
|
||||
r={5} fill="#3a2a1a" />
|
||||
))}
|
||||
{/* Double dot at 12 */}
|
||||
<circle cx={fretX(DOUBLE_MARKER)} cy={PAD_T + 0.5 * STRING_H} r={5} fill="#3a2a1a" />
|
||||
<circle cx={fretX(DOUBLE_MARKER)} cy={PAD_T + 2.5 * STRING_H} r={5} fill="#3a2a1a" />
|
||||
|
||||
{/* Fret lines */}
|
||||
{Array.from({ length: NUM_FRETS - 1 }, (_, i) => i + 1).map(f => (
|
||||
<line key={f}
|
||||
x1={NUT_X + f * FRET_W} y1={PAD_T - 6}
|
||||
x2={NUT_X + f * FRET_W} y2={PAD_T + 3 * STRING_H + 6}
|
||||
stroke={f === DOUBLE_MARKER ? '#888' : '#4a3a2a'}
|
||||
strokeWidth={f === DOUBLE_MARKER ? 2 : 1} />
|
||||
))}
|
||||
|
||||
{/* Nut */}
|
||||
<line x1={NUT_X} y1={PAD_T - 6} x2={NUT_X} y2={PAD_T + 3 * STRING_H + 6}
|
||||
stroke="#c0b090" strokeWidth={4} />
|
||||
|
||||
{/* Strings — thicker as pitch drops */}
|
||||
{STRINGS.map((s, si) => (
|
||||
<line key={si}
|
||||
x1={OPEN_X - DOT_R - 2} y1={stringY(si)}
|
||||
x2={BOARD_W - 8} y2={stringY(si)}
|
||||
stroke="#9ca3af"
|
||||
strokeWidth={s.thickness} />
|
||||
))}
|
||||
|
||||
{/* Fret numbers */}
|
||||
{[3, 5, 7, 9, 12].map(f => (
|
||||
<text key={f}
|
||||
x={fretX(f)} y={PAD_T - 10}
|
||||
textAnchor="middle" fontSize={10} fill="#6b7280"
|
||||
>{f}</text>
|
||||
))}
|
||||
|
||||
{/* String labels */}
|
||||
{STRINGS.map((s, si) => (
|
||||
<text key={si}
|
||||
x={6} y={stringY(si) + 4}
|
||||
textAnchor="middle" fontSize={10} fill="#6b7280"
|
||||
>{s.label}</text>
|
||||
))}
|
||||
|
||||
{/* Note dots */}
|
||||
{STRINGS.flatMap((str, si) =>
|
||||
Array.from({ length: NUM_FRETS }, (_, fi) => {
|
||||
const pc = (str.root + fi) % 12
|
||||
const color = noteColor(chordSet.has(pc), pentaSet.has(pc), scaleSet.has(pc), monoColor)
|
||||
if (!color) return null
|
||||
|
||||
const cx = fi === 0 ? OPEN_X : fretX(fi)
|
||||
const cy = stringY(si)
|
||||
|
||||
return (
|
||||
<g key={`${si}-${fi}`}>
|
||||
<circle cx={cx} cy={cy} r={DOT_R} fill={color.fill} />
|
||||
<text
|
||||
x={cx} y={cy + 4}
|
||||
textAnchor="middle"
|
||||
fontSize={9}
|
||||
fontWeight="600"
|
||||
fill={color.text}
|
||||
>
|
||||
{NOTES[pc]}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex gap-5 text-xs text-gray-500">
|
||||
<span><span className="text-accent">●</span> Chord tone</span>
|
||||
<span style={{ color: monoColor ? '#c084fc' : '#f59e0b' }}>●</span><span> Pentatonic</span>
|
||||
<span style={{ color: monoColor ? '#e9d5ff' : '#6b7280' }}>●</span><span> Scale</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
// SVG chord diagram — 6 strings × 5 visible frets
|
||||
// Props:
|
||||
// frets[] — [s6…s1]: fret number or 'x' (muted)
|
||||
// fingers[] — [s6…s1]: finger 1-4, 0 = open/barre indicator
|
||||
// barre — { fret, fromStr, toStr } or null
|
||||
// baseFret — which fret number is at the top of the diagram (1 = standard)
|
||||
// label — caption below the box
|
||||
|
||||
const STRINGS = 6
|
||||
const ROWS = 5 // visible frets
|
||||
const SX = 32 // left margin (open/mute indicators)
|
||||
const SY = 28 // top margin (nut / baseFret label)
|
||||
const GX = 26 // gap between strings
|
||||
const GY = 22 // gap between frets
|
||||
const DOT_R = 9 // dot radius
|
||||
const W = SX + GX * (STRINGS - 1) + 24 // total width
|
||||
const H = SY + GY * ROWS + 20 // total height
|
||||
|
||||
function strX(s) { return SX + (STRINGS - 1 - s) * GX } // s=0 is s6 (low E, leftmost)
|
||||
function fretY(f) { return SY + f * GY } // f=0 is above first fret, f=1…5 are fret centers
|
||||
|
||||
export default function ChordBox({ frets, fingers, barre, baseFret = 1, label }) {
|
||||
const isOpen = baseFret === 1
|
||||
|
||||
// Map fret numbers to diagram row (0-indexed from top)
|
||||
function toRow(absF) {
|
||||
return absF - baseFret + 1 // fret at baseFret → row 1 (center of first fret)
|
||||
}
|
||||
|
||||
// Barre bar: draw a rounded rect across strings
|
||||
function renderBarre() {
|
||||
if (!barre) return null
|
||||
const row = toRow(barre.fret)
|
||||
if (row < 1 || row > ROWS) return null
|
||||
const x1 = strX(STRINGS - barre.toStr) // toStr is highest string number = leftmost
|
||||
const x2 = strX(STRINGS - barre.fromStr) // fromStr is lowest string number = rightmost
|
||||
const cy = fretY(row) - GY / 2
|
||||
return (
|
||||
<rect
|
||||
key="barre"
|
||||
x={x1 - DOT_R}
|
||||
y={cy - DOT_R}
|
||||
width={x2 - x1 + DOT_R * 2}
|
||||
height={DOT_R * 2}
|
||||
rx={DOT_R}
|
||||
fill="#a855f7"
|
||||
opacity={0.9}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} className="overflow-visible">
|
||||
|
||||
{/* ── Nut or baseFret indicator ── */}
|
||||
{isOpen ? (
|
||||
<rect x={SX - 2} y={SY - 4} width={GX * (STRINGS - 1) + 4} height={4} rx={2} fill="#e5e7eb" />
|
||||
) : (
|
||||
<text x={SX - 6} y={SY + GY * 0.5} textAnchor="end" dominantBaseline="middle"
|
||||
fill="#9ca3af" fontSize={10} fontFamily="monospace">
|
||||
{baseFret}
|
||||
</text>
|
||||
)}
|
||||
|
||||
{/* ── Fret lines ── */}
|
||||
{Array.from({ length: ROWS + 1 }, (_, i) => (
|
||||
<line key={`fl${i}`}
|
||||
x1={SX} y1={fretY(i) - GY / 2}
|
||||
x2={SX + GX * (STRINGS - 1)} y2={fretY(i) - GY / 2}
|
||||
stroke="#374151" strokeWidth={i === 0 && isOpen ? 3 : 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* ── String lines ── */}
|
||||
{Array.from({ length: STRINGS }, (_, s) => (
|
||||
<line key={`sl${s}`}
|
||||
x1={strX(s)} y1={SY - GY / 2}
|
||||
x2={strX(s)} y2={fretY(ROWS) - GY / 2}
|
||||
stroke="#4b5563" strokeWidth={1}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* ── Barre ── */}
|
||||
{renderBarre()}
|
||||
|
||||
{/* ── Dots + open/mute indicators ── */}
|
||||
{frets.map((f, s) => {
|
||||
const cx = strX(STRINGS - 1 - s)
|
||||
if (f === 'x') {
|
||||
return (
|
||||
<text key={`m${s}`} x={cx} y={SY - GY / 2 - 7}
|
||||
textAnchor="middle" fill="#6b7280" fontSize={12} fontWeight="bold">
|
||||
×
|
||||
</text>
|
||||
)
|
||||
}
|
||||
if (f === 0) {
|
||||
return (
|
||||
<circle key={`o${s}`} cx={cx} cy={SY - GY / 2 - 7}
|
||||
r={5} fill="none" stroke="#6b7280" strokeWidth={1.5} />
|
||||
)
|
||||
}
|
||||
const row = toRow(f)
|
||||
if (row < 1 || row > ROWS) return null
|
||||
const cy = fretY(row) - GY / 2
|
||||
const finger = fingers?.[s] ?? 0
|
||||
return (
|
||||
<g key={`d${s}`}>
|
||||
<circle cx={cx} cy={cy} r={DOT_R} fill="#a855f7" />
|
||||
{finger > 0 && (
|
||||
<text x={cx} y={cy} textAnchor="middle" dominantBaseline="middle"
|
||||
fill="white" fontSize={9} fontWeight="bold">
|
||||
{finger}
|
||||
</text>
|
||||
)}
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* ── String name labels ── */}
|
||||
{['e','B','G','D','A','E'].map((n, i) => (
|
||||
<text key={`sn${i}`}
|
||||
x={strX(i)} y={H - 4}
|
||||
textAnchor="middle" fill="#4b5563" fontSize={8}>
|
||||
{n}
|
||||
</text>
|
||||
))}
|
||||
|
||||
</svg>
|
||||
|
||||
{label && (
|
||||
<p className="text-[11px] text-gray-400 text-center leading-tight max-w-[120px]">{label}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,789 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import ChordBox from './ChordBox'
|
||||
import MiniPiano from './MiniPiano'
|
||||
import { getGuitarVoicings, getPianoTechniques, parseChord } from '../lib/voicings'
|
||||
import { CHORD_TYPES, NOTES, getChordsInKey, toRomanNumeral, getSuggestedProgressions } from '../lib/theory'
|
||||
import { FAMOUS_PROGRESSIONS, progressionInKey, getChordSubstitutions, CHORD_PLAYBOOK } from '../lib/education'
|
||||
|
||||
const CHORD_SUFFIX_OPTIONS = [
|
||||
{ key: 'maj', label: 'Major' },
|
||||
{ key: 'min', label: 'Minor' },
|
||||
{ key: 'dom7', label: '7' },
|
||||
{ key: 'maj7', label: 'maj7' },
|
||||
{ key: 'min7', label: 'm7' },
|
||||
{ key: 'dim', label: 'dim' },
|
||||
{ key: 'dim7', label: 'dim7' },
|
||||
{ key: 'half_dim', label: 'm7♭5' },
|
||||
{ key: 'aug', label: 'aug' },
|
||||
{ key: 'sus4', label: 'sus4' },
|
||||
{ key: 'sus2', label: 'sus2' },
|
||||
{ key: 'maj6', label: '6' },
|
||||
{ key: 'min6', label: 'm6' },
|
||||
{ key: 'add9', label: 'add9' },
|
||||
]
|
||||
|
||||
function chordDisplayName(root, typeKey) {
|
||||
const type = CHORD_TYPES[typeKey]
|
||||
if (!type) return root
|
||||
return root + type.suffix
|
||||
}
|
||||
|
||||
function GuitarTab({ chordName }) {
|
||||
const voicings = getGuitarVoicings(chordName)
|
||||
if (!voicings.length) {
|
||||
return <p className="text-gray-500 text-sm text-center py-8">No guitar voicings found for {chordName}.</p>
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-4">
|
||||
Click any voicing to learn it. Purple = chord tones. Finger numbers inside dots (1=index, 4=pinky).
|
||||
Barre chords show the fret number on the left.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-6 justify-start">
|
||||
{voicings.map((v, i) => (
|
||||
<div key={i} className="flex flex-col items-center gap-1 p-3 rounded-xl bg-surface border border-border hover:border-accent/40 transition-colors">
|
||||
<ChordBox
|
||||
frets={v.frets}
|
||||
fingers={v.fingers}
|
||||
barre={v.barre}
|
||||
baseFret={v.baseFret}
|
||||
/>
|
||||
<p className="text-[11px] text-gray-400 text-center mt-1 max-w-[120px] leading-tight">{v.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 p-3 rounded-lg bg-surface border border-border">
|
||||
<p className="text-xs text-gray-500">
|
||||
<span className="text-accent font-semibold">Pro tip:</span> Learn the E-shape and A-shape barres first
|
||||
— they cover all 12 roots. Then add open voicings for the keys you play in most.
|
||||
High-fret voicings (above fret 7) work great as jazz comping shapes in a band mix.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PianoTab({ chordName }) {
|
||||
const parsed = parseChord(chordName)
|
||||
const techniques = getPianoTechniques(chordName)
|
||||
const rootPc = parsed?.rootPc ?? 0
|
||||
|
||||
if (!techniques.length) {
|
||||
return <p className="text-gray-500 text-sm text-center py-8">No piano techniques for {chordName}.</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-xs text-gray-500">
|
||||
<span className="text-blue-400 font-semibold">Blue = Left hand</span> ·
|
||||
<span className="text-accent font-semibold">Purple = Right hand</span> ·
|
||||
R marks the root.
|
||||
</p>
|
||||
{techniques.map((t, i) => (
|
||||
<div key={i} className="p-4 rounded-xl bg-surface border border-border hover:border-accent/30 transition-colors">
|
||||
<div className="flex flex-col lg:flex-row gap-4 items-start">
|
||||
<div className="shrink-0 overflow-x-auto">
|
||||
<MiniPiano rootPc={rootPc} lh={t.lh} rh={t.rh} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5 min-w-0">
|
||||
<h3 className="font-bold text-white text-sm">{t.name}</h3>
|
||||
<p className="text-gray-400 text-xs">{t.desc}</p>
|
||||
<p className="text-xs text-amber-400/80 mt-1">
|
||||
<span className="text-amber-400 font-semibold">Tip:</span> {t.tip}
|
||||
</p>
|
||||
<div className="flex gap-3 mt-1 text-xs text-gray-600">
|
||||
{t.lh.length > 0 && (
|
||||
<span className="text-blue-400">LH: {t.lh.map(iv => {
|
||||
const n = NOTES[(rootPc + iv) % 12]
|
||||
return iv === 0 ? `${n} (root)` : n
|
||||
}).join(', ')}</span>
|
||||
)}
|
||||
{t.rh.length > 0 && (
|
||||
<span className="text-accent">RH: {t.rh.map(iv => {
|
||||
const n = NOTES[(rootPc + iv) % 12]
|
||||
return n
|
||||
}).join(', ')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ChordQuickPick({ label, chords, active, keyInfo, onSelect }) {
|
||||
if (!chords.length) return null
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-[11px] text-gray-600 uppercase tracking-wider shrink-0 w-20">{label}</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{chords.map(chord => {
|
||||
const rn = keyInfo?.root ? toRomanNumeral(chord, keyInfo.root, keyInfo.mode) : ''
|
||||
return (
|
||||
<button key={chord}
|
||||
onClick={() => onSelect(chord)}
|
||||
className={`flex flex-col items-center px-2.5 py-1 rounded-lg border text-xs font-bold transition-all ${
|
||||
active === chord
|
||||
? 'bg-accent border-accent text-white'
|
||||
: 'bg-surface border-border text-gray-300 hover:border-accent/50 hover:text-white'
|
||||
}`}>
|
||||
<span>{chord}</span>
|
||||
{rn && <span className="text-[9px] font-normal opacity-60 leading-none">{rn}</span>}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Progressions sub-tab ─────────────────────────────────────────────────────
|
||||
// Determine whether a chord type is major-ish or minor-ish for matching
|
||||
const MAJOR_TYPES = new Set(['maj','maj7','maj6','add9','sus4','sus2','aug','dom7'])
|
||||
const MINOR_TYPES = new Set(['min','min7','min6','half_dim','dim','dim7'])
|
||||
|
||||
function isMajorType(t) { return MAJOR_TYPES.has(t) }
|
||||
function isMinorType(t) { return MINOR_TYPES.has(t) }
|
||||
|
||||
function ProgressionsSubTab({ chordName, onChordClick }) {
|
||||
const parsed = parseChord(chordName)
|
||||
if (!parsed) return null
|
||||
const { rootPc, type } = parsed
|
||||
const root = NOTES[rootPc]
|
||||
|
||||
// Famous progressions where this chord can be the tonic (degree 0)
|
||||
const isMajor = isMajorType(type)
|
||||
const isMinor = isMinorType(type)
|
||||
const tonicProgs = FAMOUS_PROGRESSIONS.filter(p => {
|
||||
const q0 = p.qualities[0]
|
||||
if (isMajor && isMajorType(q0)) return true
|
||||
if (isMinor && isMinorType(q0)) return true
|
||||
return false
|
||||
})
|
||||
|
||||
// Genre-based suggestions from theory.js
|
||||
const genreProgs = getSuggestedProgressions(root, isMajor ? 'major' : 'minor')
|
||||
|
||||
// Roles this chord plays in other keys
|
||||
const ROLES = []
|
||||
for (let keyPc = 0; keyPc < 12; keyPc++) {
|
||||
for (const mode of ['major', 'minor']) {
|
||||
const diatonicChords = getChordsInKey(NOTES[keyPc], mode)
|
||||
const idx = diatonicChords.indexOf(chordName)
|
||||
if (idx !== -1) {
|
||||
const rn = toRomanNumeral(chordName, NOTES[keyPc], mode)
|
||||
ROLES.push({ keyRoot: NOTES[keyPc], mode, rn, diatonicChords })
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
|
||||
{/* ── Famous progressions starting from this chord ── */}
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">
|
||||
Famous progressions — {chordName} as tonic
|
||||
</p>
|
||||
{tonicProgs.length === 0 && (
|
||||
<p className="text-gray-600 text-sm">No exact matches — try a major or minor chord.</p>
|
||||
)}
|
||||
<div className="flex flex-col gap-3">
|
||||
{tonicProgs.slice(0, 6).map(prog => {
|
||||
const chordsHere = progressionInKey(prog, root)
|
||||
return (
|
||||
<div key={prog.id} className="p-3 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
|
||||
<div className="flex items-center gap-2 flex-wrap mb-2">
|
||||
<span className="font-bold text-white text-sm">{prog.name}</span>
|
||||
<span className="text-[10px] font-mono text-gray-500">{prog.pattern}</span>
|
||||
{prog.genre.map(g => (
|
||||
<span key={g} className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 rounded text-[10px] text-accent">{g}</span>
|
||||
))}
|
||||
</div>
|
||||
{/* Chord sequence */}
|
||||
<div className="flex flex-wrap gap-1.5 items-center mb-2">
|
||||
{chordsHere.map((c, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => onChordClick?.(c)}
|
||||
className={`px-2.5 py-1 rounded-lg font-bold text-sm border transition-all ${
|
||||
i === 0
|
||||
? 'bg-accent border-accent text-white'
|
||||
: 'bg-panel border-border text-gray-200 hover:border-accent/50 hover:text-accent'
|
||||
}`}
|
||||
title={`Voicings for ${c}`}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
{i < chordsHere.length - 1 && <span className="text-gray-700 text-xs">→</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 leading-snug">{prog.description}</p>
|
||||
{prog.songs[0] && (
|
||||
<p className="text-[11px] text-gray-600 mt-1">e.g. {prog.songs.slice(0, 3).join(' · ')}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Genre-based next-chord suggestions ── */}
|
||||
{genreProgs.length > 0 && (
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">
|
||||
Genre suggestions — starting from {chordName}
|
||||
</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{genreProgs.slice(0, 6).map((prog, pi) => (
|
||||
<div key={pi} className="flex items-center gap-2 p-2 bg-surface border border-border rounded-lg flex-wrap">
|
||||
<span className="text-[10px] font-bold text-gray-500 w-14 shrink-0">{prog.genre}</span>
|
||||
<div className="flex gap-1.5 flex-wrap items-center">
|
||||
{prog.chords.map((c, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => onChordClick?.(c)}
|
||||
className="px-2 py-0.5 bg-panel border border-border hover:border-accent/50 rounded text-xs font-bold text-gray-200 hover:text-accent transition-all"
|
||||
title={`Voicings for ${c}`}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
{i < prog.chords.length - 1 && <span className="text-gray-700 text-[10px]">→</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-600 font-mono ml-1">{prog.rn?.join(' – ')}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Roles this chord plays ── */}
|
||||
{ROLES.length > 0 && (
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">
|
||||
{chordName} appears in these keys
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{ROLES.slice(0, 8).map(({ keyRoot, mode, rn, diatonicChords }) => (
|
||||
<div key={`${keyRoot}-${mode}`}
|
||||
className="px-3 py-2 bg-surface border border-border rounded-xl text-xs flex flex-col gap-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-bold text-white">{keyRoot}</span>
|
||||
<span className="text-gray-500 capitalize">{mode}</span>
|
||||
<span className="text-amber-400 font-bold">{rn}</span>
|
||||
</div>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{diatonicChords.map((c, i) => (
|
||||
<button key={i}
|
||||
onClick={() => onChordClick?.(c)}
|
||||
className={`px-1.5 py-0.5 rounded text-[10px] font-bold transition-all ${
|
||||
c === chordName
|
||||
? 'bg-accent text-white'
|
||||
: 'text-gray-500 hover:text-gray-300'
|
||||
}`}>
|
||||
{c}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Theory tab ───────────────────────────────────────────────────────────────
|
||||
|
||||
const CHORD_THEORY = {
|
||||
maj: {
|
||||
name: 'Major',
|
||||
formula: 'Root + Major 3rd (4 semitones) + Perfect 5th (7 semitones)',
|
||||
vibe: 'Bright, happy, resolved. The most "complete" sound in Western music.',
|
||||
beginner: 'Major chords are the foundation of almost every song you know. They feel stable and uplifting — like a musical full stop.',
|
||||
tension: 'Low — very stable',
|
||||
color: 'text-yellow-400',
|
||||
},
|
||||
min: {
|
||||
name: 'Minor',
|
||||
formula: 'Root + Minor 3rd (3 semitones) + Perfect 5th (7 semitones)',
|
||||
vibe: 'Dark, melancholic, introspective. The 3rd is lowered by just one semitone — that one note changes everything.',
|
||||
beginner: 'One note separates major from minor. Minor chords carry emotion and depth — sadness, mystery, tension.',
|
||||
tension: 'Low-medium — stable but moody',
|
||||
color: 'text-blue-400',
|
||||
},
|
||||
dom7: {
|
||||
name: 'Dominant 7th',
|
||||
formula: 'Major triad + Minor 7th (10 semitones)',
|
||||
vibe: 'Tense, bluesy, urgent. Wants desperately to resolve to a chord a 5th lower.',
|
||||
beginner: 'The 7th chord is the engine of blues and jazz. It creates tension that begs to resolve — like holding your breath. Play G7 then C to feel it.',
|
||||
tension: 'High — strongly pulls to resolution',
|
||||
color: 'text-red-400',
|
||||
},
|
||||
maj7: {
|
||||
name: 'Major 7th',
|
||||
formula: 'Major triad + Major 7th (11 semitones)',
|
||||
vibe: 'Dreamy, lush, sophisticated. Jazz-infused warmth without the tension of a dominant 7th.',
|
||||
beginner: 'The major 7th is the note just below the octave. Adding it to a major chord gives you that smooth jazz-bossa nova sound — think "Autumn Leaves".',
|
||||
tension: 'Very low — ethereal and floating',
|
||||
color: 'text-purple-400',
|
||||
},
|
||||
min7: {
|
||||
name: 'Minor 7th',
|
||||
formula: 'Minor triad + Minor 7th (10 semitones)',
|
||||
vibe: 'Smooth, soulful, relaxed. Darker than major 7th but less tense than a dominant 7th.',
|
||||
beginner: 'Minor 7ths are everywhere in soul, R&B, and jazz. They\'re minor chords with added warmth — moody but not harsh.',
|
||||
tension: 'Low-medium — smooth and flowing',
|
||||
color: 'text-indigo-400',
|
||||
},
|
||||
dim: {
|
||||
name: 'Diminished',
|
||||
formula: 'Root + Minor 3rd (3 semitones) + Diminished 5th (6 semitones)',
|
||||
vibe: 'Dark, tense, unstable. The flattened 5th creates a tritone interval — historically called "diabolus in musica" (the devil in music).',
|
||||
beginner: 'Diminished chords are passing chords — they create maximum tension so the next chord feels like a huge relief. Like a musical cliffhanger.',
|
||||
tension: 'Very high — wants to resolve immediately',
|
||||
color: 'text-orange-400',
|
||||
},
|
||||
dim7: {
|
||||
name: 'Diminished 7th',
|
||||
formula: 'Diminished triad + Diminished 7th (9 semitones) — fully symmetric, all minor 3rds',
|
||||
vibe: 'Extremely tense and dramatic. Used in horror film scores and dramatic classical passages.',
|
||||
beginner: 'All four notes are equally spaced (all minor 3rds apart), making it the most symmetrical and unstable chord. Classic "villain arrives" sound.',
|
||||
tension: 'Extreme — maximum instability',
|
||||
color: 'text-red-600',
|
||||
},
|
||||
half_dim: {
|
||||
name: 'Half-Diminished (m7♭5)',
|
||||
formula: 'Diminished triad + Minor 7th (10 semitones)',
|
||||
vibe: 'Dark and tense but with slightly more resolution than full dim7. The "ii" chord in minor ii–V–i jazz progressions.',
|
||||
beginner: 'Half-diminished sits between a minor 7th and a fully diminished chord. It\'s the moody jazz workhorse — think the intro to "Autumn Leaves".',
|
||||
tension: 'High — tense but musical',
|
||||
color: 'text-orange-500',
|
||||
},
|
||||
aug: {
|
||||
name: 'Augmented',
|
||||
formula: 'Root + Major 3rd (4 semitones) + Augmented 5th (8 semitones) — all major 3rds',
|
||||
vibe: 'Eerie, floating, dreamlike. The raised 5th creates instability that can resolve either up or down.',
|
||||
beginner: 'Augmented chords sound like something is about to happen. They\'re often used as a passing chord between major and minor — the 5th feels like it\'s "reaching" upward.',
|
||||
tension: 'High — ambiguous direction',
|
||||
color: 'text-emerald-400',
|
||||
},
|
||||
sus4: {
|
||||
name: 'Suspended 4th',
|
||||
formula: 'Root + Perfect 4th (5 semitones) + Perfect 5th (7 semitones)',
|
||||
vibe: 'Open, unresolved, expectant. The 3rd is replaced by a 4th — neither major nor minor, just floating.',
|
||||
beginner: '"Sus" means suspended — the 3rd is suspended in mid-air. It wants to drop down to a major or minor chord. Classic rock move: sus4 → major.',
|
||||
tension: 'Medium — pleasant tension, easy on the ear',
|
||||
color: 'text-cyan-400',
|
||||
},
|
||||
sus2: {
|
||||
name: 'Suspended 2nd',
|
||||
formula: 'Root + Major 2nd (2 semitones) + Perfect 5th (7 semitones)',
|
||||
vibe: 'Airy, spacious, ambiguous. Like sus4 but lighter — the 2nd sits high above the root.',
|
||||
beginner: 'Sus2 is a favourite of modern pop and ambient music. Without a 3rd, it has no major/minor quality — it just floats. Think Sting, U2, Coldplay.',
|
||||
tension: 'Low-medium — open and spacious',
|
||||
color: 'text-teal-400',
|
||||
},
|
||||
maj6: {
|
||||
name: 'Major 6th',
|
||||
formula: 'Major triad + Major 6th (9 semitones)',
|
||||
vibe: 'Sweet, vintage, nostalgic. The 6th adds a note from the scale without the tension of a 7th.',
|
||||
beginner: "The 6th is a colour tone that sweetens a major chord. Common in jazz, bossa nova, and 50s pop — \"Misty\" and \"Fly Me To The Moon\" territory.",
|
||||
tension: 'Very low — sweeter than major triad',
|
||||
color: 'text-amber-300',
|
||||
},
|
||||
min6: {
|
||||
name: 'Minor 6th',
|
||||
formula: 'Minor triad + Major 6th (9 semitones)',
|
||||
vibe: 'Bittersweet, exotic, dramatic. A major 6th over a minor chord creates a striking contrast.',
|
||||
beginner: 'Minor 6ths have a flamenco/tango feel. The bright 6th sitting on top of a dark minor chord creates a sophisticated tension — think Django Reinhardt.',
|
||||
tension: 'Medium — intriguing contrast',
|
||||
color: 'text-amber-400',
|
||||
},
|
||||
add9: {
|
||||
name: 'Add 9',
|
||||
formula: 'Major triad + Major 9th (14 semitones = octave + 2)',
|
||||
vibe: 'Open, modern, slightly epic. The 9th adds colour without the smoothness of a 7th.',
|
||||
beginner: 'Add9 is the chord of modern rock and pop. Unlike maj9 (which also has a 7th), add9 keeps things clean and direct. Coldplay, Radiohead, and U2 love it.',
|
||||
tension: 'Very low — bright and open',
|
||||
color: 'text-lime-400',
|
||||
},
|
||||
}
|
||||
|
||||
const INTERVAL_NAMES = {
|
||||
0: 'Root', 2: 'Major 2nd', 3: 'Minor 3rd', 4: 'Major 3rd',
|
||||
5: 'Perfect 4th', 6: 'Tritone (♭5)', 7: 'Perfect 5th',
|
||||
8: 'Aug 5th', 9: 'Major 6th', 10: 'Minor 7th', 11: 'Major 7th',
|
||||
14: 'Major 9th',
|
||||
}
|
||||
|
||||
function TheoryTab({ chordName }) {
|
||||
const parsed = parseChord(chordName)
|
||||
if (!parsed) return <p className="text-gray-500 text-sm text-center py-8">Could not parse chord.</p>
|
||||
|
||||
const { rootPc, type } = parsed
|
||||
const typeInfo = CHORD_TYPES[type]
|
||||
const theory = CHORD_THEORY[type]
|
||||
const subs = getChordSubstitutions(chordName)
|
||||
|
||||
// Actual note names
|
||||
const noteNames = (typeInfo?.intervals ?? []).map(iv => NOTES[(rootPc + iv) % 12])
|
||||
|
||||
// Roles this chord can play
|
||||
const ROLES = []
|
||||
for (let keyPc = 0; keyPc < 12; keyPc++) {
|
||||
for (const mode of ['major', 'minor']) {
|
||||
const diatonicChords = getChordsInKey(NOTES[keyPc], mode)
|
||||
const idx = diatonicChords.indexOf(chordName)
|
||||
if (idx !== -1) {
|
||||
const rn = toRomanNumeral(chordName, NOTES[keyPc], mode)
|
||||
ROLES.push({ keyRoot: NOTES[keyPc], mode, rn })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
|
||||
{/* ── What is this chord? ── */}
|
||||
<div className="p-4 bg-surface border border-border rounded-xl">
|
||||
<div className="flex items-baseline gap-3 mb-3">
|
||||
<span className={`text-lg font-black ${theory?.color ?? 'text-accent'}`}>{chordName}</span>
|
||||
<span className="text-sm text-gray-400">{theory?.name ?? type}</span>
|
||||
</div>
|
||||
{theory && (
|
||||
<>
|
||||
<p className="text-sm text-gray-200 leading-relaxed mb-2">{theory.beginner}</p>
|
||||
<p className="text-xs text-gray-500 italic leading-relaxed">{theory.vibe}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Notes & Formula ── */}
|
||||
<div className="p-4 bg-surface border border-border rounded-xl">
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">Notes in this chord</p>
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
{(typeInfo?.intervals ?? []).map((iv, i) => (
|
||||
<div key={i} className={`flex flex-col items-center px-3 py-2 rounded-xl border ${
|
||||
i === 0 ? 'bg-accent/20 border-accent text-accent' : 'bg-panel border-border text-gray-300'
|
||||
}`}>
|
||||
<span className="text-base font-black">{noteNames[i]}</span>
|
||||
<span className="text-[10px] text-gray-500 leading-none mt-0.5">{INTERVAL_NAMES[iv] ?? `+${iv}`}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{theory && (
|
||||
<div className="text-xs text-gray-600 font-mono bg-panel/50 rounded-lg px-3 py-2 border border-border">
|
||||
{theory.formula}
|
||||
</div>
|
||||
)}
|
||||
{theory && (
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-[10px] uppercase tracking-wider text-gray-600">Tension:</span>
|
||||
<span className="text-xs text-gray-400">{theory.tension}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Chord substitutions ── */}
|
||||
{subs.length > 0 && (
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">Colour swaps — try these instead</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
{subs.map((sub, i) => (
|
||||
<div key={i} className="flex items-start gap-3 p-3 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
|
||||
<span className="text-sm font-black text-accent shrink-0 w-16">{sub.chord}</span>
|
||||
<p className="text-xs text-gray-400 leading-snug">{sub.tip}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Keys this chord belongs to ── */}
|
||||
{ROLES.length > 0 && (
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-3">{chordName} appears in these keys</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{ROLES.slice(0, 10).map(({ keyRoot, mode, rn }) => (
|
||||
<div key={`${keyRoot}-${mode}`}
|
||||
className="px-3 py-2 bg-surface border border-border rounded-xl text-xs flex items-center gap-2">
|
||||
<span className="font-bold text-white">{keyRoot}</span>
|
||||
<span className="text-gray-500 capitalize">{mode}</span>
|
||||
<span className="text-amber-400 font-bold">{rn}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-700 mt-2">
|
||||
Roman numerals show the chord's role: I/i = home, IV = subdominant, V = dominant tension, vi/♭VI = relative minor/major, etc.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Learn tab ────────────────────────────────────────────────────────────────
|
||||
|
||||
function LearnTab({ chordName }) {
|
||||
const parsed = parseChord(chordName)
|
||||
const playbook = parsed ? CHORD_PLAYBOOK[parsed.type] : null
|
||||
|
||||
if (!playbook) {
|
||||
return <p className="text-gray-500 text-sm text-center py-8">No jam content for {chordName} yet.</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
|
||||
{/* ── Jam role ── */}
|
||||
<div className="px-4 py-3 bg-accent/10 border border-accent/20 rounded-xl">
|
||||
<p className="text-[10px] uppercase tracking-wider text-accent/60 mb-1">Your role in the jam</p>
|
||||
<p className="text-sm text-white leading-relaxed">{playbook.jamRole}</p>
|
||||
</div>
|
||||
|
||||
{/* ── Voicings for jamming ── */}
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Voicings — when to use which</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{playbook.voicings.map((v, i) => (
|
||||
<div key={i} className="flex gap-3 p-3 bg-surface border border-border rounded-xl hover:border-accent/20 transition-colors">
|
||||
<span className="text-accent font-black text-lg shrink-0 leading-none mt-0.5">{i + 1}</span>
|
||||
<div>
|
||||
<p className="text-xs font-bold text-white mb-0.5">{v.name}</p>
|
||||
<p className="text-xs text-gray-400 leading-relaxed">{v.use}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-700 mt-2">See the Guitar tab for the actual fingerings of each shape.</p>
|
||||
</div>
|
||||
|
||||
{/* ── Licks & fills ── */}
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Licks & fills</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
{playbook.licks.map((l, i) => (
|
||||
<div key={i} className="p-4 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||||
<p className="text-sm font-bold text-white">{l.title}</p>
|
||||
<span className="text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-accent/10 border border-accent/20 text-accent">{l.style}</span>
|
||||
</div>
|
||||
<pre className="text-[10px] font-mono text-accent/70 bg-black/40 border border-border rounded-lg px-3 py-2 overflow-x-auto leading-relaxed whitespace-pre mb-2">{l.tab}</pre>
|
||||
<p className="text-xs text-amber-400/80">
|
||||
<span className="font-semibold text-amber-400">Key insight: </span>{l.tip}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Jam tips ── */}
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Jam tips</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{playbook.jamTips.map((tip, i) => (
|
||||
<div key={i} className="flex gap-2.5 text-xs text-gray-300 leading-relaxed p-2.5 rounded-lg bg-surface border border-border">
|
||||
<span className="text-accent shrink-0 font-bold mt-0.5">→</span>
|
||||
<p>{tip}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Loop station practice ── */}
|
||||
{playbook.loopPractice?.length > 0 && (
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Loop station practice</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{playbook.loopPractice.map((lp, i) => (
|
||||
<div key={i} className="p-3 bg-surface border border-border rounded-xl border-l-2 border-l-accent/40">
|
||||
<p className="text-xs font-bold text-white mb-1">🔁 {lp.title}</p>
|
||||
<p className="text-xs text-gray-400 leading-relaxed">{lp.body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Explore tab ──────────────────────────────────────────────────────────────
|
||||
function ExploreTab({ initialChord, keyInfo, chordHistory }) {
|
||||
const parsed = parseChord(initialChord)
|
||||
const [root, setRoot] = useState(parsed ? NOTES[parsed.rootPc] : 'C')
|
||||
const [typeKey, setTypeKey] = useState(parsed?.type ?? 'maj')
|
||||
const [subTab, setSubTab] = useState('guitar')
|
||||
const [active, setActive] = useState(initialChord ?? '')
|
||||
|
||||
const chordName = chordDisplayName(root, typeKey)
|
||||
|
||||
function selectChord(chord) {
|
||||
setActive(chord)
|
||||
const p = parseChord(chord)
|
||||
if (p) { setRoot(NOTES[p.rootPc]); setTypeKey(p.type) }
|
||||
}
|
||||
|
||||
const recentChords = [...new Set([...(chordHistory ?? [])].reverse())].slice(0, 12)
|
||||
const keyChords = keyInfo?.root ? getChordsInKey(keyInfo.root, keyInfo.mode ?? 'major') : []
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
{/* ── Contextual quick-picks ── */}
|
||||
{(recentChords.length > 0 || keyChords.length > 0) && (
|
||||
<div className="flex flex-col gap-3 p-3 bg-surface border border-border rounded-xl">
|
||||
<ChordQuickPick label="History" chords={recentChords} active={active} keyInfo={keyInfo} onSelect={selectChord} />
|
||||
{keyChords.length > 0 && (
|
||||
<>
|
||||
{recentChords.length > 0 && <div className="h-px bg-border" />}
|
||||
<ChordQuickPick
|
||||
label={`${keyInfo.root} ${keyInfo.mode ?? ''}`}
|
||||
chords={keyChords} active={active} keyInfo={keyInfo} onSelect={selectChord}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Manual picker ── */}
|
||||
<div className="flex flex-wrap gap-2 items-center p-3 bg-surface border border-border rounded-xl">
|
||||
<span className="text-xs text-gray-500 shrink-0">Root:</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{NOTES.map(n => (
|
||||
<button key={n}
|
||||
onClick={() => { setRoot(n); setActive('') }}
|
||||
className={`px-2 py-0.5 rounded text-xs font-bold transition-all ${
|
||||
root === n ? 'bg-accent text-white' : 'bg-border text-gray-400 hover:text-white'
|
||||
}`}>
|
||||
{n}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-px h-4 bg-border shrink-0" />
|
||||
<span className="text-xs text-gray-500 shrink-0">Type:</span>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={typeKey}
|
||||
onChange={e => { setTypeKey(e.target.value); setActive('') }}
|
||||
className="appearance-none bg-panel border border-border rounded-lg pl-2 pr-6 py-1 text-xs text-gray-200 cursor-pointer focus:outline-none focus:border-accent"
|
||||
>
|
||||
{CHORD_SUFFIX_OPTIONS.map(o => (
|
||||
<option key={o.key} value={o.key}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-gray-500 text-xs">▾</span>
|
||||
</div>
|
||||
<div className="ml-auto text-xl font-black text-accent">{chordName}</div>
|
||||
</div>
|
||||
|
||||
{/* ── Sub-tabs ── */}
|
||||
<div className="flex gap-1 bg-surface border border-border rounded-xl p-1 overflow-x-auto">
|
||||
{[
|
||||
{ key: 'guitar', label: '🎸 Guitar' },
|
||||
{ key: 'piano', label: '🎹 Piano' },
|
||||
].map(t => (
|
||||
<button key={t.key}
|
||||
onClick={() => setSubTab(t.key)}
|
||||
className={`px-4 py-1.5 rounded-lg text-sm font-semibold transition-all whitespace-nowrap ${
|
||||
subTab === t.key ? 'bg-accent text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{subTab === 'guitar' && <GuitarTab chordName={chordName} />}
|
||||
{subTab === 'piano' && <PianoTab chordName={chordName} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main modal ───────────────────────────────────────────────────────────────
|
||||
|
||||
export default function ChordDetailModal({ chord, onClose, onChordClick, keyInfo, chordHistory }) {
|
||||
const [tab, setTab] = useState('guitar')
|
||||
|
||||
// Reset tab when chord changes
|
||||
useEffect(() => { setTab('guitar') }, [chord])
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
function onKey(e) { if (e.key === 'Escape') onClose() }
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [onClose])
|
||||
|
||||
if (!chord) return null
|
||||
|
||||
const parsed = parseChord(chord)
|
||||
const typeName = parsed ? (CHORD_SUFFIX_OPTIONS.find(o => o.key === parsed.type)?.label ?? parsed.type) : ''
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-start justify-center bg-black/70 backdrop-blur-sm p-4 overflow-y-auto"
|
||||
onClick={e => { if (e.target === e.currentTarget) onClose() }}
|
||||
>
|
||||
<div className="w-full max-w-3xl bg-panel border border-border rounded-2xl shadow-2xl mt-8 mb-8">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-accent leading-none">{chord}</h2>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{typeName} chord · tap a voicing to study it</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-gray-500 hover:text-white transition-colors text-xl leading-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab bar */}
|
||||
<div className="flex gap-1 px-6 pt-4 overflow-x-auto">
|
||||
{[
|
||||
{ key: 'guitar', label: '🎸 Guitar' },
|
||||
{ key: 'piano', label: '🎹 Piano' },
|
||||
{ key: 'theory', label: '📚 Theory' },
|
||||
{ key: 'learn', label: '🎓 Learn' },
|
||||
{ key: 'progressions', label: '🎵 Progressions' },
|
||||
{ key: 'explore', label: '🔍 Explore' },
|
||||
].map(t => (
|
||||
<button key={t.key}
|
||||
onClick={() => setTab(t.key)}
|
||||
className={`px-4 py-2 rounded-t-xl text-sm font-semibold transition-all border-b-2 whitespace-nowrap ${
|
||||
tab === t.key
|
||||
? 'text-accent border-accent bg-accent/10'
|
||||
: 'text-gray-500 border-transparent hover:text-gray-300'
|
||||
}`}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-6 py-5">
|
||||
{tab === 'guitar' && <GuitarTab chordName={chord} />}
|
||||
{tab === 'piano' && <PianoTab chordName={chord} />}
|
||||
{tab === 'theory' && <TheoryTab chordName={chord} />}
|
||||
{tab === 'learn' && <LearnTab chordName={chord} />}
|
||||
{tab === 'progressions' && <ProgressionsSubTab chordName={chord} onChordClick={c => { onChordClick?.(c) }} />}
|
||||
{tab === 'explore' && <ExploreTab initialChord={chord} keyInfo={keyInfo} chordHistory={chordHistory} />}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,367 @@
|
||||
import { useState } from 'react'
|
||||
import ChordBox from './ChordBox'
|
||||
import RiffDiagram from './RiffDiagram'
|
||||
import { getGuitarVoicings, parseChord } from '../lib/voicings'
|
||||
import { CHORD_TYPES, NOTES, toRomanNumeral } from '../lib/theory'
|
||||
import { findSimilarProgressions, progressionInKey } from '../lib/education'
|
||||
|
||||
// ─── Scale ideas per mode ─────────────────────────────────────────────────────
|
||||
const SCALE_IDEAS = {
|
||||
major: [
|
||||
{ name: 'Major Pentatonic', intervals: '1–2–3–5–6', scaleIntervals: [0,2,4,7,9], desc: 'Safe and bright. Everything you play will land. Start on the root, end on the root.' },
|
||||
{ name: 'Mixolydian', intervals: '1–2–3–4–5–6–♭7', scaleIntervals: [0,2,4,5,7,9,10], desc: 'Major with a bluesy ♭7. The defining sound of classic rock — Sweet Home Alabama lives here.' },
|
||||
{ name: 'Lydian', intervals: '1–2–3–♯4–5–6–7', scaleIntervals: [0,2,4,6,7,9,11], desc: 'Dreamy and floating. The ♯4 is the magic note — use it on long sustained notes for instant wonder.' },
|
||||
],
|
||||
minor: [
|
||||
{ name: 'Minor Pentatonic', intervals: '1–♭3–4–5–♭7', scaleIntervals: [0,3,5,7,10], desc: 'The blues box. Bends on ♭3 and slides to 5 are gold. Start here every time.' },
|
||||
{ name: 'Natural Minor', intervals: '1–2–♭3–4–5–♭6–♭7', scaleIntervals: [0,2,3,5,7,8,10], desc: 'Full Aeolian scale. Melodic and dark. The ♭6 gives it a cinematic quality.' },
|
||||
{ name: 'Dorian', intervals: '1–2–♭3–4–5–6–♭7', scaleIntervals: [0,2,3,5,7,9,10], desc: "Minor with a raised 6th — smooth and soulful. Santana's go-to. That major 6th is everything." },
|
||||
],
|
||||
dorian: [
|
||||
{ name: 'Dorian Mode', intervals: '1–2–♭3–4–5–6–♭7', scaleIntervals: [0,2,3,5,7,9,10], desc: "The raised 6th over minor is the colour. Mix freely with minor pentatonic and touch that 6th note." },
|
||||
{ name: 'Minor Pentatonic', intervals: '1–♭3–4–5–♭7', scaleIntervals: [0,3,5,7,10], desc: 'Safe backbone in Dorian. You can ignore the 6th — or highlight it for that Dorian sparkle.' },
|
||||
{ name: 'Blues Scale', intervals: '1–♭3–4–♭5–5–♭7', scaleIntervals: [0,3,5,6,7,10], desc: 'Add the ♭5 passing tone through the 5 — that slide is the essence of blues expression.' },
|
||||
],
|
||||
mixolydian: [
|
||||
{ name: 'Mixolydian Mode', intervals: '1–2–3–4–5–6–♭7', scaleIntervals: [0,2,4,5,7,9,10], desc: 'The ♭7 is your signature note. Hit it and slide down — instant swagger.' },
|
||||
{ name: 'Major Pentatonic', intervals: '1–2–3–5–6', scaleIntervals: [0,2,4,7,9], desc: 'Works beautifully over the I chord. Clean and reliable when you need to land safely.' },
|
||||
{ name: 'Blues Scale', intervals: '1–♭3–3–4–5–♭7', scaleIntervals: [0,3,4,5,7,10], desc: 'The hybrid blues scale. Bend the ♭3 up to the 3 — that tension and release is everything.' },
|
||||
],
|
||||
phrygian: [
|
||||
{ name: 'Phrygian Mode', intervals: '1–♭2–♭3–4–5–♭6–♭7', scaleIntervals: [0,1,3,5,7,8,10], desc: 'That ♭2 is the spine-chilling note. Lean on it. Spanish fire and metal darkness in one scale.' },
|
||||
{ name: 'Phrygian Dominant',intervals: '1–♭2–3–4–5–♭6–♭7', scaleIntervals: [0,1,4,5,7,8,10], desc: 'Raise the ♭3 to a major 3rd. Flamenco and Middle-Eastern intensity. Dramatic every time.' },
|
||||
{ name: 'Minor Pentatonic', intervals: '1–♭3–4–5–♭7', scaleIntervals: [0,3,5,7,10], desc: 'Avoid the ♭2 and play safe pentatonic runs — then hit the ♭2 as a surprise.' },
|
||||
],
|
||||
lydian: [
|
||||
{ name: 'Lydian Mode', intervals: '1–2–3–♯4–5–6–7', scaleIntervals: [0,2,4,6,7,9,11], desc: 'Float on the ♯4. John Williams writes entire film scores in Lydian. Sustain everything.' },
|
||||
{ name: 'Major Pentatonic', intervals: '1–2–3–5–6', scaleIntervals: [0,2,4,7,9], desc: 'The reliable base. Use Lydian mode sparingly on top for colour.' },
|
||||
{ name: 'Lydian Dominant', intervals: '1–2–3–♯4–5–6–♭7', scaleIntervals: [0,2,4,6,7,9,10], desc: 'Lydian with a ♭7 — the jazz/fusion ♯4 chord sound. Herbie Hancock territory.' },
|
||||
],
|
||||
}
|
||||
|
||||
// Fallback
|
||||
const SCALE_FALLBACK = SCALE_IDEAS.major
|
||||
|
||||
// ─── Style variations for a progression ──────────────────────────────────────
|
||||
const STYLE_VARIATIONS = [
|
||||
{
|
||||
key: 'open',
|
||||
label: 'Open & Spacious',
|
||||
desc: 'Sus2 and add9 voicings — airy, gentle. Great for quiet intros and ambient sections.',
|
||||
typeMap: { maj: 'sus2', min: 'sus2', dom7: 'sus4', maj7: 'add9', min7: 'sus2', add9: 'sus2', sus4: 'sus4', sus2: 'sus2', dim: 'dim', aug: 'aug', half_dim: 'half_dim', maj6: 'sus2', min6: 'sus2' },
|
||||
color: 'text-blue-400',
|
||||
border: 'border-blue-900/40',
|
||||
},
|
||||
{
|
||||
key: 'jazz',
|
||||
label: 'Jazz Upgrade',
|
||||
desc: 'Triads → 7ths — instant sophistication. Works at any tempo, in any band context.',
|
||||
typeMap: { maj: 'maj7', min: 'min7', dom7: 'dom7', add9: 'maj7', sus2: 'sus2', sus4: 'sus4', dim: 'dim7', aug: 'aug', half_dim: 'half_dim', maj6: 'maj6', min6: 'min6' },
|
||||
color: 'text-amber-400',
|
||||
border: 'border-amber-900/40',
|
||||
},
|
||||
{
|
||||
key: 'blues',
|
||||
label: 'Blues Stomp',
|
||||
desc: 'Everything → dom7. Gritty, raw, powerful. All three chords want to slide and bend.',
|
||||
typeMap: { maj: 'dom7', min: 'dom7', maj7: 'dom7', min7: 'dom7', add9: 'dom7', sus2: 'dom7', sus4: 'dom7', dim: 'dim7', aug: 'aug', half_dim: 'dom7', maj6: 'dom7', min6: 'dom7' },
|
||||
color: 'text-red-400',
|
||||
border: 'border-red-900/40',
|
||||
},
|
||||
{
|
||||
key: 'modern',
|
||||
label: 'Neo-Soul / Modern',
|
||||
desc: "Add9 on majors, m7 on minors. D'Angelo, Thundercat, Childish Gambino territory.",
|
||||
typeMap: { maj: 'add9', min: 'min7', dom7: 'dom7', maj7: 'add9', min7: 'min7', add9: 'add9', sus2: 'sus2', sus4: 'sus4', dim: 'dim', aug: 'aug', half_dim: 'half_dim', maj6: 'add9', min6: 'min7' },
|
||||
color: 'text-purple-400',
|
||||
border: 'border-purple-900/40',
|
||||
},
|
||||
]
|
||||
|
||||
// Transform a chord via a type map
|
||||
function transformChord(chordStr, typeMap) {
|
||||
const p = parseChord(chordStr)
|
||||
if (!p) return chordStr
|
||||
const newType = typeMap[p.type] ?? p.type
|
||||
return NOTES[p.rootPc] + (CHORD_TYPES[newType]?.suffix ?? '')
|
||||
}
|
||||
|
||||
// Get best voicings for a chord — prefer open shapes, then low-fret barre
|
||||
function getBestVoicings(chordStr, max = 4) {
|
||||
const all = getGuitarVoicings(chordStr)
|
||||
// Sort: open shapes first (label contains "Open"), then barre
|
||||
const open = all.filter(v => v.label.includes('Open'))
|
||||
const barre = all.filter(v => !v.label.includes('Open'))
|
||||
return [...open, ...barre].slice(0, max)
|
||||
}
|
||||
|
||||
// ─── Per-chord voicing strip ──────────────────────────────────────────────────
|
||||
function ChordStrip({ chordStr, keyInfo, onChordClick }) {
|
||||
const voicings = getBestVoicings(chordStr, 4)
|
||||
const rn = keyInfo?.root ? toRomanNumeral(chordStr, keyInfo.root, keyInfo.mode) : ''
|
||||
return (
|
||||
<div className="flex flex-col gap-2 p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => onChordClick?.(chordStr)}
|
||||
className="px-3 py-1 bg-accent/10 border border-accent/40 rounded-lg font-black text-lg text-accent hover:bg-accent/20 transition-colors">
|
||||
{chordStr}
|
||||
</button>
|
||||
{rn && <span className="text-amber-400 text-sm font-semibold">{rn}</span>}
|
||||
<span className="text-[11px] text-gray-600 ml-auto">click for all voicings</span>
|
||||
</div>
|
||||
{voicings.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{voicings.map((v, i) => (
|
||||
<div key={i} className="flex flex-col items-center">
|
||||
<ChordBox frets={v.frets} fingers={v.fingers} barre={v.barre} baseFret={v.baseFret} />
|
||||
<p className="text-[10px] text-gray-600 text-center mt-1 max-w-[100px]">{v.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-600 text-xs">No voicings available.</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Style variation section ──────────────────────────────────────────────────
|
||||
function StyleSection({ progression, onChordClick }) {
|
||||
const [expanded, setExpanded] = useState(null)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{STYLE_VARIATIONS.map(style => {
|
||||
const isOpen = expanded === style.key
|
||||
const transformed = progression.map(c => transformChord(c, style.typeMap))
|
||||
|
||||
return (
|
||||
<div key={style.key} className={`border rounded-xl overflow-hidden transition-colors ${style.border} hover:border-opacity-70`}>
|
||||
<button onClick={() => setExpanded(isOpen ? null : style.key)}
|
||||
className="w-full flex items-center justify-between px-4 py-3 text-left">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`font-bold text-sm ${style.color}`}>{style.label}</span>
|
||||
<div className="flex gap-1">
|
||||
{transformed.map((c, i) => (
|
||||
<span key={i} className="text-xs font-bold text-gray-300">{c}{i < transformed.length - 1 ? ' →' : ''}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[11px] text-gray-500">{style.desc}</span>
|
||||
</div>
|
||||
<span className="text-gray-600 shrink-0 ml-3">{isOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="border-t border-border/50 px-4 py-4">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{transformed.map((c, i) => {
|
||||
const voicings = getBestVoicings(c, 2)
|
||||
return (
|
||||
<div key={i} className="flex flex-col items-center gap-2">
|
||||
<button onClick={() => onChordClick?.(c)}
|
||||
className="px-2 py-0.5 bg-panel border border-border hover:border-accent/50 rounded-lg font-bold text-sm text-gray-200 hover:text-accent transition-all">
|
||||
{c}
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
{voicings.map((v, vi) => (
|
||||
<div key={vi} className="flex flex-col items-center">
|
||||
<ChordBox frets={v.frets} fingers={v.fingers} barre={v.barre} baseFret={v.baseFret} />
|
||||
<p className="text-[9px] text-gray-700 text-center mt-0.5 max-w-[90px]">{v.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Similar famous progressions ─────────────────────────────────────────────
|
||||
function SimilarSection({ progression, keyInfo, onChordClick }) {
|
||||
const similar = findSimilarProgressions(progression, keyInfo)
|
||||
if (!similar.length) return (
|
||||
<p className="text-gray-600 text-sm text-center py-3">Play more and lock a key — similar progressions will appear here.</p>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{similar.slice(0, 3).map(prog => {
|
||||
const chordsHere = keyInfo?.root ? progressionInKey(prog, keyInfo.root) : []
|
||||
return (
|
||||
<div key={prog.id} className="p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex items-center flex-wrap gap-2 mb-2">
|
||||
<span className="font-bold text-white text-sm">{prog.name}</span>
|
||||
<span className="text-[10px] font-mono text-gray-600">{prog.pattern}</span>
|
||||
<span className="text-xs text-gray-600 ml-auto">{Math.round(prog.score * 100)}% match</span>
|
||||
</div>
|
||||
{chordsHere.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 items-center mb-2">
|
||||
{chordsHere.map((c, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<button onClick={() => onChordClick?.(c)}
|
||||
className={`px-2 py-0.5 rounded-lg font-bold text-xs border transition-all ${
|
||||
i === 0 ? 'bg-accent border-accent text-white' : 'bg-panel border-border text-gray-300 hover:border-accent/50 hover:text-accent'
|
||||
}`}>
|
||||
{c}
|
||||
</button>
|
||||
{i < chordsHere.length - 1 && <span className="text-gray-700 text-xs">→</span>}
|
||||
</span>
|
||||
))}
|
||||
<span className="text-[10px] text-gray-600 ml-1">in {keyInfo?.root} {keyInfo?.mode}</span>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-[11px] text-gray-600">{prog.songs.slice(0, 3).join(' · ')}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main panel ───────────────────────────────────────────────────────────────
|
||||
export default function CurrentJamPanel({ keyInfo, chordHistory, detectedProgression, onChordClick }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [view, setView] = useState('voicings') // voicings | scales | styles | similar
|
||||
|
||||
const { root, mode } = keyInfo ?? {}
|
||||
|
||||
// Working progression: detected loop or last 4 unique chords
|
||||
const workingProgression = detectedProgression?.length
|
||||
? detectedProgression
|
||||
: [...new Set([...chordHistory].reverse())].reverse().slice(-4)
|
||||
|
||||
const scaleIdeas = SCALE_IDEAS[mode] ?? SCALE_FALLBACK
|
||||
const rootPc = root ? NOTES.indexOf(root) : null
|
||||
const hasSession = workingProgression.length > 0
|
||||
|
||||
return (
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
<button onClick={() => setOpen(v => !v)}
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all">
|
||||
<div className="flex items-center gap-3">
|
||||
<span>CURRENT JAM</span>
|
||||
{root && (
|
||||
<span className="text-[10px] px-2 py-0.5 bg-accent/10 border border-accent/30 rounded text-accent">
|
||||
{root} {mode} {detectedProgression?.length ? `· ${workingProgression.join(' → ')}` : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span>{open ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="border-t border-border p-4 flex flex-col gap-4">
|
||||
|
||||
{!hasSession ? (
|
||||
<p className="text-gray-600 text-sm text-center py-6">Start listening and play some chords — your jam will appear here.</p>
|
||||
) : (
|
||||
<>
|
||||
{/* ── Progression summary ── */}
|
||||
<div className="flex flex-wrap items-center gap-2 px-3 py-2 bg-surface border border-border rounded-xl">
|
||||
{root ? (
|
||||
<span className="text-accent font-bold text-sm">{root} {mode}</span>
|
||||
) : (
|
||||
<span className="text-gray-600 text-sm">Key detecting…</span>
|
||||
)}
|
||||
{workingProgression.length > 0 && (
|
||||
<>
|
||||
<span className="text-gray-700">·</span>
|
||||
{workingProgression.map((c, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<span className="text-gray-300 font-bold text-sm">{c}</span>
|
||||
{root && <span className="text-amber-400/60 text-[10px]">{toRomanNumeral(c, root, mode)}</span>}
|
||||
{i < workingProgression.length - 1 && <span className="text-gray-700">→</span>}
|
||||
</span>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── View tabs ── */}
|
||||
<div className="flex gap-1 bg-surface border border-border rounded-xl p-1 overflow-x-auto">
|
||||
{[
|
||||
{ key: 'voicings', label: '🎸 Open Voicings' },
|
||||
{ key: 'scales', label: '🎵 Scales to Solo' },
|
||||
{ key: 'styles', label: '🎨 Style Options' },
|
||||
{ key: 'similar', label: '🔗 Similar Progressions' },
|
||||
].map(t => (
|
||||
<button key={t.key} onClick={() => setView(t.key)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all whitespace-nowrap ${
|
||||
view === t.key ? 'bg-accent text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Voicings: per chord open shapes ── */}
|
||||
{view === 'voicings' && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
Best open and barre voicings for each chord in your jam. Click a chord name to see all its voicings.
|
||||
</p>
|
||||
{workingProgression.map(chord => (
|
||||
<ChordStrip key={chord} chordStr={chord} keyInfo={keyInfo} onChordClick={onChordClick} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Scales ── */}
|
||||
{view === 'scales' && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
Scales and modes that fit {root ? `${root} ${mode}` : 'your current key'}.
|
||||
Start with the pentatonic — add the extra notes once you feel comfortable.
|
||||
</p>
|
||||
{scaleIdeas.map(idea => (
|
||||
<div key={idea.name} className="p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="font-bold text-white text-sm">{idea.name}</span>
|
||||
<span className="font-mono text-xs text-accent">{idea.intervals}</span>
|
||||
</div>
|
||||
{rootPc !== null && idea.scaleIntervals && (
|
||||
<div className="mb-2 overflow-x-auto">
|
||||
<RiffDiagram rootPc={rootPc} scaleIntervals={idea.scaleIntervals} />
|
||||
<p className="text-[10px] text-gray-600 mt-1">
|
||||
Purple = root · Grey = scale tone · Fret numbers above
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-gray-400 leading-snug">{idea.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
<p className="text-[11px] text-gray-700 text-center">
|
||||
Pro tip: always resolve to a chord tone at the end of a phrase — ♭7 leading to root, or 3rd landing on the 1.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Style options ── */}
|
||||
{view === 'styles' && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-xs text-gray-500">
|
||||
Your progression re-voiced four ways. Expand any style to see the chord boxes.
|
||||
</p>
|
||||
<StyleSection progression={workingProgression} onChordClick={onChordClick} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Similar progressions ── */}
|
||||
{view === 'similar' && (
|
||||
<SimilarSection progression={workingProgression} keyInfo={keyInfo} onChordClick={onChordClick} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+370
-27
@@ -1,3 +1,4 @@
|
||||
import { useRef } from 'react'
|
||||
import { getScale, getChordTones, NOTES } from '../lib/theory'
|
||||
|
||||
// ─── SVG Piano — 2 octaves (C3–B4) ───────────────────────────────────────────
|
||||
@@ -14,7 +15,7 @@ const BLACK_OCT = [
|
||||
]
|
||||
const WHITE_LABELS = ['C3','D3','E3','F3','G3','A3','B3','C4','D4','E4','F4','G4','A4','B4']
|
||||
|
||||
function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false }) {
|
||||
function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false, monoColor = false }) {
|
||||
const max = Math.max(...values, 0.01)
|
||||
const wKeys = []
|
||||
const bKeys = []
|
||||
@@ -35,7 +36,7 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
|
||||
const fillColor = inChord
|
||||
? `rgba(167,139,250,${0.12 + energy * 0.88})`
|
||||
: inKey
|
||||
? `rgba(251,191,36,${0.1 + energy * 0.7})`
|
||||
? monoColor ? `rgba(192,132,252,${0.1 + energy * 0.7})` : `rgba(251,191,36,${0.1 + energy * 0.7})`
|
||||
: `rgba(180,180,190,${0.05 + energy * 0.2})`
|
||||
const pct = showPct ? Math.round(values[pc] * 100) : 0
|
||||
|
||||
@@ -43,7 +44,7 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
|
||||
<g key={`w${wi}`}>
|
||||
<rect x={x+1} y={3} width={KEY_W-2} height={keyH}
|
||||
rx={3} fill="rgb(20,20,26)" stroke="rgba(255,255,255,0.08)" strokeWidth={1} />
|
||||
{energy > 0.04 && (
|
||||
{energy > (inChord || inKey ? 0.12 : 0.35) && (
|
||||
<rect
|
||||
x={x+1} y={3 + keyH * (1 - Math.min(energy, 1) * 0.85)}
|
||||
width={KEY_W-2} height={keyH * Math.min(energy, 1) * 0.85}
|
||||
@@ -55,7 +56,7 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
|
||||
</text>
|
||||
{showPct && pct > 0 && (
|
||||
<text x={x + KEY_W/2} y={keyH + 14} textAnchor="middle" fontSize={8}
|
||||
fill={inKey ? 'rgb(251,191,36)' : 'rgba(100,100,110,0.8)'}>
|
||||
fill={inKey ? (monoColor ? 'rgb(192,132,252)' : 'rgb(251,191,36)') : 'rgba(100,100,110,0.8)'}>
|
||||
{pct}%
|
||||
</text>
|
||||
)}
|
||||
@@ -69,17 +70,34 @@ function PianoSVG({ values, keyNotes, chordNotes, keyH = KEY_H, showPct = false
|
||||
const inChord = chordNotes?.has(pc)
|
||||
const inKey = keyNotes?.has(pc)
|
||||
const x = wi * KEY_W + KEY_W - BLACK_W / 2
|
||||
const bg = inChord
|
||||
? `rgba(139,92,246,${0.4 + energy * 0.6})`
|
||||
const fillColor = inChord
|
||||
? 'rgba(139,92,246,0.9)'
|
||||
: inKey
|
||||
? `rgba(180,130,0,${0.35 + energy * 0.55})`
|
||||
: `rgba(12,12,16,0.95)`
|
||||
? monoColor ? 'rgba(192,132,252,0.85)' : 'rgba(180,130,0,0.85)'
|
||||
: 'rgba(70,70,80,0.75)'
|
||||
const pct = showPct ? Math.round(values[pc] * 100) : 0
|
||||
|
||||
return (
|
||||
<g key={`b${i}`}>
|
||||
{/* Base */}
|
||||
<rect x={x} y={3} width={BLACK_W} height={BLACK_H}
|
||||
rx={2} fill={bg} stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
|
||||
<text x={x + BLACK_W/2} y={BLACK_H - 5} textAnchor="middle" fontSize={7}
|
||||
rx={2} fill="rgb(14,14,18)" stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
|
||||
{/* Partial fill from bottom — same mechanic as white keys */}
|
||||
{energy > (inChord || inKey ? 0.05 : 0.35) && (
|
||||
<rect
|
||||
x={x} y={3 + BLACK_H * (1 - Math.min(energy, 1) * 0.9)}
|
||||
width={BLACK_W} height={BLACK_H * Math.min(energy, 1) * 0.9}
|
||||
rx={1} fill={fillColor} />
|
||||
)}
|
||||
{/* % label near top of key (inside) */}
|
||||
{showPct && pct > 0 && (
|
||||
<text x={x + BLACK_W/2} y={3 + 10} textAnchor="middle" fontSize={7}
|
||||
fill={inKey || inChord ? 'rgba(220,220,230,0.9)' : 'rgba(110,110,120,0.7)'}>
|
||||
{pct}%
|
||||
</text>
|
||||
)}
|
||||
{/* Note name near bottom of key */}
|
||||
<text x={x + BLACK_W/2} y={3 + BLACK_H - 5} textAnchor="middle" fontSize={7}
|
||||
fill={inKey || inChord ? 'rgba(210,210,220,0.85)' : 'rgba(110,110,120,0.6)'}>
|
||||
{NOTES[pc]}
|
||||
</text>
|
||||
@@ -113,7 +131,7 @@ const MF_H = MF_PAD_T + 5 * MF_STR_H + MF_PAD_B
|
||||
const mfFretX = f => MF_NUT_X + (f - 0.5) * MF_FRET_W
|
||||
const mfStringY = si => MF_PAD_T + si * MF_STR_H
|
||||
|
||||
function MiniFretboard({ values, keyNotes, chordNotes }) {
|
||||
function MiniFretboard({ values, keyNotes, chordNotes, monoColor = false }) {
|
||||
const max = Math.max(...values, 0.01)
|
||||
|
||||
return (
|
||||
@@ -170,7 +188,8 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
|
||||
const energy = values[pc] / max
|
||||
const inChord = chordNotes?.has(pc)
|
||||
const inKey = keyNotes?.has(pc)
|
||||
if (!inChord && !inKey && energy < 0.12) return null
|
||||
if (!inChord && !inKey && energy < 0.35) return null
|
||||
if ((inChord || inKey) && energy < 0.08) return null
|
||||
|
||||
const cx = fi === 0 ? MF_OPEN_X : mfFretX(fi)
|
||||
const cy = mfStringY(si)
|
||||
@@ -180,8 +199,8 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
|
||||
fill = `rgba(168,85,247,${0.3 + energy * 0.7})`
|
||||
textFill = '#fff'
|
||||
} else if (inKey) {
|
||||
fill = `rgba(245,158,11,${0.2 + energy * 0.75})`
|
||||
textFill = 'rgba(0,0,0,0.85)'
|
||||
fill = monoColor ? `rgba(192,132,252,${0.2 + energy * 0.75})` : `rgba(245,158,11,${0.2 + energy * 0.75})`
|
||||
textFill = monoColor ? '#fff' : 'rgba(0,0,0,0.85)'
|
||||
} else {
|
||||
fill = `rgba(100,100,120,${energy * 0.7})`
|
||||
textFill = 'rgba(180,180,190,0.7)'
|
||||
@@ -191,7 +210,7 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
|
||||
<g key={`${si}-${fi}`}>
|
||||
{energy > 0.3 && (inChord || inKey) && (
|
||||
<circle cx={cx} cy={cy} r={MF_DOT_R + 4}
|
||||
fill={inChord ? 'rgba(168,85,247,0.25)' : 'rgba(245,158,11,0.2)'}
|
||||
fill={inChord ? 'rgba(168,85,247,0.25)' : monoColor ? 'rgba(192,132,252,0.2)' : 'rgba(245,158,11,0.2)'}
|
||||
style={{ filter: 'blur(4px)' }} />
|
||||
)}
|
||||
<circle cx={cx} cy={cy} r={MF_DOT_R} fill={fill} />
|
||||
@@ -206,27 +225,338 @@ function MiniFretboard({ values, keyNotes, chordNotes }) {
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Oscilloscope strip ───────────────────────────────────────────────────────
|
||||
const OSC_W = 600
|
||||
const OSC_H = 110
|
||||
|
||||
function Oscilloscope({ waveform }) {
|
||||
const { wave, rms, detectedFreq, detectedNote } = waveform || {}
|
||||
const silent = !rms || rms < 0.005
|
||||
|
||||
// ── Note scroll history — last 5 distinct notes ───────────────────────────
|
||||
const noteHistoryRef = useRef([]) // [{ note, freq, id }, ...] oldest first
|
||||
const lastNoteRef = useRef(null)
|
||||
const noteIdRef = useRef(0)
|
||||
const lastDisplayRef = useRef(null) // last detected note shown in header — never flickers
|
||||
if (detectedNote && detectedNote !== lastNoteRef.current) {
|
||||
lastNoteRef.current = detectedNote
|
||||
lastDisplayRef.current = { note: detectedNote, freq: detectedFreq }
|
||||
noteHistoryRef.current.push({ note: detectedNote, freq: detectedFreq, id: noteIdRef.current++ })
|
||||
if (noteHistoryRef.current.length > 5) noteHistoryRef.current.shift()
|
||||
} else if (detectedFreq && detectedNote) {
|
||||
lastDisplayRef.current = { note: detectedNote, freq: detectedFreq }
|
||||
}
|
||||
|
||||
// ── Ghost waveform — holds the last clear-pitch shape, fades slowly ───────
|
||||
const ghostRef = useRef({ path: '', fill: '', opacity: 0 })
|
||||
if (detectedFreq) {
|
||||
ghostRef.current = { path: '', fill: '', opacity: 1 } // will be filled below
|
||||
} else {
|
||||
ghostRef.current = { ...ghostRef.current, opacity: ghostRef.current.opacity * 0.97 }
|
||||
}
|
||||
|
||||
let path = '', sinePath = ''
|
||||
if (wave?.length) {
|
||||
const mid = OSC_H / 2
|
||||
const waveAmp = Math.max(...wave.map(Math.abs), 0.001)
|
||||
const gain = Math.min((OSC_H * 0.44) / waveAmp, OSC_H * 0.44)
|
||||
|
||||
const lo = Math.floor(wave.length / 4)
|
||||
const hi = Math.floor(wave.length / 2)
|
||||
let offset = lo
|
||||
for (let i = lo; i < hi - 1; i++) {
|
||||
if (wave[i] <= 0 && wave[i + 1] > 0) { offset = i; break }
|
||||
}
|
||||
const drawLen = Math.min(wave.length - offset, Math.floor(wave.length * 0.85))
|
||||
const step = OSC_W / drawLen
|
||||
|
||||
path = Array.from({ length: drawLen }, (_, i) => {
|
||||
const v = wave[offset + i]
|
||||
return `${i === 0 ? 'M' : 'L'}${(i * step).toFixed(1)},${(mid - v * gain).toFixed(1)}`
|
||||
}).join(' ')
|
||||
|
||||
// Capture ghost path when we have a clear pitch
|
||||
if (detectedFreq) {
|
||||
ghostRef.current.path = path
|
||||
ghostRef.current.fill = path + ` L${OSC_W},${mid} L0,${mid} Z`
|
||||
}
|
||||
|
||||
if (detectedFreq) {
|
||||
const effectiveSR = 44100 / 8
|
||||
const sineAmp = Math.min(waveAmp * gain * 0.55, OSC_H * 0.38)
|
||||
sinePath = Array.from({ length: 300 }, (_, i) => {
|
||||
const t = i / 299
|
||||
const x = (t * OSC_W).toFixed(1)
|
||||
const phase = ((offset + t * drawLen) / effectiveSR) * detectedFreq * Math.PI * 2
|
||||
const y = (mid - Math.sin(phase) * sineAmp).toFixed(1)
|
||||
return `${i === 0 ? 'M' : 'L'}${x},${y}`
|
||||
}).join(' ')
|
||||
}
|
||||
}
|
||||
|
||||
const lineColor = detectedFreq
|
||||
? 'rgba(168,85,247,0.9)'
|
||||
: silent ? 'rgba(50,50,60,0.8)' : 'rgba(100,200,140,0.75)'
|
||||
|
||||
const ghost = ghostRef.current
|
||||
const ghostOp = ghost.opacity
|
||||
const noteHistory = noteHistoryRef.current
|
||||
const lastDisplay = lastDisplayRef.current
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<p className="text-xs text-gray-600 uppercase tracking-widest">Oscilloscope — raw mic input</p>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastDisplay && (
|
||||
<>
|
||||
<span className={`text-xs font-bold ${detectedFreq ? 'text-accent' : 'text-gray-500'}`}>{lastDisplay.note}</span>
|
||||
<span className="text-xs text-gray-500 tabular-nums">{lastDisplay.freq.toFixed(1)} Hz</span>
|
||||
<span className="text-xs text-gray-600 tabular-nums">{(1000 / lastDisplay.freq).toFixed(2)} ms / cycle</span>
|
||||
</>
|
||||
)}
|
||||
{silent && <span className="text-xs text-gray-700">silence</span>}
|
||||
<span className="text-xs text-gray-700 tabular-nums">rms {rms ? (rms * 100).toFixed(1) : '0.0'}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox={`0 0 ${OSC_W} ${OSC_H}`} width="100%" style={{ display: 'block' }}
|
||||
className="rounded-lg bg-surface border border-border">
|
||||
{/* Zero line */}
|
||||
<line x1={0} y1={OSC_H / 2} x2={OSC_W} y2={OSC_H / 2}
|
||||
stroke="rgba(255,255,255,0.05)" strokeWidth={0.5} />
|
||||
|
||||
{/* Ghost waveform — previous clear-pitch shape fading out */}
|
||||
{ghost.path && ghostOp > 0.04 && !detectedFreq && (
|
||||
<>
|
||||
<path d={ghost.fill} fill={`rgba(168,85,247,${(ghostOp * 0.06).toFixed(3)})`} />
|
||||
<path d={ghost.path} fill="none"
|
||||
stroke={`rgba(150,120,200,${(ghostOp * 0.35).toFixed(3)})`}
|
||||
strokeWidth={0.8} strokeLinejoin="round" strokeLinecap="round" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Fill body */}
|
||||
{path && (
|
||||
<path
|
||||
d={`${path} L${OSC_W},${OSC_H / 2} L0,${OSC_H / 2} Z`}
|
||||
fill={detectedFreq
|
||||
? 'rgba(168,85,247,0.08)'
|
||||
: silent ? 'none' : 'rgba(90,190,130,0.07)'}
|
||||
/>
|
||||
)}
|
||||
{/* Waveform line */}
|
||||
{path && <path d={path} fill="none" stroke={lineColor} strokeWidth={0.9}
|
||||
strokeLinejoin="round" strokeLinecap="round" />}
|
||||
{/* Sine overlay */}
|
||||
{sinePath && <path d={sinePath} fill="none"
|
||||
stroke="rgba(168,85,247,0.28)" strokeWidth={0.9}
|
||||
strokeLinejoin="round" strokeDasharray="5 4" />}
|
||||
|
||||
{/* Scrolling note history — newest on right, slides left on each new note */}
|
||||
{noteHistory.map((entry, i) => {
|
||||
const age = noteHistory.length - 1 - i // 0 = newest
|
||||
const x = OSC_W - 28 - age * 100
|
||||
const op = (1 - age * 0.18).toFixed(2)
|
||||
const isNew = age === 0
|
||||
return (
|
||||
<g key={entry.id}
|
||||
style={{ transform: `translateX(${x}px)`, transition: 'transform 0.45s cubic-bezier(0.4,0,0.2,1)' }}>
|
||||
<text x={0} y={OSC_H - 18} textAnchor="middle"
|
||||
fontSize={isNew ? 13 : 11} fontWeight={isNew ? '700' : '400'}
|
||||
fill={isNew ? `rgba(168,85,247,${op})` : `rgba(160,130,210,${op})`}>
|
||||
{entry.note}
|
||||
</text>
|
||||
<text x={0} y={OSC_H - 7} textAnchor="middle" fontSize={7}
|
||||
fill={`rgba(120,100,160,${(parseFloat(op) * 0.7).toFixed(2)})`}>
|
||||
{entry.freq ? entry.freq.toFixed(0) : ''}Hz
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Frequency spectrum ───────────────────────────────────────────────────────
|
||||
const SPEC_H = 130
|
||||
const SPEC_F_MIN = 40
|
||||
const SPEC_F_MAX = 4000
|
||||
const SPEC_LOG = Math.log(SPEC_F_MAX / SPEC_F_MIN)
|
||||
|
||||
// Map a frequency in Hz to an x pixel position (log scale)
|
||||
function specX(f, w) {
|
||||
if (f <= SPEC_F_MIN) return 0
|
||||
if (f >= SPEC_F_MAX) return w
|
||||
return w * Math.log(f / SPEC_F_MIN) / SPEC_LOG
|
||||
}
|
||||
|
||||
const SPEC_GRID = [
|
||||
{ label: 'E2', freq: 82.4 },
|
||||
{ label: 'C3', freq: 130.8 },
|
||||
{ label: 'E3', freq: 164.8 },
|
||||
{ label: 'A3', freq: 220 },
|
||||
{ label: 'C4', freq: 261.6 },
|
||||
{ label: 'E4', freq: 329.6 },
|
||||
{ label: 'A4', freq: 440 },
|
||||
{ label: 'C5', freq: 523.3 },
|
||||
{ label: 'C6', freq: 1046.5},
|
||||
{ label: 'C7', freq: 2093 },
|
||||
]
|
||||
|
||||
function SpectrumPanel({ spectrum, detectedFreq }) {
|
||||
const W = OSC_W
|
||||
const ghostRef = useRef(null)
|
||||
const ghostFreqRef = useRef(null) // { freq, opacity }
|
||||
|
||||
// Ghost frequency lines — lock on detection, decay slowly when gone
|
||||
if (detectedFreq) {
|
||||
ghostFreqRef.current = { freq: detectedFreq, opacity: 1 }
|
||||
} else if (ghostFreqRef.current) {
|
||||
ghostFreqRef.current = { freq: ghostFreqRef.current.freq, opacity: ghostFreqRef.current.opacity * 0.97 }
|
||||
}
|
||||
const ghostFreq = ghostFreqRef.current?.opacity > 0.04 ? ghostFreqRef.current.freq : null
|
||||
const ghostOpacity = ghostFreqRef.current?.opacity ?? 0
|
||||
|
||||
// Ghost: rises instantly with signal, decays very slowly — lingers as grey
|
||||
if (spectrum?.length) {
|
||||
if (!ghostRef.current) ghostRef.current = new Float32Array(spectrum.length)
|
||||
const ghost = ghostRef.current
|
||||
for (let i = 0; i < spectrum.length; i++) {
|
||||
ghost[i] = spectrum[i] > ghost[i] ? spectrum[i] : ghost[i] * 0.988
|
||||
}
|
||||
}
|
||||
|
||||
let fillPath = '', strokePath = '', ghostFill = '', ghostStroke = ''
|
||||
|
||||
if (spectrum?.length) {
|
||||
const n = spectrum.length
|
||||
const pts = Array.from({ length: n }, (_, i) => {
|
||||
const x = ((i / (n - 1)) * W).toFixed(1)
|
||||
const y = (SPEC_H * (1 - spectrum[i])).toFixed(1)
|
||||
return `${i === 0 ? 'M' : 'L'}${x},${y}`
|
||||
}).join(' ')
|
||||
strokePath = pts
|
||||
fillPath = pts + ` L${W},${SPEC_H} L0,${SPEC_H} Z`
|
||||
|
||||
const ghost = ghostRef.current
|
||||
if (ghost) {
|
||||
const gpts = Array.from({ length: n }, (_, i) => {
|
||||
const x = ((i / (n - 1)) * W).toFixed(1)
|
||||
const y = (SPEC_H * (1 - ghost[i])).toFixed(1)
|
||||
return `${i === 0 ? 'M' : 'L'}${x},${y}`
|
||||
}).join(' ')
|
||||
ghostStroke = gpts
|
||||
ghostFill = gpts + ` L${W},${SPEC_H} L0,${SPEC_H} Z`
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 uppercase tracking-widest mb-1">
|
||||
Frequency spectrum — 40 Hz → 4 kHz (log scale)
|
||||
</p>
|
||||
<svg viewBox={`0 0 ${W} ${SPEC_H}`} width="100%" style={{ display: 'block' }}
|
||||
className="rounded-lg bg-surface border border-border">
|
||||
|
||||
{/* Note grid lines */}
|
||||
{SPEC_GRID.map(({ label, freq }) => {
|
||||
const x = specX(freq, W).toFixed(1)
|
||||
return (
|
||||
<g key={label}>
|
||||
<line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
|
||||
stroke="rgba(255,255,255,0.06)" strokeWidth={1} />
|
||||
<text x={x} y={SPEC_H - 3} textAnchor="middle" fontSize={7.5}
|
||||
fill="rgba(80,80,95,0.9)">{label}</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Ghost — slow-decaying grey residue from previous peaks */}
|
||||
{ghostFill && (
|
||||
<>
|
||||
<path d={ghostFill} fill="rgba(120,120,130,0.08)" />
|
||||
<path d={ghostStroke} fill="none" stroke="rgba(130,130,145,0.30)" strokeWidth={0.7} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Live spectrum fill + stroke */}
|
||||
{fillPath && (
|
||||
<>
|
||||
<path d={fillPath} fill="rgba(80,180,130,0.13)" />
|
||||
<path d={strokePath} fill="none" stroke="rgba(90,200,145,0.55)" strokeWidth={0.8} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Fundamental + harmonics */}
|
||||
{ghostFreq && [1, 2, 3, 4, 5].map(h => {
|
||||
const hf = ghostFreq * h
|
||||
if (hf > SPEC_F_MAX) return null
|
||||
const xNum = specX(hf, W)
|
||||
const x = xNum.toFixed(1)
|
||||
const midi = Math.round(12 * Math.log2(hf / 440) + 69)
|
||||
const note = NOTES[((midi % 12) + 12) % 12]
|
||||
const oct = Math.floor(midi / 12) - 1
|
||||
// Place label left of line near the right edge, right of line elsewhere
|
||||
const labelX = xNum > W - 40 ? xNum - 3 : xNum + 3
|
||||
const anchor = xNum > W - 40 ? 'end' : 'start'
|
||||
|
||||
if (h === 1) {
|
||||
const op = (0.9 * ghostOpacity).toFixed(3)
|
||||
const textOp = (ghostOpacity * 0.95).toFixed(3)
|
||||
return (
|
||||
<g key={h}>
|
||||
<line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
|
||||
stroke={`rgba(168,85,247,${op})`} strokeWidth={1.2} />
|
||||
<text x={labelX} y={10} textAnchor={anchor} fontSize={8} fontWeight="700"
|
||||
fill={`rgba(168,85,247,${textOp})`}>{note}{oct}</text>
|
||||
<text x={labelX} y={20} textAnchor={anchor} fontSize={7}
|
||||
fill={`rgba(168,85,247,${(ghostOpacity * 0.55).toFixed(3)})`}>f</text>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
const op = ((0.5 - (h - 2) * 0.1) * ghostOpacity).toFixed(3)
|
||||
return (
|
||||
<g key={h}>
|
||||
<line x1={x} y1={0} x2={x} y2={SPEC_H - 14}
|
||||
stroke={`rgba(168,85,247,${op})`} strokeWidth={0.7} strokeDasharray="3 4" />
|
||||
<text x={labelX} y={10} textAnchor={anchor} fontSize={7.5}
|
||||
fill={`rgba(168,85,247,${op})`}>{note}{oct}</text>
|
||||
<text x={labelX} y={19} textAnchor={anchor} fontSize={7}
|
||||
fill={`rgba(168,85,247,${(parseFloat(op) * 0.7).toFixed(3)})`}>{h}f</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main component ───────────────────────────────────────────────────────────
|
||||
export default function DebugView({ chroma, chordCandidates, noteAnalysis, keyInfo, currentChord, instrument = 'guitar' }) {
|
||||
export default function DebugView({ chroma, chordCandidates, noteAnalysis, waveform, keyInfo, currentChord, instrument = 'guitar', monoColor = false }) {
|
||||
const keyPCs = new Set(keyInfo ? getScale(keyInfo.root, keyInfo.mode).map(n => NOTES.indexOf(n)) : [])
|
||||
const chordPCs = new Set(currentChord ? getChordTones(currentChord).map(n => NOTES.indexOf(n)) : [])
|
||||
|
||||
const chromaArr = chroma ? [...chroma] : new Array(12).fill(0)
|
||||
const histFreq = noteAnalysis ? noteAnalysis.freq : new Array(12).fill(0)
|
||||
const topKeys = noteAnalysis ? noteAnalysis.topKeys : []
|
||||
const chromaArr = chroma ? [...chroma] : new Array(12).fill(0)
|
||||
const histFreq = noteAnalysis ? noteAnalysis.freq : new Array(12).fill(0)
|
||||
const topKeys = noteAnalysis ? noteAnalysis.topKeys : []
|
||||
const totalNotes = noteAnalysis?.total ?? 0
|
||||
const sessionSecs = noteAnalysis?.sessionSecs ?? 0
|
||||
const sessionLabel = sessionSecs >= 60
|
||||
? `${Math.floor(sessionSecs / 60)}m ${sessionSecs % 60}s`
|
||||
: `${sessionSecs}s`
|
||||
const topScore = chordCandidates[0]?.score ?? 1
|
||||
const topKeyScore = topKeys[0]?.score ?? 1
|
||||
|
||||
return (
|
||||
<div className="bg-panel border border-border rounded-2xl p-4 flex flex-col gap-4">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-widest shrink-0">Behind the Scenes</p>
|
||||
|
||||
{/* ── Live chroma visualization (instrument-synced) ── */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* ── Live chroma visualization (instrument-synced) ── */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 uppercase tracking-widest mb-2">Live chroma — what the engine hears right now</p>
|
||||
{instrument === 'guitar'
|
||||
? <MiniFretboard values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} />
|
||||
: <PianoSVG values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} keyH={90} />
|
||||
? <MiniFretboard values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} monoColor={monoColor} />
|
||||
: <PianoSVG values={chromaArr} keyNotes={keyPCs} chordNotes={chordPCs} keyH={90} monoColor={monoColor} />
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -269,8 +599,15 @@ export default function DebugView({ chroma, chordCandidates, noteAnalysis, keyIn
|
||||
|
||||
{/* Col 2: Note history piano with % labels */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 uppercase tracking-widest mb-2">Note history — key evidence</p>
|
||||
<PianoSVG values={histFreq} keyNotes={keyPCs} chordNotes={chordPCs} keyH={70} showPct={true} />
|
||||
<div className="flex items-baseline justify-between mb-2">
|
||||
<p className="text-xs text-gray-600 uppercase tracking-widest">Note history</p>
|
||||
{totalNotes > 0 && (
|
||||
<span className="text-[10px] text-gray-600 tabular-nums">
|
||||
{totalNotes.toLocaleString()} notes · {sessionLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<PianoSVG values={histFreq} keyNotes={keyPCs} chordNotes={chordPCs} keyH={70} showPct={true} monoColor={monoColor} />
|
||||
</div>
|
||||
|
||||
{/* Col 3: Key candidates */}
|
||||
@@ -298,6 +635,12 @@ export default function DebugView({ chroma, chordCandidates, noteAnalysis, keyIn
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ── Oscilloscope + spectrum ── */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<Oscilloscope waveform={waveform} />
|
||||
<SpectrumPanel spectrum={waveform?.spectrum} detectedFreq={waveform?.detectedFreq} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
import { useRef, useEffect } from 'react'
|
||||
|
||||
// Map a frequency (Hz) to a bin index in the 256-bin log spectrum (40–4000 Hz)
|
||||
function freqToBin(freq) {
|
||||
return Math.round(255 * Math.log(freq / 40) / Math.log(4000 / 40))
|
||||
}
|
||||
|
||||
function bandMax(spectrum, lo, hi) {
|
||||
if (!spectrum) return 0
|
||||
const a = freqToBin(lo)
|
||||
const b = Math.min(freqToBin(hi), spectrum.length - 1)
|
||||
let max = 0
|
||||
for (let i = a; i <= b; i++) if (spectrum[i] > max) max = spectrum[i]
|
||||
return max
|
||||
}
|
||||
|
||||
const BANDS = [
|
||||
{ label: 'Kick', lo: 40, hi: 120, color: '#ef4444' },
|
||||
{ label: 'Snare', lo: 120, hi: 300, color: '#f59e0b' },
|
||||
{ label: 'Mid', lo: 300, hi: 1000, color: '#22c55e' },
|
||||
{ label: 'Presence', lo: 1000, hi: 4000, color: '#60a5fa' },
|
||||
]
|
||||
|
||||
const TIMELINE_MS = 4000 // onset timeline window
|
||||
const RMS_HISTORY = 180 // ~3s at 60fps
|
||||
|
||||
export default function DrumView({ waveform, bpm }) {
|
||||
const rmsHistRef = useRef([])
|
||||
const beatCanvasRef = useRef(null)
|
||||
const rmsCanvasRef = useRef(null)
|
||||
|
||||
const spectrum = waveform?.spectrum ?? null
|
||||
const bandLevels = BANDS.map(b => bandMax(spectrum, b.lo, b.hi))
|
||||
|
||||
// Accumulate RMS history
|
||||
useEffect(() => {
|
||||
if (waveform == null) return
|
||||
const h = rmsHistRef.current
|
||||
h.push(Math.min(waveform.rms * 10, 1))
|
||||
if (h.length > RMS_HISTORY) h.shift()
|
||||
}, [waveform])
|
||||
|
||||
// Draw onset / beat timeline
|
||||
useEffect(() => {
|
||||
const canvas = beatCanvasRef.current
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
const W = canvas.width, H = canvas.height
|
||||
|
||||
ctx.fillStyle = '#0a0a0a'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
|
||||
const onsets = waveform?.onsets ?? []
|
||||
const now = performance.now()
|
||||
|
||||
// Beat grid aligned to the most recent onset
|
||||
if (bpm) {
|
||||
const beatMs = 60000 / bpm
|
||||
const numBeats = Math.ceil(TIMELINE_MS / beatMs) + 1
|
||||
const latest = onsets[onsets.length - 1]
|
||||
const phase = latest != null ? (now - latest) % beatMs : 0
|
||||
for (let b = 0; b <= numBeats; b++) {
|
||||
const ageMs = b * beatMs - phase
|
||||
if (ageMs < 0 || ageMs > TIMELINE_MS) continue
|
||||
const x = W * (1 - ageMs / TIMELINE_MS)
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.07)'
|
||||
ctx.lineWidth = 1
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
// Onset dots + vertical tails
|
||||
const recent = onsets.filter(t => now - t <= TIMELINE_MS)
|
||||
for (const t of recent) {
|
||||
const age = now - t
|
||||
const x = W * (1 - age / TIMELINE_MS)
|
||||
const alpha = Math.pow(1 - age / TIMELINE_MS, 0.4)
|
||||
ctx.strokeStyle = `rgba(168,85,247,${(alpha * 0.35).toFixed(2)})`
|
||||
ctx.lineWidth = 1
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
ctx.fillStyle = `rgba(168,85,247,${alpha.toFixed(2)})`
|
||||
ctx.beginPath(); ctx.arc(x, H / 2, 5, 0, Math.PI * 2); ctx.fill()
|
||||
}
|
||||
|
||||
// "Now" edge
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.18)'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath(); ctx.moveTo(W - 1, 0); ctx.lineTo(W - 1, H); ctx.stroke()
|
||||
}, [waveform, bpm])
|
||||
|
||||
// Draw RMS envelope
|
||||
useEffect(() => {
|
||||
const canvas = rmsCanvasRef.current
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
const W = canvas.width, H = canvas.height
|
||||
const h = rmsHistRef.current
|
||||
|
||||
ctx.fillStyle = '#0a0a0a'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
if (h.length < 2) return
|
||||
|
||||
const barW = W / RMS_HISTORY
|
||||
for (let i = 0; i < h.length; i++) {
|
||||
const x = W * (i / RMS_HISTORY)
|
||||
const barH = h[i] * H
|
||||
const v = Math.round(h[i] * 160 + 60)
|
||||
ctx.fillStyle = `rgb(${v},30,${v})`
|
||||
ctx.fillRect(x, H - barH, Math.max(barW - 0.5, 1), barH)
|
||||
}
|
||||
}, [waveform])
|
||||
|
||||
const noData = !waveform
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
|
||||
{/* Band meters */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 font-mono uppercase tracking-widest mb-2">Frequency Bands</p>
|
||||
<div className="flex gap-3" style={{ height: 96 }}>
|
||||
{BANDS.map((b, i) => (
|
||||
<div key={b.label} className="flex flex-col items-center gap-1 flex-1">
|
||||
<div className="flex-1 w-full bg-gray-900 rounded-sm relative overflow-hidden">
|
||||
{noData ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-[9px] text-gray-700 font-mono">—</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 rounded-sm"
|
||||
style={{
|
||||
height: `${bandLevels[i] * 100}%`,
|
||||
backgroundColor: b.color,
|
||||
transition: 'height 60ms linear',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] font-mono text-gray-500 uppercase">{b.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Onset timeline */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 font-mono uppercase tracking-widest mb-2">
|
||||
Onset Timeline{bpm ? ` · ${bpm} BPM` : ''}
|
||||
<span className="ml-2 text-gray-700 normal-case">← 4 seconds</span>
|
||||
</p>
|
||||
<canvas
|
||||
ref={beatCanvasRef}
|
||||
width={800}
|
||||
height={56}
|
||||
className="w-full rounded"
|
||||
style={{ height: 56 }}
|
||||
/>
|
||||
{noData && (
|
||||
<p className="text-xs text-gray-700 font-mono mt-1 text-center">Start listening to see hits</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Volume envelope */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-600 font-mono uppercase tracking-widest mb-2">
|
||||
Volume Envelope
|
||||
<span className="ml-2 text-gray-700 normal-case">← ~3 seconds</span>
|
||||
</p>
|
||||
<canvas
|
||||
ref={rmsCanvasRef}
|
||||
width={800}
|
||||
height={56}
|
||||
className="w-full rounded"
|
||||
style={{ height: 56 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,397 @@
|
||||
import { useState } from 'react'
|
||||
import { toRomanNumeral, CHORD_TYPES, NOTES } from '../lib/theory'
|
||||
import {
|
||||
findSimilarProgressions,
|
||||
getChordSubstitutions,
|
||||
progressionInKey,
|
||||
styleVariationInKey,
|
||||
parseChord,
|
||||
} from '../lib/education'
|
||||
|
||||
// ─── Session Snapshot ─────────────────────────────────────────────────────────
|
||||
function SessionSnapshot({ keyInfo, detectedProgression, chordHistory }) {
|
||||
const { root, mode, confidence } = keyInfo ?? {}
|
||||
const uniqueChords = [...new Set(chordHistory)]
|
||||
const totalPlayed = chordHistory.length
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-4 p-4 bg-surface border border-border rounded-xl">
|
||||
<div className="flex flex-col gap-1 min-w-[120px]">
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600">Key</p>
|
||||
{root ? (
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-2xl font-black text-accent">{root}</span>
|
||||
<span className="text-sm text-gray-400 capitalize">{mode}</span>
|
||||
{confidence && <span className="text-xs text-gray-600">{Math.round(confidence * 100)}%</span>}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-600 text-sm">Detecting…</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-px bg-border shrink-0" />
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600">Detected Loop</p>
|
||||
{detectedProgression?.length ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{detectedProgression.map((chord, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-accent/10 border border-accent/30 rounded text-xs font-bold text-accent">
|
||||
{chord}
|
||||
{root && <span className="text-amber-400/70 ml-1 font-normal text-[10px]">
|
||||
{toRomanNumeral(chord, root, mode)}
|
||||
</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-600 text-sm">None yet — keep playing!</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-px bg-border shrink-0" />
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600">Session</p>
|
||||
<p className="text-sm text-gray-300">
|
||||
<span className="font-bold text-white">{totalPlayed}</span> chords ·
|
||||
<span className="font-bold text-white">{uniqueChords.length}</span> unique
|
||||
</p>
|
||||
{uniqueChords.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-0.5">
|
||||
{uniqueChords.slice(0, 10).map(c => (
|
||||
<span key={c} className="text-[10px] text-gray-500 bg-border px-1.5 py-0.5 rounded">{c}</span>
|
||||
))}
|
||||
{uniqueChords.length > 10 && <span className="text-[10px] text-gray-600">+{uniqueChords.length - 10}</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Similar Progressions ─────────────────────────────────────────────────────
|
||||
function SimilarProgressions({ similar, keyInfo, onChordClick }) {
|
||||
const [expanded, setExpanded] = useState(null)
|
||||
if (!similar.length) return (
|
||||
<p className="text-gray-600 text-sm text-center py-4">
|
||||
Play more chords and lock a key to find similar famous progressions.
|
||||
</p>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{similar.map(prog => {
|
||||
const isOpen = expanded === prog.id
|
||||
const chordsInKey = keyInfo?.root ? progressionInKey(prog, keyInfo.root) : []
|
||||
|
||||
return (
|
||||
<div key={prog.id}
|
||||
className="border border-border rounded-xl overflow-hidden hover:border-accent/30 transition-colors">
|
||||
|
||||
{/* Header row */}
|
||||
<button
|
||||
onClick={() => setExpanded(isOpen ? null : prog.id)}
|
||||
className="w-full flex items-start justify-between gap-3 px-4 py-3 text-left"
|
||||
>
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-bold text-white text-sm">{prog.name}</span>
|
||||
{prog.genre.map(g => (
|
||||
<span key={g} className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 rounded text-[10px] text-accent">{g}</span>
|
||||
))}
|
||||
<span className="text-[11px] text-gray-500 font-mono">{prog.pattern}</span>
|
||||
<span className="ml-auto text-xs text-gray-600">{Math.round(prog.score * 100)}% match</span>
|
||||
</div>
|
||||
{/* Chords in current key */}
|
||||
{chordsInKey.length > 0 && (
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{chordsInKey.map((c, i) => (
|
||||
<button key={i}
|
||||
onClick={e => { e.stopPropagation(); onChordClick?.(c) }}
|
||||
className="px-2 py-0.5 bg-surface border border-border hover:border-accent/50 rounded text-xs font-bold text-gray-200 hover:text-accent transition-colors"
|
||||
title={`See voicings for ${c}`}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
))}
|
||||
<span className="text-[10px] text-gray-600 self-center ml-1">in {keyInfo.root} {keyInfo.mode}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-gray-600 shrink-0 text-sm mt-0.5">{isOpen ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{/* Expanded detail */}
|
||||
{isOpen && (
|
||||
<div className="border-t border-border px-4 py-4 flex flex-col gap-4">
|
||||
<p className="text-sm text-gray-400">{prog.description}</p>
|
||||
{prog.tip && (
|
||||
<p className="text-xs text-amber-400/80">
|
||||
<span className="text-amber-400 font-semibold">Insight:</span> {prog.tip}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Song examples */}
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Famous examples</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{prog.songs.map(s => (
|
||||
<span key={s} className="px-2 py-1 bg-surface border border-border rounded-lg text-xs text-gray-400">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Style variations */}
|
||||
{prog.styleVariations.length > 0 && (
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-600 mb-2">Style variations</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{prog.styleVariations.map(sv => {
|
||||
const svChords = keyInfo?.root ? styleVariationInKey(sv, prog, keyInfo.root) : []
|
||||
return (
|
||||
<div key={sv.label} className="flex items-start gap-3 p-2 bg-surface rounded-lg border border-border">
|
||||
<span className="text-xs font-bold text-accent shrink-0 w-16">{sv.label}</span>
|
||||
<div className="flex flex-col gap-1 min-w-0">
|
||||
<span className="text-xs text-gray-500 font-mono">{sv.pattern}</span>
|
||||
{svChords.length > 0 && (
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{svChords.map((c, i) => (
|
||||
<button key={i}
|
||||
onClick={() => onChordClick?.(c)}
|
||||
className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 hover:border-accent rounded text-[11px] font-bold text-accent/90 hover:text-accent transition-colors"
|
||||
title={`See voicings for ${c}`}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
))}
|
||||
<span className="text-[10px] text-gray-600 self-center ml-1">in {keyInfo.root}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Play It Differently ──────────────────────────────────────────────────────
|
||||
function PlayDifferently({ progression, onChordClick }) {
|
||||
if (!progression?.length) return (
|
||||
<p className="text-gray-600 text-sm text-center py-4">
|
||||
Keep playing — a repeating progression will appear here with substitution ideas.
|
||||
</p>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
Tap any substitution to see how to play it. These are harmonic replacements — same role, different colour.
|
||||
</p>
|
||||
{progression.map(chord => {
|
||||
const subs = getChordSubstitutions(chord)
|
||||
return (
|
||||
<div key={chord} className="flex flex-wrap items-start gap-3 p-3 bg-surface border border-border rounded-xl">
|
||||
{/* Original chord */}
|
||||
<button
|
||||
onClick={() => onChordClick?.(chord)}
|
||||
className="px-3 py-1.5 bg-accent text-white font-black rounded-lg text-sm shrink-0 hover:bg-purple-600 transition-colors"
|
||||
title="See voicings"
|
||||
>
|
||||
{chord}
|
||||
</button>
|
||||
|
||||
<span className="text-gray-700 self-center">→</span>
|
||||
|
||||
{/* Substitutions */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{subs.map(sub => (
|
||||
<div key={sub.chord} className="relative group">
|
||||
<button
|
||||
onClick={() => onChordClick?.(sub.chord)}
|
||||
className="px-2.5 py-1.5 bg-panel border border-border hover:border-accent/50 hover:text-accent rounded-lg text-sm font-bold text-gray-300 transition-all"
|
||||
>
|
||||
{sub.chord}
|
||||
</button>
|
||||
{/* Tooltip */}
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 w-48 px-2 py-1.5 bg-gray-900 border border-border rounded-lg text-[11px] text-gray-300 leading-snug opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10 shadow-xl">
|
||||
{sub.tip}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<p className="text-[11px] text-gray-700 text-center">
|
||||
Hover substitutions to see what they change · click to see voicings
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Chord Variation Ideas ────────────────────────────────────────────────────
|
||||
const VARIATION_ROWS = [
|
||||
{
|
||||
label: '7th Upgrade',
|
||||
desc: 'Add 7ths throughout — jazz and soul texture',
|
||||
typeMap: { maj: 'maj7', min: 'min7', dom7: 'dom7', maj7: 'maj7', min7: 'min7', dim: 'dim7', add9: 'maj7', sus2: 'sus2', sus4: 'sus4', aug: 'aug', half_dim: 'half_dim', maj6: 'maj6', min6: 'min6' },
|
||||
},
|
||||
{
|
||||
label: 'Sus2 Wash',
|
||||
desc: 'Replace triads with sus2 — ambient and spacious',
|
||||
typeMap: { maj: 'sus2', min: 'sus2', dom7: 'sus4', maj7: 'sus2', min7: 'sus2', add9: 'sus2', dim: 'dim', aug: 'aug', sus4: 'sus4', sus2: 'sus2', half_dim: 'half_dim', maj6: 'sus2', min6: 'sus2' },
|
||||
},
|
||||
{
|
||||
label: 'Add9 Modern',
|
||||
desc: 'Add9 on majors, m7 on minors — indie and neo-soul',
|
||||
typeMap: { maj: 'add9', min: 'min7', dom7: 'dom7', maj7: 'add9', min7: 'min7', add9: 'add9', sus2: 'sus2', sus4: 'sus4', dim: 'dim', aug: 'aug', half_dim: 'half_dim', maj6: 'add9', min6: 'min7' },
|
||||
},
|
||||
{
|
||||
label: 'Blues Dominant',
|
||||
desc: 'All chords → dom7 — instant 12-bar blues energy',
|
||||
typeMap: { maj: 'dom7', min: 'dom7', dom7: 'dom7', maj7: 'dom7', min7: 'dom7', add9: 'dom7', sus2: 'dom7', sus4: 'dom7', dim: 'dim7', aug: 'aug', half_dim: 'dom7', maj6: 'dom7', min6: 'dom7' },
|
||||
},
|
||||
]
|
||||
|
||||
function ProgressionVariationIdeas({ progression, onChordClick }) {
|
||||
if (!progression?.length) return (
|
||||
<p className="text-gray-600 text-sm text-center py-4">
|
||||
Keep playing — your progression will appear here.
|
||||
</p>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
Your progression re-harmonised four ways. Click any chord to open its voicing explorer.
|
||||
</p>
|
||||
{VARIATION_ROWS.map(row => {
|
||||
const transformed = progression.map(chord => {
|
||||
const p = parseChord(chord)
|
||||
if (!p) return chord
|
||||
const newType = row.typeMap[p.type] ?? p.type
|
||||
return NOTES[p.rootPc] + (CHORD_TYPES[newType]?.suffix ?? '')
|
||||
})
|
||||
return (
|
||||
<div key={row.label} className="p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-2.5">
|
||||
<span className="text-xs font-bold text-accent">{row.label}</span>
|
||||
<span className="text-[11px] text-gray-500">{row.desc}</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
{progression.map((orig, i) => (
|
||||
<span key={i} className="flex items-center gap-1.5">
|
||||
<span className="text-[10px] text-gray-600">{orig}</span>
|
||||
<span className="text-gray-700 text-xs">→</span>
|
||||
<button
|
||||
onClick={() => onChordClick?.(transformed[i])}
|
||||
className="px-2.5 py-1 bg-panel border border-border hover:border-accent/50 hover:text-accent rounded-lg font-bold text-sm text-gray-200 transition-all"
|
||||
>
|
||||
{transformed[i]}
|
||||
</button>
|
||||
{i < progression.length - 1 && <span className="text-gray-700">·</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main ─────────────────────────────────────────────────────────────────────
|
||||
export default function EducationPanel({ chordHistory, keyInfo, detectedProgression, onChordClick }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [section, setSection] = useState('similar')
|
||||
|
||||
// Use detected progression if available, else last 4 unique chords from history
|
||||
const workingProgression = detectedProgression?.length
|
||||
? detectedProgression
|
||||
: [...new Set([...chordHistory].reverse())].reverse().slice(-4)
|
||||
|
||||
const similar = findSimilarProgressions(workingProgression, keyInfo)
|
||||
|
||||
return (
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span>EDUCATION</span>
|
||||
{similar.length > 0 && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 bg-accent/20 border border-accent/30 rounded text-accent">
|
||||
{similar.length} match{similar.length !== 1 ? 'es' : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span>{open ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="border-t border-border">
|
||||
|
||||
{/* Section nav */}
|
||||
<div className="flex gap-1 px-4 pt-4 pb-0 border-b border-border overflow-x-auto">
|
||||
{[
|
||||
{ key: 'snapshot', label: '📊 Session' },
|
||||
{ key: 'similar', label: `🎵 Similar Progressions${similar.length ? ` (${similar.length})` : ''}` },
|
||||
{ key: 'play', label: '🎨 Play Differently' },
|
||||
{ key: 'variations',label: '🔀 Progression Variations' },
|
||||
].map(s => (
|
||||
<button key={s.key}
|
||||
onClick={() => setSection(s.key)}
|
||||
className={`px-3 py-2 text-xs font-semibold whitespace-nowrap border-b-2 transition-all shrink-0 ${
|
||||
section === s.key
|
||||
? 'border-accent text-accent'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-300'
|
||||
}`}>
|
||||
{s.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
{section === 'snapshot' && (
|
||||
<SessionSnapshot
|
||||
keyInfo={keyInfo}
|
||||
detectedProgression={detectedProgression}
|
||||
chordHistory={chordHistory}
|
||||
/>
|
||||
)}
|
||||
{section === 'similar' && (
|
||||
<SimilarProgressions
|
||||
similar={similar}
|
||||
keyInfo={keyInfo}
|
||||
onChordClick={onChordClick}
|
||||
/>
|
||||
)}
|
||||
{section === 'play' && (
|
||||
<PlayDifferently
|
||||
progression={workingProgression}
|
||||
onChordClick={onChordClick}
|
||||
/>
|
||||
)}
|
||||
{section === 'variations' && (
|
||||
<ProgressionVariationIdeas
|
||||
progression={workingProgression}
|
||||
onChordClick={onChordClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
import { useState } from 'react'
|
||||
import ChordBox from './ChordBox'
|
||||
import MiniPiano from './MiniPiano'
|
||||
import { getGuitarVoicings, getPianoTechniques, parseChord } from '../lib/voicings'
|
||||
import { CHORD_TYPES, NOTES, getChordsInKey, toRomanNumeral } from '../lib/theory'
|
||||
import { FAMOUS_PROGRESSIONS, progressionInKey } from '../lib/education'
|
||||
|
||||
const CHORD_TYPE_OPTIONS = [
|
||||
{ key: 'maj', label: 'Major' },
|
||||
{ key: 'min', label: 'Minor' },
|
||||
{ key: 'dom7', label: '7' },
|
||||
{ key: 'maj7', label: 'maj7' },
|
||||
{ key: 'min7', label: 'm7' },
|
||||
{ key: 'dim', label: 'dim' },
|
||||
{ key: 'dim7', label: 'dim7' },
|
||||
{ key: 'half_dim', label: 'm7♭5' },
|
||||
{ key: 'aug', label: 'aug' },
|
||||
{ key: 'sus4', label: 'sus4' },
|
||||
{ key: 'sus2', label: 'sus2' },
|
||||
{ key: 'maj6', label: '6' },
|
||||
{ key: 'min6', label: 'm6' },
|
||||
{ key: 'add9', label: 'add9' },
|
||||
]
|
||||
|
||||
const MAJOR_TYPES = new Set(['maj','maj7','maj6','add9','sus4','sus2','aug','dom7'])
|
||||
|
||||
// ─── Quick-pick chip row ──────────────────────────────────────────────────────
|
||||
function ChipRow({ label, chords, active, keyInfo, onSelect }) {
|
||||
if (!chords?.length) return null
|
||||
return (
|
||||
<div className="flex items-start gap-2 flex-wrap">
|
||||
<span className="text-[10px] uppercase tracking-wider text-gray-600 w-16 pt-1 shrink-0">{label}</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{chords.map(chord => {
|
||||
const rn = keyInfo?.root ? toRomanNumeral(chord, keyInfo.root, keyInfo.mode) : ''
|
||||
return (
|
||||
<button key={chord} onClick={() => onSelect(chord)}
|
||||
className={`flex flex-col items-center px-2.5 py-1 rounded-lg border text-xs font-bold transition-all ${
|
||||
active === chord
|
||||
? 'bg-accent border-accent text-white'
|
||||
: 'bg-surface border-border text-gray-300 hover:border-accent/50 hover:text-accent'
|
||||
}`}>
|
||||
<span>{chord}</span>
|
||||
{rn && <span className="text-[9px] font-normal opacity-60 leading-none mt-0.5">{rn}</span>}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Guitar voicings grid ─────────────────────────────────────────────────────
|
||||
function GuitarGrid({ chordName }) {
|
||||
const voicings = getGuitarVoicings(chordName)
|
||||
if (!voicings.length) return <p className="text-gray-600 text-sm py-4">No voicings for {chordName}.</p>
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{voicings.map((v, i) => (
|
||||
<div key={i} className="flex flex-col items-center p-3 rounded-xl bg-surface border border-border hover:border-accent/30 transition-colors">
|
||||
<ChordBox frets={v.frets} fingers={v.fingers} barre={v.barre} baseFret={v.baseFret} />
|
||||
<p className="text-[11px] text-gray-500 text-center mt-1 max-w-[110px] leading-tight">{v.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-700 mt-3">
|
||||
Purple = chord tone · finger numbers inside dots (1=index 4=pinky) · fret number on left if not starting at fret 1
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Piano techniques grid ────────────────────────────────────────────────────
|
||||
function PianoGrid({ chordName }) {
|
||||
const parsed = parseChord(chordName)
|
||||
const techniques = getPianoTechniques(chordName)
|
||||
const rootPc = parsed?.rootPc ?? 0
|
||||
if (!techniques.length) return <p className="text-gray-600 text-sm py-4">No techniques for {chordName}.</p>
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{techniques.map((t, i) => (
|
||||
<div key={i} className="flex flex-col lg:flex-row gap-3 p-3 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
|
||||
<div className="shrink-0 overflow-x-auto">
|
||||
<MiniPiano rootPc={rootPc} lh={t.lh} rh={t.rh} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 min-w-0 justify-center">
|
||||
<p className="font-bold text-white text-sm">{t.name}</p>
|
||||
<p className="text-gray-400 text-xs">{t.desc}</p>
|
||||
<p className="text-xs text-amber-400/80 mt-0.5">
|
||||
<span className="text-amber-400 font-semibold">Tip:</span> {t.tip}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Famous progressions using this chord as tonic ───────────────────────────
|
||||
function ProgressionCards({ chordName, onChordClick }) {
|
||||
const parsed = parseChord(chordName)
|
||||
if (!parsed) return null
|
||||
const { rootPc, type } = parsed
|
||||
const root = NOTES[rootPc]
|
||||
const isMajor = MAJOR_TYPES.has(type)
|
||||
|
||||
const matching = FAMOUS_PROGRESSIONS.filter(p => {
|
||||
const q0 = p.qualities[0]
|
||||
return isMajor ? MAJOR_TYPES.has(q0) : !MAJOR_TYPES.has(q0)
|
||||
}).slice(0, 6)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
Famous progressions with <span className="text-accent font-bold">{chordName}</span> as the tonic.
|
||||
Click any chord to see its voicings.
|
||||
</p>
|
||||
{matching.map(prog => {
|
||||
const chordsHere = progressionInKey(prog, root)
|
||||
return (
|
||||
<div key={prog.id} className="p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex items-center flex-wrap gap-2 mb-2">
|
||||
<span className="font-bold text-white text-sm">{prog.name}</span>
|
||||
<span className="text-[10px] font-mono text-gray-600">{prog.pattern}</span>
|
||||
{prog.genre.slice(0, 2).map(g => (
|
||||
<span key={g} className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 rounded text-[10px] text-accent">{g}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5 items-center mb-2">
|
||||
{chordsHere.map((c, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<button onClick={() => onChordClick?.(c)}
|
||||
className={`px-2.5 py-1 rounded-lg font-bold text-sm border transition-all ${
|
||||
i === 0
|
||||
? 'bg-accent border-accent text-white'
|
||||
: 'bg-panel border-border text-gray-200 hover:border-accent/50 hover:text-accent'
|
||||
}`}>
|
||||
{c}
|
||||
</button>
|
||||
{i < chordsHere.length - 1 && <span className="text-gray-700 text-xs">→</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 leading-snug">{prog.description}</p>
|
||||
{prog.songs.length > 0 && (
|
||||
<p className="text-[11px] text-gray-700 mt-1">{prog.songs.slice(0, 3).join(' · ')}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main panel ───────────────────────────────────────────────────────────────
|
||||
export default function ExplorePanel({ keyInfo, chordHistory, onChordClick }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [root, setRoot] = useState('C')
|
||||
const [typeKey, setTypeKey] = useState('maj')
|
||||
const [view, setView] = useState('guitar') // guitar | piano | progressions
|
||||
const [active, setActive] = useState('')
|
||||
|
||||
const chordName = root + (CHORD_TYPES[typeKey]?.suffix ?? '')
|
||||
|
||||
function selectChord(chord) {
|
||||
setActive(chord)
|
||||
const p = parseChord(chord)
|
||||
if (p) { setRoot(NOTES[p.rootPc]); setTypeKey(p.type) }
|
||||
}
|
||||
|
||||
// Context-aware quick-picks
|
||||
const recentChords = [...new Set([...(chordHistory ?? [])].reverse())].slice(0, 12)
|
||||
const keyChords = keyInfo?.root ? getChordsInKey(keyInfo.root, keyInfo.mode ?? 'major') : []
|
||||
|
||||
return (
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
<button onClick={() => setOpen(v => !v)}
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all">
|
||||
<span>EXPLORE ANY CHORD</span>
|
||||
<span>{open ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="border-t border-border p-4 flex flex-col gap-4">
|
||||
|
||||
{/* ── Context quick-picks ── */}
|
||||
{(recentChords.length > 0 || keyChords.length > 0) && (
|
||||
<div className="flex flex-col gap-2.5 p-3 bg-surface border border-border rounded-xl">
|
||||
<ChipRow label="History" chords={recentChords} active={active} keyInfo={keyInfo} onSelect={selectChord} />
|
||||
{keyChords.length > 0 && recentChords.length > 0 && <div className="h-px bg-border" />}
|
||||
{keyChords.length > 0 && (
|
||||
<ChipRow
|
||||
label={keyInfo.root + ' ' + (keyInfo.mode ?? '')}
|
||||
chords={keyChords} active={active} keyInfo={keyInfo} onSelect={selectChord}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Manual chord picker ── */}
|
||||
<div className="flex flex-wrap gap-2 items-center p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{NOTES.map(n => (
|
||||
<button key={n} onClick={() => { setRoot(n); setActive('') }}
|
||||
className={`px-2 py-0.5 rounded text-xs font-bold transition-all ${
|
||||
root === n ? 'bg-accent text-white' : 'bg-border text-gray-400 hover:text-white'
|
||||
}`}>
|
||||
{n}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-px h-5 bg-border shrink-0" />
|
||||
<div className="relative">
|
||||
<select value={typeKey} onChange={e => { setTypeKey(e.target.value); setActive('') }}
|
||||
className="appearance-none bg-panel border border-border rounded-lg pl-2 pr-6 py-1 text-xs text-gray-200 cursor-pointer focus:outline-none focus:border-accent">
|
||||
{CHORD_TYPE_OPTIONS.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
|
||||
</select>
|
||||
<span className="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-gray-500 text-xs">▾</span>
|
||||
</div>
|
||||
<div className="text-2xl font-black text-accent ml-2">{chordName}</div>
|
||||
</div>
|
||||
|
||||
{/* ── View tabs ── */}
|
||||
<div className="flex gap-1 bg-surface border border-border rounded-xl p-1 w-fit">
|
||||
{[
|
||||
{ key: 'guitar', label: '🎸 Guitar Voicings' },
|
||||
{ key: 'piano', label: '🎹 Piano Techniques' },
|
||||
{ key: 'progressions', label: '🎵 Progressions' },
|
||||
].map(t => (
|
||||
<button key={t.key} onClick={() => setView(t.key)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all whitespace-nowrap ${
|
||||
view === t.key ? 'bg-accent text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
{view === 'guitar' && <GuitarGrid chordName={chordName} />}
|
||||
{view === 'piano' && <PianoGrid chordName={chordName} />}
|
||||
{view === 'progressions' && <ProgressionCards chordName={chordName} onChordClick={c => { selectChord(c); onChordClick?.(c) }} />}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import { useRef, useEffect, useState, useCallback } from 'react'
|
||||
|
||||
const STYLE = {
|
||||
empty: { border: 'border-border', bg: 'bg-surface', icon: '●', iconColor: 'text-gray-700' },
|
||||
recording: { border: 'border-red-500', bg: 'bg-red-950/20', icon: '⏺', iconColor: 'text-red-400' },
|
||||
trimming: { border: 'border-amber-400', bg: 'bg-amber-950/20', icon: '✂', iconColor: 'text-amber-400'},
|
||||
playing: { border: 'border-accent', bg: 'bg-accent/10', icon: '▶', iconColor: 'text-accent' },
|
||||
muted: { border: 'border-border', bg: 'bg-surface', icon: '⏸', iconColor: 'text-gray-500' },
|
||||
}
|
||||
|
||||
const LABEL = {
|
||||
empty: 'tap to rec',
|
||||
recording: 'tap to stop',
|
||||
trimming: 'trimming…',
|
||||
playing: 'tap to mute',
|
||||
muted: 'tap to play',
|
||||
}
|
||||
|
||||
export default function LoopSlot({ slot, slotIdx, audioCtxRef, masterStartRef, masterLenRef, onClick, onRetrim, onDelete, onVolumeChange }) {
|
||||
const progressRef = useRef(null)
|
||||
const rafRef = useRef(null)
|
||||
const [showVol, setShowVol] = useState(false)
|
||||
const [holdTimer, setHoldTimer] = useState(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
|
||||
const { status, recordingDuration, volume, originalBuffer } = slot
|
||||
const style = STYLE[status] ?? STYLE.empty
|
||||
const isActive = status === 'playing' || status === 'muted'
|
||||
|
||||
// ── Progress bar via rAF ─────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!isActive) {
|
||||
if (progressRef.current) progressRef.current.style.width = '0%'
|
||||
return
|
||||
}
|
||||
function tick() {
|
||||
const ctx = audioCtxRef.current
|
||||
const mStart = masterStartRef.current
|
||||
const mLen = masterLenRef.current
|
||||
if (ctx && mStart !== null && mLen && progressRef.current) {
|
||||
const pos = ((ctx.currentTime - mStart) % mLen) / mLen * 100
|
||||
progressRef.current.style.width = `${pos}%`
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current) }
|
||||
}, [isActive, audioCtxRef, masterStartRef, masterLenRef])
|
||||
|
||||
// ── Long-press to delete ──────────────────────────────────────────────────
|
||||
const onPointerDown = useCallback((e) => {
|
||||
e.preventDefault()
|
||||
const t = setTimeout(() => setDeleting(true), 500)
|
||||
setHoldTimer(t)
|
||||
}, [])
|
||||
|
||||
const onPointerUp = useCallback(() => {
|
||||
if (holdTimer) { clearTimeout(holdTimer); setHoldTimer(null) }
|
||||
if (!deleting) onClick(slotIdx)
|
||||
}, [holdTimer, deleting, onClick, slotIdx])
|
||||
|
||||
const onPointerLeave = useCallback(() => {
|
||||
if (holdTimer) { clearTimeout(holdTimer); setHoldTimer(null) }
|
||||
}, [holdTimer])
|
||||
|
||||
const confirmDelete = useCallback(() => {
|
||||
setDeleting(false)
|
||||
onDelete(slotIdx)
|
||||
}, [onDelete, slotIdx])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-1 select-none relative">
|
||||
|
||||
{/* Delete confirmation overlay (long-press) */}
|
||||
{deleting && (
|
||||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-xl bg-black/90 border border-red-500">
|
||||
<button
|
||||
className="text-[10px] font-bold text-red-400 px-2 py-0.5 rounded bg-red-900/50 hover:bg-red-900"
|
||||
onClick={confirmDelete}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
className="text-[10px] text-gray-500 hover:text-gray-300"
|
||||
onClick={() => setDeleting(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick clear button — visible on non-empty slots */}
|
||||
{status !== 'empty' && !deleting && (
|
||||
<button
|
||||
className="absolute -top-1.5 -right-1.5 z-10 w-4 h-4 rounded-full bg-gray-800 border border-border text-gray-500 hover:bg-red-900/60 hover:text-red-400 hover:border-red-700 text-[9px] leading-none flex items-center justify-center transition-colors"
|
||||
onClick={(e) => { e.stopPropagation(); onDelete(slotIdx) }}
|
||||
title="Clear slot"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Main button */}
|
||||
<button
|
||||
className={`relative w-[76px] h-[54px] rounded-xl border-2 overflow-hidden flex flex-col items-center justify-center gap-0.5 transition-colors cursor-pointer ${style.bg} ${style.border} ${status === 'recording' ? 'animate-pulse' : ''}`}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerLeave={onPointerLeave}
|
||||
>
|
||||
<span className={`text-lg leading-none ${style.iconColor}`}>
|
||||
{style.icon}
|
||||
</span>
|
||||
<span className={`text-[9px] font-bold uppercase tracking-widest leading-none ${style.iconColor} opacity-70`}>
|
||||
{status === 'recording'
|
||||
? `${(recordingDuration ?? 0).toFixed(1)}s`
|
||||
: `Loop ${slotIdx + 1}`}
|
||||
</span>
|
||||
|
||||
{/* Progress bar */}
|
||||
{isActive && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-[3px] bg-border">
|
||||
<div
|
||||
ref={progressRef}
|
||||
className="h-full bg-accent"
|
||||
style={{ width: '0%', transition: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Controls row (playing/muted only) */}
|
||||
{isActive && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* Volume toggle */}
|
||||
<button
|
||||
className={`text-[11px] transition-colors ${showVol ? 'text-accent' : 'text-gray-600 hover:text-gray-400'}`}
|
||||
onClick={() => setShowVol(v => !v)}
|
||||
title="Volume"
|
||||
>
|
||||
🔊
|
||||
</button>
|
||||
{showVol && (
|
||||
<input
|
||||
type="range" min={0} max={1} step={0.05}
|
||||
value={volume}
|
||||
onChange={e => onVolumeChange(slotIdx, parseFloat(e.target.value))}
|
||||
className="w-12 h-1 cursor-pointer accent-purple-500"
|
||||
/>
|
||||
)}
|
||||
{/* Re-trim button — only when original recording exists */}
|
||||
{originalBuffer && (
|
||||
<button
|
||||
className="text-[11px] text-gray-600 hover:text-amber-400 transition-colors"
|
||||
onClick={() => onRetrim(slotIdx)}
|
||||
title="Re-trim this loop"
|
||||
>
|
||||
✂
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status label */}
|
||||
<span className={`text-[9px] uppercase tracking-wider leading-none ${style.iconColor} opacity-50`}>
|
||||
{LABEL[status] ?? ''}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,508 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import LoopTrimmer from './LoopTrimmer'
|
||||
|
||||
const H_TRACK = 56 // track canvas height px
|
||||
const H_MASTER = 26 // master timeline height px
|
||||
|
||||
// ── Canvas draw helpers ───────────────────────────────────────────────────────
|
||||
|
||||
function drawGrid(canvas, totalSec, bpm) {
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
if (!rect.width || !rect.height) return
|
||||
const dpr = window.devicePixelRatio ?? 1
|
||||
canvas.width = rect.width * dpr
|
||||
canvas.height = rect.height * dpr
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.scale(dpr, dpr)
|
||||
const W = rect.width, H = rect.height
|
||||
|
||||
ctx.fillStyle = '#0f0f0f'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
if (!bpm || !totalSec) return
|
||||
|
||||
const beatSec = 60 / bpm
|
||||
const barSec = beatSec * 4
|
||||
|
||||
// Beat lines
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.06)'
|
||||
ctx.lineWidth = 1
|
||||
for (let t = beatSec; t < totalSec; t += beatSec) {
|
||||
if ((t % barSec) < beatSec * 0.4) continue
|
||||
const x = (t / totalSec) * W
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
}
|
||||
// Bar lines + numbers
|
||||
for (let t = 0; t <= totalSec; t += barSec) {
|
||||
ctx.strokeStyle = 'rgba(168,85,247,0.45)'
|
||||
ctx.lineWidth = 1.5
|
||||
const x = (t / totalSec) * W
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
const n = Math.round(t / barSec)
|
||||
if (n > 0) {
|
||||
ctx.fillStyle = 'rgba(168,85,247,0.55)'
|
||||
ctx.font = '9px monospace'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.fillText(String(n), x + 3, H - 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawWaveform(canvas, waveform, muted) {
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
if (!rect.width || !rect.height) return
|
||||
const dpr = window.devicePixelRatio ?? 1
|
||||
canvas.width = rect.width * dpr
|
||||
canvas.height = rect.height * dpr
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.scale(dpr, dpr)
|
||||
const W = rect.width, H = rect.height
|
||||
|
||||
ctx.fillStyle = '#0f0f0f'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
|
||||
const N = waveform.length
|
||||
const mid = H / 2
|
||||
for (let i = 0; i < N; i++) {
|
||||
const x = (i / N) * W
|
||||
const barW = Math.max(1, W / N - 0.3)
|
||||
ctx.fillStyle = muted ? '#3b1f55' : '#a855f7'
|
||||
const h = waveform[i] * mid * 0.85
|
||||
ctx.fillRect(x, mid - h, barW, h * 2)
|
||||
}
|
||||
}
|
||||
|
||||
function drawRecording(canvas, duration, bpm) {
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
if (!rect.width || !rect.height) return
|
||||
const dpr = window.devicePixelRatio ?? 1
|
||||
canvas.width = rect.width * dpr
|
||||
canvas.height = rect.height * dpr
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.scale(dpr, dpr)
|
||||
const W = rect.width, H = rect.height
|
||||
|
||||
ctx.fillStyle = '#0f0f0f'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
|
||||
const beatSec = bpm ? 60 / bpm : null
|
||||
const barSec = beatSec ? beatSec * 4 : null
|
||||
const viewDur = barSec
|
||||
? Math.max(barSec * 4, Math.ceil(duration / barSec + 1) * barSec)
|
||||
: Math.max(8, duration * 1.4)
|
||||
|
||||
// Grid
|
||||
if (beatSec) {
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.06)'
|
||||
ctx.lineWidth = 1
|
||||
for (let t = beatSec; t < viewDur; t += beatSec) {
|
||||
if (barSec && (t % barSec) < beatSec * 0.4) continue
|
||||
const x = (t / viewDur) * W
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
}
|
||||
if (barSec) {
|
||||
for (let t = barSec; t <= viewDur; t += barSec) {
|
||||
ctx.strokeStyle = 'rgba(239,68,68,0.3)'
|
||||
ctx.lineWidth = 1.5
|
||||
const x = (t / viewDur) * W
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
const n = Math.round(t / barSec)
|
||||
ctx.fillStyle = 'rgba(239,68,68,0.45)'
|
||||
ctx.font = '9px monospace'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.fillText(String(n), x + 2, H - 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Growing fill + cursor
|
||||
const fillX = (duration / viewDur) * W
|
||||
ctx.fillStyle = 'rgba(239,68,68,0.18)'
|
||||
ctx.fillRect(0, 0, fillX, H)
|
||||
ctx.strokeStyle = 'rgba(239,68,68,0.85)'
|
||||
ctx.lineWidth = 1.5
|
||||
ctx.beginPath(); ctx.moveTo(fillX, 0); ctx.lineTo(fillX, H); ctx.stroke()
|
||||
|
||||
// Counter label
|
||||
const bars = barSec ? Math.floor(duration / barSec) + 1 : null
|
||||
const label = bars !== null
|
||||
? `● REC BAR ${bars} ${duration.toFixed(1)}s — tap to stop`
|
||||
: `● REC ${duration.toFixed(1)}s — tap to stop`
|
||||
ctx.fillStyle = 'rgba(239,68,68,0.9)'
|
||||
ctx.font = 'bold 11px monospace'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText(label, W / 2, H / 2)
|
||||
}
|
||||
|
||||
// ── Master Timeline ───────────────────────────────────────────────────────────
|
||||
|
||||
function MasterTimeline({ masterStartRef, masterLenRef, audioCtxRef, bpm, masterLen }) {
|
||||
const canvasRef = useRef(null)
|
||||
const playheadRef = useRef(null)
|
||||
const rafRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
const id = requestAnimationFrame(() => drawGrid(canvas, masterLen, bpm))
|
||||
return () => cancelAnimationFrame(id)
|
||||
}, [masterLen, bpm])
|
||||
|
||||
useEffect(() => {
|
||||
if (!masterLen) { cancelAnimationFrame(rafRef.current); return }
|
||||
function tick() {
|
||||
const ac = audioCtxRef.current
|
||||
const t0 = masterStartRef.current
|
||||
const len = masterLenRef.current
|
||||
if (ac && t0 !== null && len && playheadRef.current) {
|
||||
const pos = ((ac.currentTime - t0) % len) / len
|
||||
playheadRef.current.style.left = `${pos * 100}%`
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
return () => cancelAnimationFrame(rafRef.current)
|
||||
}, [masterLen, audioCtxRef, masterStartRef, masterLenRef])
|
||||
|
||||
return (
|
||||
<div className="relative mx-4 mb-3 rounded overflow-hidden bg-surface border border-border"
|
||||
style={{ height: `${H_MASTER}px` }}>
|
||||
<canvas ref={canvasRef} className="w-full h-full block" />
|
||||
{!masterLen && (
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<span className="text-[10px] text-gray-700">
|
||||
record first loop to set master length
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{masterLen && (
|
||||
<div
|
||||
ref={playheadRef}
|
||||
className="absolute top-0 bottom-0 w-px bg-white/50 pointer-events-none"
|
||||
style={{ left: '0%' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Track Row ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function TrackRow({ slot, slotIdx, bpm, audioCtxRef, masterStartRef, masterLenRef,
|
||||
onSlotClick, onRetrim, onDelete, onVolumeChange }) {
|
||||
const [showVol, setShowVol] = useState(false)
|
||||
const canvasRef = useRef(null)
|
||||
const playheadRef = useRef(null)
|
||||
const rafRef = useRef(null)
|
||||
|
||||
const DOT_CLASS = {
|
||||
empty: 'bg-gray-700',
|
||||
recording: 'bg-red-500 animate-pulse',
|
||||
trimming: 'bg-amber-500',
|
||||
playing: 'bg-accent',
|
||||
muted: 'bg-gray-500',
|
||||
}
|
||||
const BORDER_CLASS = {
|
||||
empty: 'border-border',
|
||||
recording: 'border-red-800',
|
||||
trimming: 'border-amber-800/60',
|
||||
playing: 'border-accent/40',
|
||||
muted: 'border-border',
|
||||
}
|
||||
|
||||
const dotClass = DOT_CLASS[slot.status] ?? 'bg-gray-700'
|
||||
const borderClass = BORDER_CLASS[slot.status] ?? 'border-border'
|
||||
|
||||
// Draw waveform when data arrives or mute state changes
|
||||
useEffect(() => {
|
||||
if (!slot.waveform) return
|
||||
if (slot.status === 'recording' || slot.status === 'trimming') return
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
const id = requestAnimationFrame(() =>
|
||||
drawWaveform(canvas, slot.waveform, slot.status === 'muted')
|
||||
)
|
||||
return () => cancelAnimationFrame(id)
|
||||
}, [slot.waveform, slot.status])
|
||||
|
||||
// Draw recording progress on each duration tick
|
||||
useEffect(() => {
|
||||
if (slot.status !== 'recording') return
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
drawRecording(canvas, slot.recordingDuration, bpm)
|
||||
}, [slot.recordingDuration, slot.status, bpm])
|
||||
|
||||
// Playhead animation
|
||||
useEffect(() => {
|
||||
const active = slot.status === 'playing' || slot.status === 'muted'
|
||||
if (!active) {
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
if (playheadRef.current) playheadRef.current.style.left = '-2px'
|
||||
return
|
||||
}
|
||||
function tick() {
|
||||
const ac = audioCtxRef.current
|
||||
const t0 = masterStartRef.current
|
||||
const len = masterLenRef.current
|
||||
if (ac && t0 !== null && len && playheadRef.current) {
|
||||
const pos = ((ac.currentTime - t0) % len) / len
|
||||
playheadRef.current.style.left = `${pos * 100}%`
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
return () => cancelAnimationFrame(rafRef.current)
|
||||
}, [slot.status, audioCtxRef, masterStartRef, masterLenRef])
|
||||
|
||||
const isClickable = slot.status !== 'trimming'
|
||||
const isActive = slot.status === 'playing' || slot.status === 'muted'
|
||||
|
||||
return (
|
||||
<div className={`flex items-stretch border rounded-lg mb-1.5 overflow-hidden transition-colors ${borderClass}`}>
|
||||
|
||||
{/* Left: tap button (state dot + track number) */}
|
||||
<button
|
||||
onClick={() => isClickable && onSlotClick(slotIdx)}
|
||||
disabled={!isClickable}
|
||||
title={
|
||||
slot.status === 'empty' ? 'Tap to record' :
|
||||
slot.status === 'recording' ? 'Tap to stop' :
|
||||
slot.status === 'playing' ? 'Tap to mute' :
|
||||
slot.status === 'muted' ? 'Tap to unmute' : ''
|
||||
}
|
||||
className="flex flex-col items-center justify-center gap-1 px-3 bg-surface border-r border-border shrink-0 hover:bg-white/5 transition-colors disabled:cursor-default"
|
||||
style={{ width: '44px' }}
|
||||
>
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${dotClass}`} />
|
||||
<span className="text-[10px] text-gray-600 font-mono">{slotIdx + 1}</span>
|
||||
</button>
|
||||
|
||||
{/* Canvas: waveform / recording / empty */}
|
||||
<div
|
||||
className="relative flex-1 cursor-pointer"
|
||||
style={{ height: `${H_TRACK}px` }}
|
||||
onClick={() => isClickable && onSlotClick(slotIdx)}
|
||||
>
|
||||
<canvas ref={canvasRef} className="w-full h-full block" />
|
||||
|
||||
{slot.status === 'empty' && (
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<span className="text-xs text-gray-700">tap to record</span>
|
||||
</div>
|
||||
)}
|
||||
{slot.status === 'trimming' && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-amber-950/20 pointer-events-none">
|
||||
<span className="text-xs text-amber-500/60">trimming ↓</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Moving playhead */}
|
||||
{isActive && (
|
||||
<div
|
||||
ref={playheadRef}
|
||||
className="absolute top-0 bottom-0 w-px bg-white/40 pointer-events-none"
|
||||
style={{ left: '-2px' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: controls */}
|
||||
<div className="flex items-center gap-1 px-2 bg-surface border-l border-border shrink-0">
|
||||
{showVol && (
|
||||
<input
|
||||
type="range"
|
||||
min={0} max={1} step={0.01}
|
||||
value={slot.volume}
|
||||
onChange={e => onVolumeChange(slotIdx, parseFloat(e.target.value))}
|
||||
className="w-14 accent-purple-500"
|
||||
title="Volume"
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setShowVol(v => !v)}
|
||||
className={`w-7 h-7 flex items-center justify-center rounded text-base transition-colors ${
|
||||
showVol ? 'text-accent' : 'text-gray-600 hover:text-gray-300'
|
||||
}`}
|
||||
title="Volume"
|
||||
>
|
||||
{slot.status === 'muted' ? '🔇' : '🔊'}
|
||||
</button>
|
||||
{isActive && slot.originalBuffer && (
|
||||
<button
|
||||
onClick={() => onRetrim(slotIdx)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded text-gray-600 hover:text-amber-400 transition-colors text-sm"
|
||||
title="Re-trim loop"
|
||||
>
|
||||
✂
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => onDelete(slotIdx)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded text-gray-700 hover:text-red-400 transition-colors text-sm"
|
||||
title="Clear track"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function LoopStation({
|
||||
slots,
|
||||
bpm,
|
||||
masterLen,
|
||||
audioCtxRef,
|
||||
masterStartRef,
|
||||
masterLenRef,
|
||||
onSlotClick,
|
||||
onCommitTrim,
|
||||
onCancelRecord,
|
||||
onRetrim,
|
||||
onDelete,
|
||||
onVolumeChange,
|
||||
onAddSlot,
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [gridBpm, setGridBpm] = useState(bpm ?? '')
|
||||
|
||||
// Pre-fill BPM when detection arrives
|
||||
useEffect(() => {
|
||||
if (bpm && !gridBpm) setGridBpm(bpm)
|
||||
}, [bpm]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const gridBpmNum = parseFloat(gridBpm) || null
|
||||
const trimmingIdx = slots.findIndex(s => s.status === 'trimming')
|
||||
|
||||
const recordingCount = slots.filter(s => s.status === 'recording').length
|
||||
const playingCount = slots.filter(s => s.status === 'playing').length
|
||||
|
||||
const dotClass = recordingCount > 0
|
||||
? 'bg-red-500 animate-pulse'
|
||||
: playingCount > 0
|
||||
? 'bg-accent'
|
||||
: 'bg-gray-700'
|
||||
|
||||
const masterLabel = (() => {
|
||||
if (!masterLen) return null
|
||||
if (gridBpmNum) {
|
||||
const bars = Math.round(masterLen / ((60 / gridBpmNum) * 4))
|
||||
return `${bars} bar${bars !== 1 ? 's' : ''} · ${masterLen.toFixed(2)}s`
|
||||
}
|
||||
return masterLen.toFixed(2) + 's'
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
{/* ── Header ──────────────────────────────────────────────────────────── */}
|
||||
<div className="flex items-center justify-between px-4 py-2 text-sm text-gray-400">
|
||||
<button
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="flex items-center gap-2 hover:text-gray-200 transition-colors text-left"
|
||||
>
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${dotClass}`} />
|
||||
<span>LOOP STATION</span>
|
||||
{masterLabel && (
|
||||
<span className="text-[11px] text-gray-600 font-mono">{masterLabel}</span>
|
||||
)}
|
||||
{recordingCount > 0 && (
|
||||
<span className="text-[11px] text-red-400">● rec</span>
|
||||
)}
|
||||
{playingCount > 0 && recordingCount === 0 && (
|
||||
<span className="text-[11px] text-accent">
|
||||
{playingCount} loop{playingCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 bg-surface border border-border rounded-lg px-2 py-1">
|
||||
<span className="text-[10px] text-gray-600 uppercase tracking-wider">BPM</span>
|
||||
<input
|
||||
type="number"
|
||||
min={40} max={300} step={1}
|
||||
value={gridBpm}
|
||||
onChange={e => setGridBpm(e.target.value)}
|
||||
placeholder={bpm ? String(Math.round(bpm)) : '—'}
|
||||
className="w-10 bg-transparent text-xs text-gray-300 text-center focus:outline-none focus:text-white"
|
||||
style={{ MozAppearance: 'textfield' }}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:text-gray-300 hover:bg-white/5 transition-all"
|
||||
title={open ? 'Collapse' : 'Expand'}
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
|
||||
stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
{open
|
||||
? <polyline points="2,8 6,4 10,8" />
|
||||
: <polyline points="2,4 6,8 10,4" />
|
||||
}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Body ────────────────────────────────────────────────────────────── */}
|
||||
{open && (
|
||||
<div className="border-t border-border pt-3">
|
||||
|
||||
{/* Master timeline */}
|
||||
<MasterTimeline
|
||||
masterStartRef={masterStartRef}
|
||||
masterLenRef={masterLenRef}
|
||||
audioCtxRef={audioCtxRef}
|
||||
bpm={gridBpmNum}
|
||||
masterLen={masterLen}
|
||||
/>
|
||||
|
||||
{/* Track rows */}
|
||||
<div className="px-4">
|
||||
{slots.map((slot, i) => (
|
||||
<TrackRow
|
||||
key={i}
|
||||
slot={slot}
|
||||
slotIdx={i}
|
||||
bpm={gridBpmNum}
|
||||
audioCtxRef={audioCtxRef}
|
||||
masterStartRef={masterStartRef}
|
||||
masterLenRef={masterLenRef}
|
||||
onSlotClick={onSlotClick}
|
||||
onRetrim={onRetrim}
|
||||
onDelete={onDelete}
|
||||
onVolumeChange={onVolumeChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add track */}
|
||||
<div className="px-4 pb-3">
|
||||
<button
|
||||
onClick={onAddSlot}
|
||||
className="w-full py-1.5 rounded-lg border border-dashed border-border text-gray-700 hover:border-accent/40 hover:text-accent/60 transition-colors text-xs flex items-center justify-center gap-2"
|
||||
>
|
||||
<span className="text-base leading-none">+</span>
|
||||
<span>Add Track</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* LoopTrimmer — shown below tracks when trimming */}
|
||||
{trimmingIdx !== -1 && (
|
||||
<LoopTrimmer
|
||||
slot={slots[trimmingIdx]}
|
||||
slotIdx={trimmingIdx}
|
||||
bpm={gridBpmNum}
|
||||
audioCtxRef={audioCtxRef}
|
||||
onCommit={onCommitTrim}
|
||||
onCancel={onCancelRecord}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
import { useRef, useState, useEffect, useCallback } from 'react'
|
||||
|
||||
function fmtMs(sec) {
|
||||
return `${(sec * 1000).toFixed(0)}ms`
|
||||
}
|
||||
|
||||
function fmtSec(sec) {
|
||||
return sec < 10 ? `${sec.toFixed(2)}s` : `${sec.toFixed(1)}s`
|
||||
}
|
||||
|
||||
export default function LoopTrimmer({ slot, slotIdx, bpm, audioCtxRef, onCommit, onCancel }) {
|
||||
const canvasRef = useRef(null)
|
||||
const containerRef = useRef(null)
|
||||
const previewRef = useRef(null) // AudioBufferSourceNode for preview
|
||||
|
||||
const [trimStart, setTrimStart] = useState(slot.trimStart)
|
||||
const [trimEnd, setTrimEnd] = useState(slot.trimEnd)
|
||||
const [previewing, setPreviewing] = useState(false)
|
||||
|
||||
// Refs so drag closures always have current values
|
||||
const trimStartRef = useRef(trimStart)
|
||||
const trimEndRef = useRef(trimEnd)
|
||||
useEffect(() => { trimStartRef.current = trimStart }, [trimStart])
|
||||
useEffect(() => { trimEndRef.current = trimEnd }, [trimEnd])
|
||||
|
||||
const duration = slot.audioBuffer?.duration ?? 0
|
||||
const startSec = trimStart * duration
|
||||
const endSec = trimEnd * duration
|
||||
const selectedSec = endSec - startSec
|
||||
|
||||
// Beat grid info — visual reference only, no snapping
|
||||
const beatSec = bpm ? 60 / bpm : null
|
||||
const barSec = beatSec ? beatSec * 4 : null
|
||||
|
||||
// Stop preview when handles change
|
||||
useEffect(() => {
|
||||
if (previewing) stopPreview()
|
||||
}, [trimStart, trimEnd]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => stopPreview()
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
function stopPreview() {
|
||||
try { previewRef.current?.stop() } catch {}
|
||||
previewRef.current = null
|
||||
setPreviewing(false)
|
||||
}
|
||||
|
||||
function togglePreview() {
|
||||
if (previewing) { stopPreview(); return }
|
||||
const ctx = audioCtxRef?.current
|
||||
const buf = slot.audioBuffer
|
||||
if (!ctx || !buf) return
|
||||
|
||||
// Resume context if suspended
|
||||
if (ctx.state === 'suspended') ctx.resume().catch(() => {})
|
||||
|
||||
const sr = buf.sampleRate
|
||||
const startSample = Math.floor(trimStartRef.current * buf.length)
|
||||
const endSample = Math.ceil(trimEndRef.current * buf.length)
|
||||
const len = Math.max(1, endSample - startSample)
|
||||
const data = buf.getChannelData(0).slice(startSample, endSample)
|
||||
|
||||
const previewBuf = ctx.createBuffer(1, len, sr)
|
||||
previewBuf.copyToChannel(data, 0)
|
||||
|
||||
const node = ctx.createBufferSource()
|
||||
node.buffer = previewBuf
|
||||
node.loop = true
|
||||
node.loopStart = 0
|
||||
node.loopEnd = len / sr
|
||||
node.connect(ctx.destination)
|
||||
node.start()
|
||||
node.onended = () => { previewRef.current = null; setPreviewing(false) }
|
||||
|
||||
previewRef.current = node
|
||||
setPreviewing(true)
|
||||
}
|
||||
|
||||
// Snap end handle to N bars from current start
|
||||
function snapBars(n) {
|
||||
if (!barSec || !duration) return
|
||||
const newEnd = Math.min(1, trimStartRef.current + (n * barSec) / duration)
|
||||
setTrimEnd(newEnd)
|
||||
trimEndRef.current = newEnd
|
||||
draw()
|
||||
}
|
||||
|
||||
// ── Canvas draw ─────────────────────────────────────────────────────────────
|
||||
const draw = useCallback(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas || !slot.waveform) return
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
if (rect.width === 0) return
|
||||
const dpr = window.devicePixelRatio ?? 1
|
||||
canvas.width = rect.width * dpr
|
||||
canvas.height = rect.height * dpr
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.scale(dpr, dpr)
|
||||
const W = rect.width
|
||||
const H = rect.height
|
||||
const wf = slot.waveform
|
||||
const N = wf.length
|
||||
const ts = trimStartRef.current
|
||||
const te = trimEndRef.current
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = '#0f0f0f'
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
|
||||
// Dim regions outside selection
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.6)'
|
||||
ctx.fillRect(0, 0, ts * W, H)
|
||||
ctx.fillRect(te * W, 0, W - te * W, H)
|
||||
|
||||
// Beat grid — visual only, beat lines then bar lines (bars on top)
|
||||
if (beatSec && duration) {
|
||||
// Beat lines
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.10)'
|
||||
ctx.lineWidth = 1
|
||||
for (let t = 0; t <= duration; t += beatSec) {
|
||||
const isBar = barSec ? (t % barSec) < beatSec * 0.4 : false
|
||||
if (!isBar) {
|
||||
const x = (t / duration) * W
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
}
|
||||
}
|
||||
// Bar lines (brighter, thicker)
|
||||
if (barSec) {
|
||||
ctx.strokeStyle = 'rgba(168,85,247,0.55)'
|
||||
ctx.lineWidth = 1.5
|
||||
for (let t = 0; t <= duration; t += barSec) {
|
||||
const x = (t / duration) * W
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke()
|
||||
// Bar number label
|
||||
const barNum = Math.round(t / barSec)
|
||||
if (barNum > 0) {
|
||||
ctx.fillStyle = 'rgba(168,85,247,0.5)'
|
||||
ctx.font = `${9 * dpr / dpr}px monospace`
|
||||
ctx.fillText(`${barNum}`, x + 3, 10)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Waveform bars
|
||||
const mid = H / 2
|
||||
for (let i = 0; i < N; i++) {
|
||||
const x = (i / N) * W
|
||||
const barW = Math.max(1, W / N - 0.5)
|
||||
const inSel = (i / N) >= ts && (i / N) <= te
|
||||
ctx.fillStyle = inSel ? '#a855f7' : '#3b0764'
|
||||
const h = wf[i] * mid * 0.88
|
||||
ctx.fillRect(x, mid - h, barW, h * 2)
|
||||
}
|
||||
|
||||
// Handle lines
|
||||
ctx.strokeStyle = '#a855f7'
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath(); ctx.moveTo(ts * W, 0); ctx.lineTo(ts * W, H); ctx.stroke()
|
||||
ctx.beginPath(); ctx.moveTo(te * W, 0); ctx.lineTo(te * W, H); ctx.stroke()
|
||||
}, [slot.waveform, beatSec, barSec, duration])
|
||||
|
||||
useEffect(() => { draw() }, [draw, trimStart, trimEnd])
|
||||
useEffect(() => {
|
||||
const id = requestAnimationFrame(() => draw())
|
||||
return () => cancelAnimationFrame(id)
|
||||
}, [draw])
|
||||
|
||||
// ── Pointer → fraction ──────────────────────────────────────────────────────
|
||||
function fracFromClientX(clientX) {
|
||||
const el = containerRef.current
|
||||
if (!el) return 0
|
||||
const rect = el.getBoundingClientRect()
|
||||
return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
|
||||
}
|
||||
|
||||
// ── Drag handles — free movement, no snapping ───────────────────────────────
|
||||
function handleMouseDown(handle) {
|
||||
return (e) => {
|
||||
e.preventDefault()
|
||||
function onMove(ev) {
|
||||
const raw = fracFromClientX(ev.clientX)
|
||||
if (handle === 'start') {
|
||||
const c = Math.max(0, Math.min(raw, trimEndRef.current - 0.01))
|
||||
setTrimStart(c); trimStartRef.current = c
|
||||
} else {
|
||||
const c = Math.max(trimStartRef.current + 0.01, Math.min(1, raw))
|
||||
setTrimEnd(c); trimEndRef.current = c
|
||||
}
|
||||
draw()
|
||||
}
|
||||
function onUp() {
|
||||
window.removeEventListener('mousemove', onMove)
|
||||
window.removeEventListener('mouseup', onUp)
|
||||
}
|
||||
window.addEventListener('mousemove', onMove)
|
||||
window.addEventListener('mouseup', onUp)
|
||||
}
|
||||
}
|
||||
|
||||
// Click canvas to move nearest handle
|
||||
function handleCanvasClick(e) {
|
||||
if (e.target !== canvasRef.current) return
|
||||
const raw = fracFromClientX(e.clientX)
|
||||
if (Math.abs(raw - trimStart) <= Math.abs(raw - trimEnd)) {
|
||||
const c = Math.max(0, Math.min(raw, trimEndRef.current - 0.01))
|
||||
setTrimStart(c); trimStartRef.current = c
|
||||
} else {
|
||||
const c = Math.max(trimStartRef.current + 0.01, Math.min(1, raw))
|
||||
setTrimEnd(c); trimEndRef.current = c
|
||||
}
|
||||
draw()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-t border-border">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center justify-between px-4 pt-3 pb-1">
|
||||
<span className="text-[11px] uppercase tracking-wider text-gray-500">
|
||||
Trim — Loop {slotIdx + 1}
|
||||
</span>
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500 font-mono">
|
||||
<span className="text-gray-600">{fmtMs(startSec)} → {fmtMs(endSec)}</span>
|
||||
<span className="text-accent font-semibold">{fmtSec(selectedSec)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Waveform + handles */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative mx-4 h-20 rounded-lg overflow-visible cursor-crosshair select-none"
|
||||
onClick={handleCanvasClick}
|
||||
>
|
||||
<canvas ref={canvasRef} className="w-full h-full block rounded-lg" />
|
||||
|
||||
{/* Left handle */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 w-5 -translate-x-1/2 cursor-ew-resize flex items-center justify-center group z-10"
|
||||
style={{ left: `${trimStart * 100}%` }}
|
||||
onMouseDown={handleMouseDown('start')}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="w-0.5 h-full bg-accent/70 group-hover:bg-accent group-hover:w-1 transition-all" />
|
||||
<div className="absolute w-3.5 h-3.5 rounded-full bg-accent border-2 border-white/20 shadow-lg top-1/2 -translate-y-1/2" />
|
||||
<div className="absolute bottom-full mb-1 text-[9px] font-mono text-accent bg-panel border border-border rounded px-1 py-0.5 whitespace-nowrap pointer-events-none">
|
||||
{fmtMs(startSec)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right handle */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 w-5 -translate-x-1/2 cursor-ew-resize flex items-center justify-center group z-10"
|
||||
style={{ left: `${trimEnd * 100}%` }}
|
||||
onMouseDown={handleMouseDown('end')}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="w-0.5 h-full bg-accent/70 group-hover:bg-accent group-hover:w-1 transition-all" />
|
||||
<div className="absolute w-3.5 h-3.5 rounded-full bg-accent border-2 border-white/20 shadow-lg top-1/2 -translate-y-1/2" />
|
||||
<div className="absolute bottom-full mb-1 text-[9px] font-mono text-accent bg-panel border border-border rounded px-1 py-0.5 whitespace-nowrap pointer-events-none">
|
||||
{fmtMs(endSec)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toolbar: preview + bar snap + hint */}
|
||||
<div className="flex items-center gap-2 px-4 pt-2 pb-1 flex-wrap">
|
||||
{/* Preview play/stop */}
|
||||
<button
|
||||
onClick={togglePreview}
|
||||
className={`flex items-center gap-1 px-2.5 py-1 rounded-lg border text-xs font-medium transition-all ${
|
||||
previewing
|
||||
? 'bg-accent/20 border-accent text-accent'
|
||||
: 'bg-surface border-border text-gray-400 hover:text-white hover:border-gray-500'
|
||||
}`}
|
||||
title="Preview loop selection"
|
||||
>
|
||||
{previewing
|
||||
? <><span>⏹</span><span>Stop</span></>
|
||||
: <><span>▶</span><span>Preview</span></>
|
||||
}
|
||||
</button>
|
||||
|
||||
{/* Bar snap buttons — only if BPM is set */}
|
||||
{barSec && duration && (
|
||||
<div className="flex items-center gap-1 ml-1">
|
||||
<span className="text-[10px] text-gray-600 uppercase tracking-wider mr-0.5">snap end →</span>
|
||||
{[1, 2, 4].map(n => {
|
||||
const endFrac = trimStart + (n * barSec) / duration
|
||||
const fits = endFrac <= 1.02
|
||||
return (
|
||||
<button
|
||||
key={n}
|
||||
onClick={() => snapBars(n)}
|
||||
disabled={!fits}
|
||||
className="px-2 py-0.5 rounded border border-border text-[10px] text-gray-400 hover:text-accent hover:border-accent/50 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title={`Set end to ${n} bar${n > 1 ? 's' : ''} from start`}
|
||||
>
|
||||
{n} bar{n > 1 ? 's' : ''}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<span className="ml-auto text-[10px] text-gray-700">
|
||||
{bpm ? `${bpm} BPM grid` : 'no BPM — trim freely'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex gap-2 px-4 pb-3">
|
||||
<button
|
||||
onClick={() => { stopPreview(); onCommit(slotIdx, trimStart, trimEnd) }}
|
||||
className="px-5 py-1.5 bg-accent text-white text-sm font-bold rounded-lg hover:bg-accent/80 transition-colors"
|
||||
>
|
||||
Set Loop ▶
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { stopPreview(); onCommit(slotIdx, 0, 1) }}
|
||||
className="px-4 py-1.5 bg-surface border border-border text-gray-400 text-sm rounded-lg hover:text-white hover:border-gray-500 transition-colors"
|
||||
title="Use the full recording without trimming"
|
||||
>
|
||||
Use Full
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { stopPreview(); onCancel(slotIdx) }}
|
||||
className="px-4 py-1.5 bg-surface border border-border text-gray-500 text-sm rounded-lg hover:text-red-400 hover:border-red-800 transition-colors ml-auto"
|
||||
>
|
||||
Re-record
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// 2-octave mini piano keyboard showing technique notes
|
||||
// Props:
|
||||
// rootPc — root pitch class 0-11
|
||||
// lh — array of semitone intervals above root (left hand, shown in blue)
|
||||
// rh — array of semitone intervals above root (right hand, shown in purple)
|
||||
|
||||
const OCTAVES = 2
|
||||
const WW = 22 // white key width
|
||||
const WH = 60 // white key height
|
||||
const BW = 14 // black key width
|
||||
const BH = 38 // black key height
|
||||
|
||||
// White key pitch classes within an octave, in order
|
||||
const WHITE_PCS = [0, 2, 4, 5, 7, 9, 11] // C D E F G A B
|
||||
const WHITE_NAMES = ['C','D','E','F','G','A','B']
|
||||
// Black key offsets (x position relative to white key 0) and pitch classes
|
||||
const BLACK_OFFSETS = [
|
||||
{ pc: 1, afterWhite: 0 }, // C#
|
||||
{ pc: 3, afterWhite: 1 }, // D#
|
||||
{ pc: 6, afterWhite: 3 }, // F#
|
||||
{ pc: 8, afterWhite: 4 }, // G#
|
||||
{ pc: 10, afterWhite: 5 }, // A#
|
||||
]
|
||||
|
||||
const TOTAL_WHITES = WHITE_PCS.length * OCTAVES // 14
|
||||
const SVG_W = WW * TOTAL_WHITES + 2
|
||||
const SVG_H = WH + 24
|
||||
|
||||
function noteColor(interval) {
|
||||
// interval < 12 → first octave (root region), ≥12 → second octave
|
||||
return interval < 12 ? '#a855f7' : '#c084fc'
|
||||
}
|
||||
|
||||
function handLabel(hand) {
|
||||
return hand === 'L' ? 'LH' : 'RH'
|
||||
}
|
||||
|
||||
export default function MiniPiano({ rootPc, lh = [], rh = [] }) {
|
||||
// Build a set of highlighted notes: pc → { hand, interval }
|
||||
// We span 2 octaves (semitones 0…23 above root), mapped to absolute pitch classes
|
||||
const highlights = new Map() // absIdx → { color, label }
|
||||
|
||||
function addNotes(intervals, hand) {
|
||||
for (const iv of intervals) {
|
||||
const octave = Math.floor(iv / 12)
|
||||
const pc = (rootPc + iv) % 12
|
||||
const absIdx = octave * 12 + pc // unique index per octave slot
|
||||
highlights.set(`${octave}-${pc}`, { color: hand === 'L' ? '#3b82f6' : '#a855f7', label: handLabel(hand) })
|
||||
}
|
||||
}
|
||||
addNotes(lh, 'L')
|
||||
addNotes(rh, 'R')
|
||||
|
||||
function isHighlighted(octave, pc) {
|
||||
return highlights.get(`${octave}-${pc}`)
|
||||
}
|
||||
|
||||
// White keys
|
||||
const whites = []
|
||||
for (let oct = 0; oct < OCTAVES; oct++) {
|
||||
for (let wi = 0; wi < WHITE_PCS.length; wi++) {
|
||||
const pc = WHITE_PCS[wi]
|
||||
const absWi = oct * WHITE_PCS.length + wi
|
||||
const x = absWi * WW + 1
|
||||
const hl = isHighlighted(oct, pc)
|
||||
whites.push({ x, pc, oct, wi, absWi, hl, name: WHITE_NAMES[wi] + (oct + 4) })
|
||||
}
|
||||
}
|
||||
|
||||
// Black keys
|
||||
const blacks = []
|
||||
for (let oct = 0; oct < OCTAVES; oct++) {
|
||||
for (const { pc, afterWhite } of BLACK_OFFSETS) {
|
||||
const absWi = oct * WHITE_PCS.length + afterWhite
|
||||
const x = absWi * WW + WW - BW / 2
|
||||
const hl = isHighlighted(oct, pc)
|
||||
blacks.push({ x, pc, oct, hl })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<svg width={SVG_W} height={SVG_H} viewBox={`0 0 ${SVG_W} ${SVG_H}`} className="overflow-visible">
|
||||
{/* White keys */}
|
||||
{whites.map(({ x, hl, name, absWi }) => (
|
||||
<g key={`w${absWi}`}>
|
||||
<rect
|
||||
x={x} y={1} width={WW - 1} height={WH}
|
||||
rx={2}
|
||||
fill={hl ? hl.color : '#f5f5f5'}
|
||||
stroke="#374151"
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
{hl && (
|
||||
<text x={x + (WW - 1) / 2} y={WH - 8}
|
||||
textAnchor="middle" fill="white" fontSize={7} fontWeight="bold">
|
||||
{hl.label}
|
||||
</text>
|
||||
)}
|
||||
</g>
|
||||
))}
|
||||
|
||||
{/* Black keys */}
|
||||
{blacks.map(({ x, pc, oct, hl }, i) => (
|
||||
<g key={`b${oct}-${pc}`}>
|
||||
<rect
|
||||
x={x} y={1} width={BW} height={BH}
|
||||
rx={2}
|
||||
fill={hl ? hl.color : '#1f2937'}
|
||||
stroke="#111827"
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
{hl && (
|
||||
<text x={x + BW / 2} y={BH - 5}
|
||||
textAnchor="middle" fill="white" fontSize={6} fontWeight="bold">
|
||||
{hl.label}
|
||||
</text>
|
||||
)}
|
||||
</g>
|
||||
))}
|
||||
|
||||
{/* Root label at bottom */}
|
||||
{whites.map(({ x, pc, oct, name, absWi }) => {
|
||||
const isRoot = pc === rootPc && oct === 0
|
||||
if (!isRoot) return null
|
||||
return (
|
||||
<text key={`lbl${absWi}`} x={x + (WW - 1) / 2} y={WH + 14}
|
||||
textAnchor="middle" fill="#a855f7" fontSize={8} fontWeight="bold">
|
||||
R
|
||||
</text>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
import { useState, useRef, useEffect, useCallback } from 'react'
|
||||
|
||||
const MODEL = 'claude-sonnet-4-6'
|
||||
const API_URL = 'https://api.anthropic.com/v1/messages'
|
||||
const LS_KEY = 'wtf_teacher_key'
|
||||
|
||||
// ── System prompt — rebuilt with live session context on every request ────────
|
||||
function buildSystemPrompt({ keyInfo, currentChord, bpm, chordHistory }) {
|
||||
const keyStr = keyInfo ? `${keyInfo.root} ${keyInfo.mode}` : 'not detected yet'
|
||||
const chordStr = currentChord?.name ?? 'none detected'
|
||||
const bpmStr = bpm ? `${Math.round(bpm)} BPM` : 'not detected'
|
||||
const histStr = chordHistory?.length
|
||||
? chordHistory.map(c => c.name).join(' → ')
|
||||
: 'none yet'
|
||||
|
||||
return `You are an expert music teacher and session musician embedded in JamBuddy, a real-time chord and key detection app for guitarists and keyboard players at live jam sessions.
|
||||
|
||||
LIVE SESSION CONTEXT (updated in real time):
|
||||
• Detected key: ${keyStr}
|
||||
• Current chord: ${chordStr}
|
||||
• BPM: ${bpmStr}
|
||||
• Recent chord history: ${histStr}
|
||||
|
||||
YOUR ROLE:
|
||||
- Explain chords, scales, and music theory in plain, friendly language
|
||||
- Suggest what to practice based on the current key and chord progression
|
||||
- Teach playing techniques: fretting, strumming patterns, chord voicings, fingerpicking
|
||||
- Help musicians understand WHY things sound the way they do
|
||||
- Suggest progressions that work with whatever the user is currently playing
|
||||
- Adjust depth to the user — explain basics if they seem new, go deep if they ask for it
|
||||
- Point out interesting connections: "that Dm7 works here because it's the ii chord in C major"
|
||||
|
||||
STYLE:
|
||||
- Keep responses focused and practical — this is a live jam, not a classroom
|
||||
- Use plain text, not markdown. Short paragraphs. Bullet points with "-" are fine.
|
||||
- If someone asks about the current chord or key, use the live context above
|
||||
- Max ~150 words unless someone asks for a deep dive`
|
||||
}
|
||||
|
||||
// ── Quick-action chips ────────────────────────────────────────────────────────
|
||||
const CHIPS = [
|
||||
{ label: 'What should I practice?', msg: 'Based on what I\'m playing right now, what\'s the most useful thing I could practice?' },
|
||||
{ label: 'Explain current chord', msg: 'Explain the current chord I\'m playing — what it is, why it sounds the way it does, and where it tends to appear.' },
|
||||
{ label: 'Scales that work here', msg: 'What scales work over the current key and chord? Which notes sound best to improvise with?' },
|
||||
{ label: 'Suggest a progression', msg: 'Suggest a chord progression that fits the current key. Give me something interesting to try.' },
|
||||
{ label: 'Technique tip', msg: 'Give me one technique tip — something I can work on in the next few minutes to sound better.' },
|
||||
{ label: 'Why does this sound good?', msg: 'Looking at my recent chord history, why do these chords sound good together? What\'s the music theory behind it?' },
|
||||
]
|
||||
|
||||
// ── Simple text renderer (bold + line breaks) ─────────────────────────────────
|
||||
function MessageText({ text }) {
|
||||
const lines = text.split('\n')
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
{lines.map((line, i) => {
|
||||
if (!line.trim()) return <div key={i} className="h-1" />
|
||||
// Bold: **text**
|
||||
const parts = line.split(/(\*\*[^*]+\*\*)/)
|
||||
return (
|
||||
<p key={i} className="leading-relaxed">
|
||||
{parts.map((part, j) =>
|
||||
part.startsWith('**') && part.endsWith('**')
|
||||
? <strong key={j} className="text-white font-semibold">{part.slice(2, -2)}</strong>
|
||||
: part
|
||||
)}
|
||||
</p>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Main component ────────────────────────────────────────────────────────────
|
||||
export default function MusicTeacher({ keyInfo, currentChord, bpm, chordHistory }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [apiKey, setApiKey] = useState(() => localStorage.getItem(LS_KEY) ?? '')
|
||||
const [showKeyInput, setShowKeyInput] = useState(false)
|
||||
const [messages, setMessages] = useState([]) // [{role, content}]
|
||||
const [input, setInput] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [streaming, setStreaming] = useState('') // partial response being streamed
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
const scrollRef = useRef(null)
|
||||
const inputRef = useRef(null)
|
||||
const abortRef = useRef(null)
|
||||
|
||||
// Always scroll to bottom on new content
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight
|
||||
}
|
||||
}, [messages, streaming])
|
||||
|
||||
// Focus input when panel opens
|
||||
useEffect(() => {
|
||||
if (open && apiKey && inputRef.current) {
|
||||
setTimeout(() => inputRef.current?.focus(), 50)
|
||||
}
|
||||
}, [open, apiKey])
|
||||
|
||||
function saveKey(k) {
|
||||
setApiKey(k)
|
||||
localStorage.setItem(LS_KEY, k)
|
||||
}
|
||||
|
||||
function clearKey() {
|
||||
setApiKey('')
|
||||
localStorage.removeItem(LS_KEY)
|
||||
setShowKeyInput(true)
|
||||
}
|
||||
|
||||
const sendMessage = useCallback(async (userText) => {
|
||||
if (!userText.trim() || loading || !apiKey) return
|
||||
|
||||
setError(null)
|
||||
const userMsg = { role: 'user', content: userText.trim() }
|
||||
const nextMessages = [...messages, userMsg]
|
||||
setMessages(nextMessages)
|
||||
setInput('')
|
||||
setLoading(true)
|
||||
setStreaming('')
|
||||
|
||||
const context = { keyInfo, currentChord, bpm, chordHistory }
|
||||
|
||||
try {
|
||||
const ctrl = new AbortController()
|
||||
abortRef.current = ctrl
|
||||
|
||||
const res = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
signal: ctrl.signal,
|
||||
headers: {
|
||||
'x-api-key': apiKey,
|
||||
'anthropic-version': '2023-06-01',
|
||||
'anthropic-dangerous-direct-browser-access': 'true',
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: MODEL,
|
||||
max_tokens: 1024,
|
||||
stream: true,
|
||||
system: buildSystemPrompt(context),
|
||||
messages: nextMessages,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}))
|
||||
throw new Error(body?.error?.message ?? `API error ${res.status}`)
|
||||
}
|
||||
|
||||
const reader = res.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let full = ''
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
const chunk = decoder.decode(value, { stream: true })
|
||||
for (const line of chunk.split('\n')) {
|
||||
if (!line.startsWith('data: ')) continue
|
||||
const data = line.slice(6).trim()
|
||||
if (data === '[DONE]' || !data) continue
|
||||
try {
|
||||
const ev = JSON.parse(data)
|
||||
if (ev.type === 'content_block_delta' && ev.delta?.type === 'text_delta') {
|
||||
full += ev.delta.text
|
||||
setStreaming(full)
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: full }])
|
||||
setStreaming('')
|
||||
} catch (err) {
|
||||
if (err.name !== 'AbortError') {
|
||||
setError(err.message)
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
abortRef.current = null
|
||||
}
|
||||
}, [messages, loading, apiKey, keyInfo, currentChord, bpm, chordHistory])
|
||||
|
||||
function stopGeneration() {
|
||||
abortRef.current?.abort()
|
||||
if (streaming) {
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: streaming }])
|
||||
setStreaming('')
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
sendMessage(input)
|
||||
}
|
||||
}
|
||||
|
||||
const hasKey = apiKey.trim().length > 0
|
||||
|
||||
// Dot: purple when API key set, gray otherwise
|
||||
const dotClass = hasKey ? 'bg-accent' : 'bg-gray-700'
|
||||
|
||||
return (
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
{/* ── Header ─────────────────────────────────────────────────────────── */}
|
||||
<div className="flex items-center justify-between px-4 py-2 text-sm text-gray-400">
|
||||
<button
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="flex items-center gap-2 hover:text-gray-200 transition-colors text-left"
|
||||
>
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${dotClass}`} />
|
||||
<span>MUSIC TEACHER</span>
|
||||
<span className="text-[11px] text-gray-600">AI · Claude</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Key indicator */}
|
||||
<button
|
||||
onClick={() => setShowKeyInput(v => !v)}
|
||||
className="text-[10px] text-gray-600 hover:text-gray-400 transition-colors px-1.5 py-0.5 rounded border border-transparent hover:border-border"
|
||||
title={hasKey ? 'API key set — click to change' : 'Set API key'}
|
||||
>
|
||||
{hasKey ? '🔑 key set' : '🔑 add key'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setOpen(v => !v)}
|
||||
className="w-6 h-6 flex items-center justify-center rounded text-gray-500 hover:text-gray-300 hover:bg-white/5 transition-all"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
{open
|
||||
? <polyline points="2,8 6,4 10,8" />
|
||||
: <polyline points="2,4 6,8 10,4" />
|
||||
}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Body ───────────────────────────────────────────────────────────── */}
|
||||
{open && (
|
||||
<div className="border-t border-border">
|
||||
|
||||
{/* API key input (shown when no key or user wants to change) */}
|
||||
{(!hasKey || showKeyInput) && (
|
||||
<div className="px-4 py-3 bg-surface/50 border-b border-border">
|
||||
<p className="text-xs text-gray-500 mb-2">
|
||||
Enter your <a className="text-accent underline" href="https://console.anthropic.com/keys" target="_blank" rel="noreferrer">Anthropic API key</a> to enable the music teacher. Stored locally on your device only.
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="password"
|
||||
value={apiKey}
|
||||
onChange={e => setApiKey(e.target.value)}
|
||||
placeholder="sk-ant-..."
|
||||
className="flex-1 px-2.5 py-1.5 bg-surface border border-border rounded-lg text-xs text-gray-300 focus:outline-none focus:border-accent font-mono"
|
||||
/>
|
||||
<button
|
||||
onClick={() => { saveKey(apiKey); setShowKeyInput(false) }}
|
||||
disabled={!apiKey.trim()}
|
||||
className="px-3 py-1.5 bg-accent text-white text-xs font-bold rounded-lg hover:bg-accent/80 transition-colors disabled:opacity-40"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
{hasKey && (
|
||||
<button
|
||||
onClick={() => setShowKeyInput(false)}
|
||||
className="px-3 py-1.5 text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasKey && (
|
||||
<>
|
||||
{/* Live session context strip */}
|
||||
<div className="flex items-center gap-3 px-4 py-2 border-b border-border text-[10px] font-mono">
|
||||
<span className="text-gray-600 uppercase tracking-wider">Now:</span>
|
||||
{keyInfo ? (
|
||||
<span className="text-accent">{keyInfo.root} {keyInfo.mode}</span>
|
||||
) : (
|
||||
<span className="text-gray-700">no key</span>
|
||||
)}
|
||||
<span className="text-gray-800">·</span>
|
||||
{currentChord ? (
|
||||
<span className="text-white">{currentChord.name}</span>
|
||||
) : (
|
||||
<span className="text-gray-700">no chord</span>
|
||||
)}
|
||||
<span className="text-gray-800">·</span>
|
||||
<span className="text-gray-500">{bpm ? `${Math.round(bpm)} bpm` : '— bpm'}</span>
|
||||
{messages.length > 0 && (
|
||||
<button
|
||||
onClick={() => { setMessages([]); setError(null) }}
|
||||
className="ml-auto text-gray-700 hover:text-gray-400 transition-colors"
|
||||
title="Clear conversation"
|
||||
>
|
||||
clear chat
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Chat messages */}
|
||||
{messages.length > 0 || streaming ? (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="max-h-72 overflow-y-auto px-4 py-3 space-y-3 text-xs"
|
||||
>
|
||||
{messages.map((m, i) => (
|
||||
<div key={i} className={m.role === 'user' ? 'flex justify-end' : ''}>
|
||||
{m.role === 'user' ? (
|
||||
<div className="max-w-[80%] bg-accent/20 border border-accent/30 rounded-xl rounded-tr-sm px-3 py-2 text-gray-200">
|
||||
{m.content}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-gray-300 leading-relaxed">
|
||||
<MessageText text={m.content} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{streaming && (
|
||||
<div className="text-gray-300 text-xs leading-relaxed">
|
||||
<MessageText text={streaming} />
|
||||
<span className="inline-block w-1.5 h-3.5 bg-accent/70 animate-pulse ml-0.5 align-middle" />
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div className="text-red-400 text-xs bg-red-950/30 border border-red-900/50 rounded-lg px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
/* Quick-action chips (shown when no chat history yet) */
|
||||
<div className="px-4 py-3">
|
||||
<p className="text-[10px] text-gray-700 mb-2 uppercase tracking-wider">Ask something</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{CHIPS.map(chip => (
|
||||
<button
|
||||
key={chip.label}
|
||||
onClick={() => sendMessage(chip.msg)}
|
||||
className="px-2.5 py-1 bg-surface border border-border rounded-full text-[10px] text-gray-400 hover:text-white hover:border-accent/50 hover:bg-accent/10 transition-all"
|
||||
>
|
||||
{chip.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input row */}
|
||||
<div className="px-4 py-3 border-t border-border flex gap-2 items-end">
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Ask anything about music theory, technique, or what to play…"
|
||||
rows={1}
|
||||
className="flex-1 px-3 py-2 bg-surface border border-border rounded-xl text-xs text-gray-300 placeholder-gray-700 focus:outline-none focus:border-accent resize-none leading-relaxed"
|
||||
style={{ maxHeight: '80px', overflowY: 'auto' }}
|
||||
/>
|
||||
{loading ? (
|
||||
<button
|
||||
onClick={stopGeneration}
|
||||
className="px-3 py-2 bg-surface border border-border text-gray-500 hover:text-red-400 hover:border-red-800 text-xs rounded-xl transition-colors shrink-0"
|
||||
title="Stop"
|
||||
>
|
||||
⏹
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => sendMessage(input)}
|
||||
disabled={!input.trim()}
|
||||
className="px-3 py-2 bg-accent text-white text-xs font-bold rounded-xl hover:bg-accent/80 transition-colors disabled:opacity-40 shrink-0"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Quick chips after first message */}
|
||||
{messages.length > 0 && (
|
||||
<div className="px-4 pb-3 flex flex-wrap gap-1.5">
|
||||
{CHIPS.slice(0, 4).map(chip => (
|
||||
<button
|
||||
key={chip.label}
|
||||
onClick={() => sendMessage(chip.msg)}
|
||||
disabled={loading}
|
||||
className="px-2 py-0.5 bg-surface border border-border rounded-full text-[9px] text-gray-600 hover:text-gray-300 hover:border-accent/30 transition-all disabled:opacity-30"
|
||||
>
|
||||
{chip.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -17,7 +17,7 @@ function findLoopPosition(chordHistory, progression) {
|
||||
return progression.indexOf(last)
|
||||
}
|
||||
|
||||
export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgression, currentChord }) {
|
||||
export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgression, currentChord, onChordClick }) {
|
||||
const { root, mode, confidence } = keyInfo ?? {}
|
||||
|
||||
const visible = chordHistory.slice(-HISTORY_SHOWN)
|
||||
@@ -75,10 +75,11 @@ export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgr
|
||||
key={i}
|
||||
ref={isCurrent ? currentRef : null}
|
||||
style={{ opacity }}
|
||||
className={`flex flex-col items-center shrink-0 px-2 py-1 rounded-xl transition-colors duration-200 ${
|
||||
onClick={() => onChordClick?.(chord)}
|
||||
className={`flex flex-col items-center shrink-0 px-2 py-1 rounded-xl transition-colors duration-200 cursor-pointer ${
|
||||
isCurrent
|
||||
? 'bg-accent/10 border border-accent/40 ring-1 ring-accent/20'
|
||||
: 'border border-transparent'
|
||||
? 'bg-accent/10 border border-accent/40 ring-1 ring-accent/20 hover:bg-accent/20'
|
||||
: 'border border-transparent hover:border-border hover:bg-panel'
|
||||
}`}
|
||||
>
|
||||
<span className={`font-black leading-none tracking-tight ${
|
||||
@@ -108,10 +109,11 @@ export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgr
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex flex-col items-center px-2 py-0.5 rounded-lg border transition-all duration-200 ${
|
||||
onClick={() => onChordClick?.(chord)}
|
||||
className={`flex flex-col items-center px-2 py-0.5 rounded-lg border transition-all duration-200 cursor-pointer ${
|
||||
isActive
|
||||
? 'bg-accent/20 border-accent shadow-[0_0_10px_rgba(168,85,247,0.3)]'
|
||||
: 'bg-border border-border'
|
||||
? 'bg-accent/20 border-accent shadow-[0_0_10px_rgba(168,85,247,0.3)] hover:bg-accent/30'
|
||||
: 'bg-border border-border hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-sm font-bold leading-none ${isActive ? 'text-accent' : 'text-gray-300'}`}>
|
||||
@@ -132,11 +134,16 @@ export default function ProgressionBanner({ chordHistory, keyInfo, detectedProgr
|
||||
{/* ── Right: big chord ── */}
|
||||
<div className="hidden lg:flex w-[30%] flex-col items-center justify-center gap-1">
|
||||
{current ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => onChordClick?.(current)}
|
||||
className="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-accent/10 transition-colors group"
|
||||
title="Click to see voicings"
|
||||
>
|
||||
<p className="text-xs text-gray-600 uppercase tracking-widest">Now Playing</p>
|
||||
<div className="text-6xl font-black text-amber-400 leading-none">{current}</div>
|
||||
<div className="text-6xl font-black text-amber-400 leading-none group-hover:text-accent transition-colors">{current}</div>
|
||||
<div className="text-sm text-gray-500">{currentRN}</div>
|
||||
</>
|
||||
<p className="text-[10px] text-gray-700 group-hover:text-gray-500 transition-colors">tap for voicings</p>
|
||||
</button>
|
||||
) : (
|
||||
<p className="text-gray-600 text-xs text-center">Play a chord</p>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
// ─── Mini fretboard scale diagram ─────────────────────────────────────────────
|
||||
// Shows a 6-string × 5-fret window of scale tones.
|
||||
// Root notes → purple fill. Scale tones → dark grey fill.
|
||||
// Strings: top = s6 (low E), bottom = s1 (high e).
|
||||
// Window starts at the root fret on string 6.
|
||||
|
||||
const OPEN_PITCHES = [4, 9, 2, 7, 11, 4] // E A D G B e (s6 … s1)
|
||||
const FRETS = 5
|
||||
|
||||
export default function RiffDiagram({ rootPc, scaleIntervals = [0, 3, 5, 7, 10] }) {
|
||||
if (rootPc === undefined || rootPc === null) return null
|
||||
|
||||
// Fret window starts where the root lands on s6 (low E)
|
||||
const startFret = (rootPc - OPEN_PITCHES[0] + 12) % 12
|
||||
|
||||
// Which pitch classes are in the scale?
|
||||
const scaleSet = new Set(scaleIntervals.map(i => (rootPc + i) % 12))
|
||||
|
||||
// Collect dots: { s (0=s6…5=s1), f (0-4 within window), isRoot }
|
||||
const dots = []
|
||||
for (let s = 0; s < 6; s++) {
|
||||
for (let f = 0; f < FRETS; f++) {
|
||||
const pc = (OPEN_PITCHES[s] + startFret + f) % 12
|
||||
if (scaleSet.has(pc)) {
|
||||
dots.push({ s, f, isRoot: pc === rootPc })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SVG layout
|
||||
const W = 152, H = 70
|
||||
const mL = 6, mT = 14, mR = 6, mB = 4
|
||||
const innerW = W - mL - mR // 140
|
||||
const innerH = H - mT - mB // 52
|
||||
|
||||
const cellW = innerW / FRETS // 28
|
||||
const strGap = innerH / 5 // gap between 6 strings (5 gaps)
|
||||
|
||||
const sx = (f) => mL + f * cellW // left edge of fret cell
|
||||
const cx = (f) => mL + (f + 0.5) * cellW // centre of fret cell
|
||||
const sy = (s) => mT + s * strGap // y of string s
|
||||
|
||||
return (
|
||||
<svg width={W} height={H} className="shrink-0 overflow-visible">
|
||||
{/* Fret separators (vertical lines) */}
|
||||
{Array.from({ length: FRETS + 1 }, (_, f) => (
|
||||
<line key={f}
|
||||
x1={sx(f)} y1={mT - 2}
|
||||
x2={sx(f)} y2={H - mB}
|
||||
stroke={f === 0 ? '#555' : '#2a2a2a'}
|
||||
strokeWidth={f === 0 ? 2 : 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* String lines (horizontal) */}
|
||||
{Array.from({ length: 6 }, (_, s) => (
|
||||
<line key={s}
|
||||
x1={mL} y1={sy(s)}
|
||||
x2={W - mR} y2={sy(s)}
|
||||
stroke="#3a3a3a"
|
||||
strokeWidth={s === 0 ? 1.5 : 1}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Fret numbers above */}
|
||||
{Array.from({ length: FRETS }, (_, f) => (
|
||||
<text key={f}
|
||||
x={cx(f)} y={9}
|
||||
textAnchor="middle" fontSize={8}
|
||||
fill={f === 0 && startFret > 0 ? '#a855f7' : '#555'}
|
||||
fontWeight={f === 0 && startFret > 0 ? 'bold' : 'normal'}>
|
||||
{startFret + f === 0 ? 'O' : startFret + f}
|
||||
</text>
|
||||
))}
|
||||
|
||||
{/* Scale dots */}
|
||||
{dots.map((d, i) => (
|
||||
<circle key={i}
|
||||
cx={cx(d.f)} cy={sy(d.s)}
|
||||
r={4.5}
|
||||
fill={d.isRoot ? '#a855f7' : '#3d3d3d'}
|
||||
stroke={d.isRoot ? '#c084fc' : '#606060'}
|
||||
strokeWidth={1}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Root labels */}
|
||||
{dots.filter(d => d.isRoot).map((d, i) => (
|
||||
<text key={i}
|
||||
x={cx(d.f)} y={sy(d.s) + 3.5}
|
||||
textAnchor="middle" fontSize={6}
|
||||
fill="white" fontWeight="bold">
|
||||
R
|
||||
</text>
|
||||
))}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import { useRef, useEffect, useState } from 'react'
|
||||
|
||||
const SETTINGS = [
|
||||
{
|
||||
section: 'Chord Detection',
|
||||
@@ -70,7 +72,52 @@ const SETTINGS = [
|
||||
},
|
||||
]
|
||||
|
||||
export default function Settings({ config, onChange, onClose, onReset }) {
|
||||
export default function Settings({ config, onChange, onClose, onReset, monoColor, onMonoColorChange }) {
|
||||
// Snapshot on mount so Cancel can restore
|
||||
const savedConfig = useRef(config)
|
||||
const savedMono = useRef(monoColor)
|
||||
|
||||
function handleCancel() {
|
||||
Object.entries(savedConfig.current).forEach(([k, v]) => onChange(k, v))
|
||||
onMonoColorChange(savedMono.current)
|
||||
onClose()
|
||||
}
|
||||
|
||||
function DeviceSelector({ config, onChange }) {
|
||||
const [devices, setDevices] = useState([])
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) return
|
||||
const list = await navigator.mediaDevices.enumerateDevices()
|
||||
setDevices(list.filter(d => d.kind === 'audioinput'))
|
||||
} catch (e) {
|
||||
console.warn('enumerateDevices failed', e)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { refresh() }, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-3 items-center">
|
||||
<select
|
||||
value={config.audioDeviceId ?? ''}
|
||||
onChange={e => onChange('audioDeviceId', e.target.value === '' ? null : e.target.value)}
|
||||
className="appearance-none bg-surface border border-border hover:border-gray-500 focus:border-accent focus:outline-none rounded-lg pl-3 pr-7 py-1 text-sm text-gray-200 cursor-pointer transition-colors w-full"
|
||||
>
|
||||
<option value="">System default</option>
|
||||
{devices.map((d, i) => (
|
||||
<option key={d.deviceId || i} value={d.deviceId}>{d.label || `Microphone ${i + 1}`}</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={refresh} className="px-3 py-1 rounded-lg border border-border text-sm text-gray-400">Refresh</button>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600">If device labels are empty, grant microphone permission first and hit Refresh.</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-surface z-50 overflow-y-auto">
|
||||
<div className="max-w-2xl mx-auto px-6 py-8">
|
||||
@@ -87,16 +134,42 @@ export default function Settings({ config, onChange, onClose, onReset }) {
|
||||
>
|
||||
Reset defaults
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
className="px-4 py-2 rounded-lg text-sm border border-border text-gray-500 hover:text-gray-300 hover:border-gray-400 transition-all"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-5 py-2 rounded-lg text-sm bg-accent hover:bg-purple-600 text-white font-semibold transition-all"
|
||||
>
|
||||
Done
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* ── Display ── */}
|
||||
<div>
|
||||
<h3 className="text-xs uppercase tracking-widest text-gray-500 mb-4 border-b border-border pb-2">
|
||||
Display
|
||||
</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-200">Mono Color Mode</p>
|
||||
<p className="text-xs text-gray-600 mt-0.5">Use a single purple palette instead of purple + amber for note tiers.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onMonoColorChange(v => !v)}
|
||||
className={`relative w-11 h-6 rounded-full transition-colors ${monoColor ? 'bg-accent' : 'bg-gray-700'}`}
|
||||
>
|
||||
<span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${monoColor ? 'translate-x-5' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{SETTINGS.map(section => (
|
||||
<div key={section.section}>
|
||||
<h3 className="text-xs uppercase tracking-widest text-gray-500 mb-4 border-b border-border pb-2">
|
||||
@@ -137,6 +210,14 @@ export default function Settings({ config, onChange, onClose, onReset }) {
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Audio device selector */}
|
||||
<div>
|
||||
<h3 className="text-xs uppercase tracking-widest text-gray-500 mb-4 border-b border-border pb-2">
|
||||
Microphone
|
||||
</h3>
|
||||
<DeviceSelector config={config} onChange={onChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -108,17 +108,14 @@ export default function Tuner() {
|
||||
|
||||
|
||||
return (
|
||||
<div className="p-6 bg-panel border border-border rounded-xl text-center">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold">Tuner</h3>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => (isListening ? stopListening() : startListening())}
|
||||
className={`px-4 py-2 rounded-full text-sm font-semibold ${isListening ? 'bg-red-600' : 'bg-accent'}`}
|
||||
>
|
||||
{isListening ? 'Stop' : 'Start'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 text-center">
|
||||
<div className="flex items-start justify-end mb-4">
|
||||
<button
|
||||
onClick={() => (isListening ? stopListening() : startListening())}
|
||||
className={`px-4 py-2 rounded-full text-sm font-semibold ${isListening ? 'bg-red-600' : 'bg-accent'}`}
|
||||
>
|
||||
{isListening ? 'Stop' : 'Start'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex flex-col items-center">
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
# KB Authoring Contract
|
||||
|
||||
Every knowledgebase cell must conform to this schema and pass `node scripts/validate-kb.mjs`. The gold-standard exemplar is `jazz/` — imitate it. Background and rationale: `docs/kb-plan.md`.
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
src/data/kb/<style>/
|
||||
meta.js — style identity
|
||||
progressions.js — the style's standard progressions (instrument-independent)
|
||||
guitar.js — instrument packs (piano.js, bass.js as cells are completed)
|
||||
```
|
||||
|
||||
Register each style in `src/data/kb/index.js`. The UI reads only the registry.
|
||||
|
||||
## Hard rules
|
||||
|
||||
1. **Key-agnostic.** Degrees and movable shapes only — never absolute chord names in data. Open guitar shapes are the one exception (they declare `onlyRoot`, a pitch class, and render only in matching keys).
|
||||
2. **Qualities** must be keys of `CHORD_TYPES` in `src/lib/theory.js` (`maj`, `min`, `dom7`, `maj7`, `min7`, `dim`, `dim7`, `half_dim`, `aug`, `sus4`, `sus2`, `maj6`, `min6`, `add9`).
|
||||
3. **Intermediate level.** Guitar: fret span ≤ 4 within a shape. Piano: one hand per recipe stays within a 10th. If a play is harder, provide an easier alternative in the same play set.
|
||||
4. Plays for the same progression must be **idiomatically different** (register, density, technique) — not transpositions of each other.
|
||||
|
||||
## meta.js
|
||||
|
||||
```js
|
||||
export default {
|
||||
id: 'jazz', // folder name
|
||||
label: 'Jazz',
|
||||
feel: 'swing', // swing | straight | shuffle | 16th | bossa…
|
||||
tempoRange: [110, 230],
|
||||
character: 'One sentence on what makes the style sound like itself.',
|
||||
}
|
||||
```
|
||||
|
||||
## progressions.js
|
||||
|
||||
```js
|
||||
export default [
|
||||
{
|
||||
id: 'jazz-251-major', // '<style>-<slug>', globally unique
|
||||
name: 'ii–V–I',
|
||||
rn: ['ii7', 'V7', 'Imaj7'], // display numerals
|
||||
degrees: [2, 7, 0], // semitone offsets from key root, 0–11
|
||||
qualities: ['min7', 'dom7', 'maj7'],
|
||||
bars: [1, 1, 2], // same length as degrees
|
||||
mode: 'major', // major | minor | dorian | mixolydian | …
|
||||
songs: ['Autumn Leaves'],
|
||||
tip: 'One transferable idea.',
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
4–8 progressions per style. Cross-check `docs/progression-repertoire.md` §1.
|
||||
|
||||
## Instrument packs
|
||||
|
||||
Common envelope:
|
||||
|
||||
```js
|
||||
export default {
|
||||
styleIntro: '2-3 sentences on this instrument's role in the style.',
|
||||
comping: [{ label, rhythm, description }], // ≥1 named rhythm
|
||||
plays: { '<progression-id>': [ <play>, <play> ] }, // ≥2 plays per progression
|
||||
improv: { // guitar/piano; optional for bass
|
||||
scales: [{ over: 'ii7', scale: 'dorian', why }],
|
||||
targetNotes: '…',
|
||||
licks: [{ tab/notation, description, over: '<progression-id>', source }],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Guitar play
|
||||
|
||||
```js
|
||||
{
|
||||
label: 'Shell voicings',
|
||||
level: 'intermediate',
|
||||
chords: [ // one per progression step
|
||||
{
|
||||
shape: {
|
||||
// movable: fret offsets relative to the root fret; 'x' = muted
|
||||
rootStr: 6, // string carrying the root, 6 = low E
|
||||
offsets: [0, 'x', 0, 0, 'x', 'x'], // ALWAYS 6 entries, low E first
|
||||
fingers: [1, 0, 2, 3, 0, 0],
|
||||
// open shapes instead use: frets: [...absolute], onlyRoot: <pc 0-11>
|
||||
},
|
||||
extensions: ['9'], // declared color tones beyond the quality (validator allows only these)
|
||||
// declared omissions (honest data, surfaced by the UI):
|
||||
// rootless: true — shape omits the root (e.g. guide-tone grips)
|
||||
// omit3: true — shape omits the 3rd (e.g. power chords; works over major or minor)
|
||||
note: 'root–♭7–♭3',
|
||||
},
|
||||
// …
|
||||
],
|
||||
tips: 'Voice-leading or ensemble advice.',
|
||||
}
|
||||
```
|
||||
|
||||
### Piano play
|
||||
|
||||
Voicings are degree recipes resolved through the chord quality. Degrees: `'1' '3' '5' '7'` resolve per quality (e.g. `'3'` → ♭3 for min7); altered/extended degrees are explicit: `'b9' '9' '#9' '11' '#11' 'b13' '13' '6'`.
|
||||
|
||||
```js
|
||||
{
|
||||
label: 'Rootless A/B alternation',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ recipe: { LH: ['3', '5', '7', '9'] }, note: 'Type A' },
|
||||
{ recipe: { LH: ['7', '9', '3', '13'] }, note: 'Type B' },
|
||||
],
|
||||
register: 'top note between C4 and C5',
|
||||
tips: '…',
|
||||
}
|
||||
```
|
||||
|
||||
### Bass play
|
||||
|
||||
```js
|
||||
{
|
||||
label: 'Walking, chromatic approach',
|
||||
level: 'intermediate',
|
||||
bars: [{ beats: ['R', '3', '5', 'chrom>'] }], // per bar of the progression
|
||||
// beat tokens: R 3 5 7 (chord degrees) · 'chrom>' / 'chrom<' (chromatic into next root
|
||||
// from below/above) · '5>' (dominant approach) · 'x' (ghost) · '-' (hold)
|
||||
tips: '…',
|
||||
}
|
||||
```
|
||||
|
||||
## Musician checklist (self-review before committing)
|
||||
|
||||
- [ ] Plays per progression genuinely differ in register/density/technique
|
||||
- [ ] Every shape/recipe is playable by intermediate hands (rule 3)
|
||||
- [ ] The style is recognizable from the rhythm descriptions alone (bossa ≠ jazz with new labels)
|
||||
- [ ] Every tip teaches a transferable idea (voice leading, register, space), not just "play this"
|
||||
- [ ] Songs/licks have sources; nothing invented
|
||||
- [ ] `node scripts/validate-kb.mjs` green; `npm run build` green
|
||||
@@ -0,0 +1,233 @@
|
||||
// Blues guitar pack. Shapes verified by note-spelling against: guitarworld.com
|
||||
// (13th chords, Jimmy Reed rhythm), fundamental-changes.com (SRV/Freddie King 9ths,
|
||||
// turnarounds), truefire.com (Texas comping, chord-tone targeting), jazzguitar.be
|
||||
// (tritone shells), guitarplayer.com (B.B. box, turnarounds).
|
||||
|
||||
// Big barre grips — full-band downbeat hits.
|
||||
const E_BARRE7 = { rootStr: 6, offsets: [0, 2, 0, 1, 0, 0], fingers: [1, 3, 1, 2, 1, 1] } // R-5-♭7-3-5-R
|
||||
const A_BARRE7 = { rootStr: 5, offsets: ['x', 0, 2, 0, 2, 0], fingers: [0, 1, 3, 1, 4, 1] } // R-5-♭7-3-5
|
||||
const MIN7_BARRE_6 = { rootStr: 6, offsets: [0, 2, 0, 0, 0, 0], fingers: [1, 3, 1, 1, 1, 1] } // Em-shape m7
|
||||
const MIN7_BARRE_5 = { rootStr: 5, offsets: ['x', 0, 2, 0, 1, 0], fingers: [0, 1, 3, 1, 2, 1] } // Am-shape m7
|
||||
|
||||
// The blues colour chords — root on the A string.
|
||||
const NINTH = { rootStr: 5, offsets: ['x', 0, -1, 0, 0, 0], fingers: [0, 2, 1, 3, 3, 3] } // R-3-♭7-9-5
|
||||
const THIRTEEN = { rootStr: 5, offsets: ['x', 0, -1, 0, 0, 2], fingers: [0, 2, 1, 3, 3, 4] } // R-3-♭7-9-13
|
||||
const THIRTEEN_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, 2, 'x'], fingers: [1, 0, 2, 3, 4, 0] } // R-♭7-3-13 (T-Bone register)
|
||||
const HENDRIX = { rootStr: 5, offsets: ['x', 0, -1, 0, 1, 'x'], fingers: [0, 2, 1, 3, 4, 0] } // 7#9 — ♭3 vs 3 in one grip
|
||||
|
||||
// Two-note-tritone shells — the Chicago comping grips.
|
||||
const SHELL7_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, 'x', 'x'], fingers: [1, 0, 2, 3, 0, 0] } // R-♭7-3
|
||||
const SHELL7_5 = { rootStr: 5, offsets: ['x', 0, 'x', 0, 2, 'x'], fingers: [0, 1, 0, 2, 4, 0] } // R-♭7-3
|
||||
const SHELL_M7_5 = { rootStr: 5, offsets: ['x', 0, -2, 0, 'x', 'x'], fingers: [0, 3, 1, 4, 0, 0] } // R-♭3-♭7
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'Blues rhythm guitar is a drum kit with pitch: the shuffle is the job, the chord is the decoration. Pick a lane — low boogie locked with the bass, or high 9th-chord stabs answering the vocal — and never both at once.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: 'Jimmy Reed boogie shuffle',
|
||||
rhythm: 'swung 8ths: R+5 / R+6 alternating',
|
||||
description: 'Two-note dyads on the bottom strings, alternating the 5th and 6th above the root in swung eighths; move the same cell to the IV and V strings. Low register, dense — doubles the bass. The "second guitar" role Reed pioneered.',
|
||||
},
|
||||
{
|
||||
label: '9th-chord stabs (Texas / SRV)',
|
||||
rhythm: 'staccato hits, slide in from a half-step below',
|
||||
description: 'Short muted stabs of the 9th grip, approached from one fret under (B♭9→B9). Mid-high register, sparse — leaves the low end to the bass. The Freddie King "Hide Away" sound.',
|
||||
},
|
||||
{
|
||||
label: 'Slow blues 12/8',
|
||||
rhythm: 'rolled chords on a triplet grid',
|
||||
description: 'At ~60 BPM everything subdivides into triplets: arpeggiated 9ths, the 6↔9 rock on the top strings, fills answering the vocal. Density drops; space is the instrument.',
|
||||
},
|
||||
{
|
||||
label: 'Stormy Monday walk-up',
|
||||
rhythm: 'one chord per walking step, bars 7–8',
|
||||
description: 'Diatonic chord climb I7→ii7→iii7 then chromatic back down — a bassline played as chords. Canonical on the Allman Brothers\' At Fillmore East.',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'blues-12bar': [
|
||||
{
|
||||
label: 'Barre-chord shuffle',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: E_BARRE7, note: 'I7 — root on the 6th string' },
|
||||
{ shape: E_BARRE7, note: '' }, { shape: E_BARRE7, note: '' }, { shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'IV7 — same fret, root string up' },
|
||||
{ shape: A_BARRE7, note: '' },
|
||||
{ shape: E_BARRE7, note: '' }, { shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'V7 — two frets above the IV grip' },
|
||||
{ shape: A_BARRE7, note: 'IV7' },
|
||||
{ shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'V7 — push into the next chorus' },
|
||||
],
|
||||
tips: 'I, IV and V all live within two frets: 6th-string root, then 5th-string root at the same fret (IV) and two up (V). Strum short — the shuffle lives in the damping hand.',
|
||||
},
|
||||
{
|
||||
label: '9th-chord stabs (Texas)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: NINTH, extensions: ['9'], note: 'slide in from one fret below' },
|
||||
{ shape: NINTH, extensions: ['9'], note: '' }, { shape: NINTH, extensions: ['9'], note: '' }, { shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: NINTH, extensions: ['9'], note: 'IV9' }, { shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: NINTH, extensions: ['9'], note: '' }, { shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: 'V13 — pinky reaches the 13' },
|
||||
{ shape: NINTH, extensions: ['9'], note: 'IV9' },
|
||||
{ shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: 'V13' },
|
||||
],
|
||||
tips: 'Stab, mute, wait. The 13↔9 drop on the top string is a free melodic hook — comping that sounds like a horn section.',
|
||||
},
|
||||
],
|
||||
|
||||
'blues-quickchange': [
|
||||
{
|
||||
label: 'Tritone shells (Chicago)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: SHELL7_6, note: 'I7' },
|
||||
{ shape: SHELL7_5, note: 'quick IV — only the inner pair moves' },
|
||||
{ shape: SHELL7_6, note: '' }, { shape: SHELL7_6, note: '' },
|
||||
{ shape: SHELL7_5, note: '' }, { shape: SHELL7_5, note: '' },
|
||||
{ shape: SHELL7_6, note: '' }, { shape: SHELL7_6, note: '' },
|
||||
{ shape: SHELL7_5, note: 'V7' },
|
||||
{ shape: SHELL7_5, note: 'IV7' },
|
||||
{ shape: SHELL7_6, note: '' },
|
||||
{ shape: SHELL7_5, note: 'V7' },
|
||||
],
|
||||
tips: 'Three strings, two of them the chord-defining tritone. Drop the I7\'s inner pair one fret and you\'re already playing the IV7\'s guide tones — the quick change costs one finger.',
|
||||
},
|
||||
{
|
||||
label: 'Big barres, quick four',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'the quick change — bar 2' },
|
||||
{ shape: E_BARRE7, note: '' }, { shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: '' }, { shape: A_BARRE7, note: '' },
|
||||
{ shape: E_BARRE7, note: '' }, { shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'V7' },
|
||||
{ shape: A_BARRE7, note: 'IV7' },
|
||||
{ shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'V7' },
|
||||
],
|
||||
tips: 'Accent bar 2 slightly — telegraphing the quick change keeps the whole jam from splitting between the two 12-bar variants.',
|
||||
},
|
||||
],
|
||||
|
||||
'blues-8bar': [
|
||||
{
|
||||
label: 'Barres through the 8-bar form',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: E_BARRE7, note: 'I7' },
|
||||
{ shape: A_BARRE7, note: 'V7 already — count!' },
|
||||
{ shape: A_BARRE7, note: 'IV7' }, { shape: A_BARRE7, note: '' },
|
||||
{ shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'V7' },
|
||||
{ shape: E_BARRE7, note: '' },
|
||||
{ shape: A_BARRE7, note: 'V7 — turnaround' },
|
||||
],
|
||||
tips: 'Half the length, twice the changes per chorus. Lock the form before decorating it.',
|
||||
},
|
||||
{
|
||||
label: '9ths and 13ths, uptown',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: 'V13' },
|
||||
{ shape: NINTH, extensions: ['9'], note: 'IV9' }, { shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: '' },
|
||||
{ shape: NINTH, extensions: ['9'], note: '' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: '' },
|
||||
],
|
||||
tips: 'The Key-to-the-Highway feel is gentle — roll the chords instead of stabbing them, triplet feel even at medium tempo.',
|
||||
},
|
||||
],
|
||||
|
||||
'blues-minor': [
|
||||
{
|
||||
label: 'm7 barres with the ♯9 climax',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MIN7_BARRE_6, note: 'i7' },
|
||||
{ shape: MIN7_BARRE_6, note: '' }, { shape: MIN7_BARRE_6, note: '' }, { shape: MIN7_BARRE_6, note: '' },
|
||||
{ shape: MIN7_BARRE_5, note: 'iv7' }, { shape: MIN7_BARRE_5, note: '' },
|
||||
{ shape: MIN7_BARRE_6, note: '' }, { shape: MIN7_BARRE_6, note: '' },
|
||||
{ shape: A_BARRE7, note: '♭VI7 — the drama bar' },
|
||||
{ shape: HENDRIX, extensions: ['#9'], note: 'V7♯9 — the slow-blues scream' },
|
||||
{ shape: MIN7_BARRE_6, note: '' }, { shape: MIN7_BARRE_6, note: '' },
|
||||
],
|
||||
tips: 'Save your dynamics for bars 9–10: the ♭VI7→V7♯9 half-step drop is the whole emotional payload of the form. Everything before it is patience.',
|
||||
},
|
||||
{
|
||||
label: 'Upper-register minor comping',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MIN7_BARRE_5, note: 'i7 — A-string root, above the bass' },
|
||||
{ shape: MIN7_BARRE_5, note: '' }, { shape: MIN7_BARRE_5, note: '' }, { shape: MIN7_BARRE_5, note: '' },
|
||||
{ shape: SHELL_M7_5, note: 'iv7 — thin out, the singer is working' },
|
||||
{ shape: SHELL_M7_5, note: '' },
|
||||
{ shape: MIN7_BARRE_5, note: '' }, { shape: MIN7_BARRE_5, note: '' },
|
||||
{ shape: THIRTEEN_6, extensions: ['13'], note: '♭VI13' },
|
||||
{ shape: NINTH, extensions: ['9'], note: 'V9' },
|
||||
{ shape: MIN7_BARRE_5, note: '' }, { shape: SHELL_M7_5, note: 'fade to the turnaround' },
|
||||
],
|
||||
tips: 'Minor blues is usually slow — 12/8 triplet grid, rolled chords, and at least one full bar per chorus where you play nothing at all.',
|
||||
},
|
||||
],
|
||||
|
||||
'blues-turnaround': [
|
||||
{
|
||||
label: 'Shell cycle',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: SHELL7_6, note: 'I7' },
|
||||
{ shape: SHELL7_5, note: 'VI7' },
|
||||
{ shape: SHELL_M7_5, note: 'ii7' },
|
||||
{ shape: SHELL7_6, note: 'V7' },
|
||||
],
|
||||
tips: 'Often two beats per chord, not a bar — practise it at both speeds. The roots fall in fifths from the VI on, so the grips alternate strings on their own.',
|
||||
},
|
||||
{
|
||||
label: 'Uptown 9ths (T-Bone)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: NINTH, extensions: ['9'], note: 'I9' },
|
||||
{ shape: NINTH, extensions: ['9'], note: 'VI9' },
|
||||
{ shape: MIN7_BARRE_5, note: 'ii7' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: 'V13 — hold, then slide down a fret into the next chorus' },
|
||||
],
|
||||
tips: 'This is the Stormy Monday sound: every dominant becomes a 9th or 13th, approached chromatically. Roll them lazily on the triplet grid.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'I7', scale: 'mixolydian', why: 'Major pentatonic and Mixolydian shine over the I — the sweet B.B. King side of the coin.' },
|
||||
{ over: 'IV7', scale: 'mixolydian', why: 'Switch to minor pentatonic (or think the IV\'s own Mixolydian) when the IV arrives — the key\'s major 3rd clashes with its ♭7.' },
|
||||
{ over: 'V7', scale: 'mixolydian', why: 'Each chord gets its own Mixolydian; adjacent ones differ by one note, so really it\'s "follow the chord tones."' },
|
||||
{ over: 'i7 (minor blues)', scale: 'minor', why: 'Minor pentatonic + the natural 6 over the iv; harmonic minor colour over the V7.' },
|
||||
],
|
||||
targetNotes:
|
||||
'The 3rd of the current chord at every change is the whole game; hit the ♭7 of the I in bar 4 to announce the IV. The blues curl — a quarter-step bend of the ♭3 toward the major 3 — is the signature ornament.',
|
||||
licks: [
|
||||
{
|
||||
over: 'blues-12bar',
|
||||
description: 'Classic descending turnaround in E (Robert Johnson "Kind Hearted Woman" lineage): ♭7–6–♭6–5 under a high-E pedal, swung triplets, resolving to B7.',
|
||||
tab: 'e|--0---0---0---0--------2--\nB|--3---2---1---0--------0--\nG|-----------------------2--\nD|-----------------------1--\nA|-----------------------2--\nE|--------------------------\n D C# C B → B7',
|
||||
source: 'GuitarPlayer "Blues Turnarounds Pt 1"; Fundamental Changes "Blues Turnarounds for Guitar"',
|
||||
},
|
||||
{
|
||||
over: 'blues-12bar',
|
||||
description: 'B.B. King box lick in C: major-pentatonic box around frets 8–10 with the signature 2→3 whole-step bend (D bent to E, the 3rd of C7).',
|
||||
tab: 'e|--8--10b12--10--8---------------\nB|------------------10--8---------\nG|------------------------9-------\n C D→E D C A G E',
|
||||
source: 'GuitarPlayer "12 Killer Blues Licks"; Guitar World (B.B. box, R-2-4-5-6)',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'blues',
|
||||
label: 'Blues',
|
||||
feel: 'shuffle',
|
||||
tempoRange: [60, 180],
|
||||
character: 'Dominant 7ths on every chord, swung eighths or 12/8 triplets, and the ♭3-against-3 tension that makes it talk — form is sacred, everything else is conversation.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'blues-12bar',
|
||||
name: 'Standard 12-bar',
|
||||
rn: ['I7', 'I7', 'I7', 'I7', 'IV7', 'IV7', 'I7', 'I7', 'V7', 'IV7', 'I7', 'V7'],
|
||||
degrees: [0, 0, 0, 0, 5, 5, 0, 0, 7, 5, 0, 7],
|
||||
qualities: ['dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Sweet Home Chicago', 'Pride and Joy — Stevie Ray Vaughan', 'Johnny B. Goode — Chuck Berry'],
|
||||
tip: 'Bar 12 is the V7 launching the next chorus — never let it resolve flat. The form is a wheel, and bar 12 is where you push it.',
|
||||
},
|
||||
{
|
||||
id: 'blues-quickchange',
|
||||
name: 'Quick-change 12-bar',
|
||||
rn: ['I7', 'IV7', 'I7', 'I7', 'IV7', 'IV7', 'I7', 'I7', 'V7', 'IV7', 'I7', 'V7'],
|
||||
degrees: [0, 5, 0, 0, 5, 5, 0, 0, 7, 5, 0, 7],
|
||||
qualities: ['dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Dust My Broom — Elmore James', 'Hide Away — Freddie King', 'Crossroads — Cream'],
|
||||
tip: 'One bar of IV in bar 2, then home. Listen for it in the first seconds of a jam — guessing wrong here is the most common train wreck in blues.',
|
||||
},
|
||||
{
|
||||
id: 'blues-8bar',
|
||||
name: '8-bar blues',
|
||||
rn: ['I7', 'V7', 'IV7', 'IV7', 'I7', 'V7', 'I7', 'V7'],
|
||||
degrees: [0, 7, 5, 5, 0, 7, 0, 7],
|
||||
qualities: ['dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Key to the Highway — Big Bill Broonzy', 'It Hurts Me Too — Elmore James'],
|
||||
tip: 'The V arrives in bar 2 — much sooner than a 12-bar. Count the form out loud the first chorus; 8-bar tunes wrong-foot 12-bar reflexes.',
|
||||
},
|
||||
{
|
||||
id: 'blues-minor',
|
||||
name: 'Minor blues',
|
||||
rn: ['i7', 'i7', 'i7', 'i7', 'iv7', 'iv7', 'i7', 'i7', '♭VI7', 'V7', 'i7', 'i7'],
|
||||
degrees: [0, 0, 0, 0, 5, 5, 0, 0, 8, 7, 0, 0],
|
||||
qualities: ['min7', 'min7', 'min7', 'min7', 'min7', 'min7', 'min7', 'min7', 'dom7', 'dom7', 'min7', 'min7'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'minor',
|
||||
songs: ['The Thrill Is Gone — B.B. King', 'As the Years Go Passing By — Albert King'],
|
||||
tip: 'Bars 9–10 are the whole drama: ♭VI sliding down a half-step to V7. (B.B.\'s recording makes the ♭VI a maj7 — try both colours.)',
|
||||
},
|
||||
{
|
||||
id: 'blues-turnaround',
|
||||
name: 'Turnaround cycle (I–VI–ii–V)',
|
||||
rn: ['I7', 'VI7', 'ii7', 'V7'],
|
||||
degrees: [0, 9, 2, 7],
|
||||
qualities: ['dom7', 'dom7', 'min7', 'dom7'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Call It Stormy Monday — T-Bone Walker (intro)', 'jazz-blues bars 11–12 everywhere'],
|
||||
tip: 'The jazz handshake inside the blues — often squeezed into two bars (two beats per chord). Loop it as a vamp and you\'ve learned bars 11–12 of every uptown blues.',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,227 @@
|
||||
// Bossa nova guitar pack. Grips verified by note-spelling against: jazzguitar.be
|
||||
// (Ipanema chords), jenslarsen.nl (bossa patterns, 5 levels), thejazzpianosite.com
|
||||
// (rhythm layers), Nelson Faria "The Brazilian Guitar Book" (canonical grip source),
|
||||
// mdecksmusic.com (Ipanema analysis), jazz-circle.com (Blue Bossa, Black Orpheus).
|
||||
//
|
||||
// Construction: thumb takes the root on string 6 or 5; fingers take 3-4 notes on
|
||||
// D-G-B(-e). Every grip movable. Two plays per progression = the two root-string
|
||||
// sets, because that's how bossa voice-leads: adjacent chords trade root strings
|
||||
// so inner voices move by one fret ("two fingers move, the chord transforms").
|
||||
|
||||
// Root on the low E string (thumb).
|
||||
const M7_6 = { rootStr: 6, offsets: [0, 'x', 0, 0, 0, 'x'], fingers: [1, 0, 2, 3, 4, 0] } // R-♭7-♭3-5
|
||||
const MAJ7_6 = { rootStr: 6, offsets: [0, 'x', 1, 1, 0, 'x'], fingers: [1, 0, 3, 4, 2, 0] } // R-7-3-5
|
||||
const DOM7_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, 0, 'x'], fingers: [1, 0, 2, 3, 4, 0] } // R-♭7-3-5
|
||||
const DOM13_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, 2, 'x'], fingers: [1, 0, 2, 3, 4, 0] } // R-♭7-3-13
|
||||
const DOM7B9_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, 0, 1], fingers: [1, 0, 2, 3, 1, 4] } // R-♭7-3-5-♭9
|
||||
const M7B5_6 = { rootStr: 6, offsets: [0, 'x', 0, 0, -1, 'x'], fingers: [2, 0, 3, 4, 1, 0] } // R-♭7-♭3-♭5
|
||||
const M6_6 = { rootStr: 6, offsets: [0, 'x', -1, 0, 0, 'x'], fingers: [2, 0, 1, 3, 4, 0] } // R-6-♭3-5
|
||||
const DIM7_6 = { rootStr: 6, offsets: [0, 'x', -1, 0, -1, 'x'], fingers: [2, 0, 1, 3, 1, 0] } // R-♭♭7-♭3-♭5
|
||||
const DOM7S11_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, -1, 'x'], fingers: [2, 0, 3, 4, 1, 0] } // R-♭7-3-♯11 (the tritone-sub grip)
|
||||
|
||||
// Root on the A string (thumb).
|
||||
const M7_5 = { rootStr: 5, offsets: ['x', 0, 2, 0, 1, 'x'], fingers: [0, 1, 3, 2, 4, 0] } // R-5-♭7-♭3
|
||||
const M7_5C = { rootStr: 5, offsets: ['x', 0, -2, 0, 1, 'x'], fingers: [0, 2, 1, 3, 4, 0] } // R-♭3-♭7-♭3 compact grab
|
||||
const MAJ9_5 = { rootStr: 5, offsets: ['x', 0, -1, 1, 0, 'x'], fingers: [0, 2, 1, 4, 3, 0] } // R-3-7-9
|
||||
const DOM9_5 = { rootStr: 5, offsets: ['x', 0, -1, 0, 0, 'x'], fingers: [0, 2, 1, 3, 4, 0] } // R-3-♭7-9
|
||||
const DOM7B9_5 = { rootStr: 5, offsets: ['x', 0, -1, 0, -1, 'x'], fingers: [0, 3, 1, 4, 2, 0] } // R-3-♭7-♭9
|
||||
const M7B5_5 = { rootStr: 5, offsets: ['x', 0, 1, 0, 1, 'x'], fingers: [0, 1, 3, 2, 4, 0] } // R-♭5-♭7-♭3
|
||||
const M6_5 = { rootStr: 5, offsets: ['x', 0, -2, -1, -2, 'x'], fingers: [0, 4, 1, 3, 2, 0] } // R-♭3-6-R
|
||||
const DIM7_5 = { rootStr: 5, offsets: ['x', 0, 1, -1, 1, 'x'], fingers: [0, 2, 3, 1, 4, 0] } // R-♭5-♭♭7-♭3
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'The bossa guitarist is the whole rhythm section: thumb plays the surdo drum (root on 1, fifth on 3, never syncopated), fingers play the chord block on the anticipations. Quiet is louder — the genre was invented at apartment volume, and intensity comes from rhythmic placement and harmonic colour, never from strumming harder.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: 'Thumb bass (the surdo)',
|
||||
rhythm: 'B . . . B . . . — root on 1, fifth on 3',
|
||||
description: 'Metronomic, soft, every bar, under everything. The one layer that is never syncopated. With a bassist: drop it entirely and play only the upper notes.',
|
||||
},
|
||||
{
|
||||
label: 'One-bar starter pattern',
|
||||
rhythm: 'X . . X . . X . — hits on 1, and-of-2, 4',
|
||||
description: 'The training-wheels comp: chord block on 1, the and-of-2, and 4 over the steady thumb. Master this before the two-bar pattern.',
|
||||
},
|
||||
{
|
||||
label: 'Two-bar João Gilberto pattern',
|
||||
rhythm: 'X . . X . . . X~ | . . . X . . X . — the 4& ties over the barline',
|
||||
description: 'Bar 2 has no downbeat chord — the tied and-of-4 carries across. The anticipation is the hardest and most essential bossa skill. Gilberto drifted between patterns freely; treat it as a motif, not a loop.',
|
||||
},
|
||||
{
|
||||
label: 'Partido alto (the samba cousin — for contrast)',
|
||||
rhythm: '. X . X X . . X — lands HARD on beat 3',
|
||||
description: 'Percussive, chopped, with muted ghost-strums — the opposite aesthetic. Bossa never accents beat 3: that beat belongs to the bass register (the surdo). Hammering it squares the lilt into a polka.',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'bossa-ipanema': [
|
||||
{
|
||||
label: 'Low-E roots (the João position)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ7_6, note: 'Imaj7' },
|
||||
{ shape: DOM13_6, extensions: ['13'], note: 'II7(13) — the Lydian ♭7 colour' },
|
||||
{ shape: M7_6, note: 'ii7' },
|
||||
{ shape: DOM7S11_6, extensions: ['#11'], note: '♭II7(♯11) — tritone sub of V' },
|
||||
{ shape: MAJ7_6, note: 'home' },
|
||||
{ shape: DOM7S11_6, extensions: ['#11'], note: 'and the ♭II7 again — Jobim never quite lets go' },
|
||||
],
|
||||
tips: 'The whole A-section lives in a four-fret window: each change moves the thumb a fret or two and one or two fingers inside the grip. If a finger jumps more than two frets, you took a wrong turn.',
|
||||
},
|
||||
{
|
||||
label: 'A-string roots, colour-tone set',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: 'Imaj9' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: 'II9' },
|
||||
{ shape: M7_5, note: 'ii7' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: '♭II9' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: '' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: '' },
|
||||
],
|
||||
tips: 'Same progression, one string set higher and sweeter — 9ths everywhere. Use this set when another guitarist or pianist already owns the low-E register. (If the band plays a plain major tonic, the 6/9 grab — drop the 7th for the 6 — is the classic bossa colour.)',
|
||||
},
|
||||
],
|
||||
|
||||
'bossa-minor-251': [
|
||||
{
|
||||
label: 'Low-E roots with the ♭9',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M7_6, note: 'i7' },
|
||||
{ shape: M7B5_6, note: 'iiø7 — the ♭5 on the B string is the saudade note' },
|
||||
{ shape: DOM7B9_6, extensions: ['b9'], note: 'V7♭9 — the ♭5 you just played, reinterpreted' },
|
||||
{ shape: M6_6, note: 'i6 — resolve to the sixth, not the seventh' },
|
||||
],
|
||||
tips: 'One pitch threads the middle of the progression: the iiø7\'s ♭5 IS the V7\'s ♭9. Find it, hold it, let the thumb do the moving.',
|
||||
},
|
||||
{
|
||||
label: 'A-string roots, compact grabs',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M7_5C, note: 'compact i7 — no 5th, pure bossa economy' },
|
||||
{ shape: M7B5_5, note: 'iiø7' },
|
||||
{ shape: DOM7B9_5, extensions: ['b9'], note: 'V7♭9' },
|
||||
{ shape: M6_5, note: 'i6' },
|
||||
],
|
||||
tips: 'Black Orpheus oscillates between this cell and the relative major\'s ii–V–I — learn both as one hand pattern and the whole tune is two moves.',
|
||||
},
|
||||
],
|
||||
|
||||
'bossa-blue': [
|
||||
{
|
||||
label: 'Thumb-bass through the form',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M7_6, note: 'i7' }, { shape: M7_6, note: '' },
|
||||
{ shape: M7_5, note: 'iv7 — A-string root, same fret region' }, { shape: M7_5, note: '' },
|
||||
{ shape: M7B5_5, note: 'iiø7' },
|
||||
{ shape: DOM7B9_6, extensions: ['b9'], note: 'V7♭9' },
|
||||
{ shape: M7_6, note: '' }, { shape: M7_6, note: '' },
|
||||
{ shape: M7_6, note: '♭iii7 — the excursion begins' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: '♭VI9' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: '♭IImaj9 — a major-key vacation' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: '' },
|
||||
{ shape: M7B5_5, note: 'iiø7 — back to reality' },
|
||||
{ shape: DOM7B9_6, extensions: ['b9'], note: 'V7♭9' },
|
||||
{ shape: M7_6, note: '' }, { shape: M7_6, note: '' },
|
||||
],
|
||||
tips: 'i and iv sit on adjacent root strings in one position, like a blues. The bars 9–12 excursion is a normal major ii–V–I — play it sweeter, then darken again for the iiø7.',
|
||||
},
|
||||
{
|
||||
label: 'Colour set (9ths and the 6/9 cadence)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M7_5C, note: '' }, { shape: M7_5C, note: '' },
|
||||
{ shape: M7_6, note: 'iv7 low' }, { shape: M7_6, note: '' },
|
||||
{ shape: M7B5_6, note: '' },
|
||||
{ shape: DOM7B9_5, extensions: ['b9'], note: '' },
|
||||
{ shape: M7_5C, note: '' }, { shape: M7_5C, note: '' },
|
||||
{ shape: M7_5C, note: '' },
|
||||
{ shape: DOM13_6, extensions: ['13'], note: '♭VI13' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: '♭IImaj9' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: '' },
|
||||
{ shape: M7B5_6, note: '' },
|
||||
{ shape: DOM7B9_5, extensions: ['b9'], note: '' },
|
||||
{ shape: M7_5C, note: '' }, { shape: M7_5C, note: '' },
|
||||
],
|
||||
tips: 'Blue Bossa\'s tonic is a true m7 — save the m6 colour for tunes that ask for it (see the minor ii–V–i cell). Keep all of it at whisper volume.',
|
||||
},
|
||||
],
|
||||
|
||||
'bossa-one-note': [
|
||||
{
|
||||
label: 'Two grips falling by half-steps (A-string roots)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M7_5, note: 'iii7' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: '♭III9 — same fret region, one finger reshapes' },
|
||||
{ shape: M7_5, note: 'ii7 — whole grip slides down' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: '♭II9' },
|
||||
],
|
||||
tips: 'The entire progression is two grips alternating while the thumb walks down chromatically. Hold one melody note on top if you can reach it — that\'s the whole point of the tune.',
|
||||
},
|
||||
{
|
||||
label: 'Low-E roots with 13s',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M7_6, note: '' },
|
||||
{ shape: DOM13_6, extensions: ['13'], note: '♭III13' },
|
||||
{ shape: M7_6, note: '' },
|
||||
{ shape: DOM13_6, extensions: ['13'], note: '♭II13' },
|
||||
],
|
||||
tips: 'The 13 on top of each dominant descends in parallel with the bass — two chromatic lines moving in lockstep, which is why this progression sounds inevitable.',
|
||||
},
|
||||
],
|
||||
|
||||
'bossa-corcovado': [
|
||||
{
|
||||
label: 'Chromatic staircase, low-E roots',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M6_6, note: 'iii6' },
|
||||
{ shape: DIM7_6, note: 'passing °7 — one fret down' },
|
||||
{ shape: M7_6, note: 'ii7 — one more' },
|
||||
{ shape: DOM7S11_6, extensions: ['#11'], note: '♭II7(♯11) — tritone sub' },
|
||||
{ shape: MAJ7_6, note: 'Imaj7 — arrival' },
|
||||
],
|
||||
tips: 'The low E string walks down one fret per bar — let that bassline sing through the grips. This is the same passing-diminished device as How Insensitive; learn it once, hear it everywhere in Jobim.',
|
||||
},
|
||||
{
|
||||
label: 'A-string set with the 6/9 landing',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M6_5, note: 'iii6' },
|
||||
{ shape: DIM7_5, note: '°7' },
|
||||
{ shape: M7_5C, note: 'ii7' },
|
||||
{ shape: DOM7B9_5, extensions: ['b9'], note: '♭II7(♭9)' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: 'Imaj9 — arrival' },
|
||||
],
|
||||
tips: 'When the singer holds the tonic, swap the maj9 for a 6/9 grab (7th down to the 6) — no leading tone to fight them. Over a detected maj7, stay with the maj9.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'ii7 / i7 / iv7', scale: 'dorian', why: 'All the minor 7ths take Dorian — bossa is jazz harmony in a swimsuit.' },
|
||||
{ over: 'V7 → major I', scale: 'mixolydian', why: 'Plain Mixolydian when resolving to major; add the 13 — it\'s the genre\'s favourite colour.' },
|
||||
{ over: 'II7 / ♭II7 (tritone subs)', scale: 'lydian', why: 'Lydian dominant (melodic minor from the 5th) — the ♯11 is already in the chord grip.' },
|
||||
{ over: 'V7♭9 → minor i', scale: 'phrygian', why: 'Phrygian dominant (harmonic minor from the V) for the ♭9; the altered scale if you want more trouble.' },
|
||||
{ over: 'iiø7', scale: 'locrian', why: 'Locrian, or raise the 2 (melodic-minor mode 6) for a smoother colour.' },
|
||||
],
|
||||
targetNotes:
|
||||
'Bossa solos are melody-first: hold or repeat a small cell and let the CHORDS recontextualise it — One Note Samba is the method stated as a song title. Target the colour tones (9, 13, ♯11) and the 3rd/7th guide-tone line; avoid sitting on roots. Phrase behind the beat and leave bar-length gaps.',
|
||||
licks: [
|
||||
{
|
||||
over: 'bossa-ipanema',
|
||||
description: 'The Ipanema opening cell: the melody sits on the 9th and major 7th of the Imaj7 — never the root. The identical two notes work over the II7 bars, where they become root and 13.',
|
||||
tab: 'e|--3--------------3-----------\nB|------5--5--3--------5--5----\n G E E D G E E\n (9) (7)(7)(6) (9) (7)(7) over Fmaj7',
|
||||
source: '"Garota de Ipanema" — Jobim/de Moraes (Real Book lead sheet; mDecks harmonic analysis)',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'bossa',
|
||||
label: 'Bossa Nova',
|
||||
feel: 'bossa',
|
||||
tempoRange: [110, 160],
|
||||
character: 'A whole samba band condensed into one quiet guitar: metronomic thumb bass, syncopated chord block that never accents beat 3, and jazz harmony at conversation volume.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'bossa-ipanema',
|
||||
name: 'Ipanema A-section (Imaj7–II7–ii7–♭II7)',
|
||||
rn: ['Imaj7', 'II7', 'ii7', '♭II7', 'Imaj7', '♭II7'],
|
||||
degrees: [0, 2, 2, 1, 0, 1],
|
||||
qualities: ['maj7', 'dom7', 'min7', 'dom7', 'maj7', 'dom7'],
|
||||
bars: [2, 2, 1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['The Girl from Ipanema — Jobim', 'Desafinado (same II7 colour)'],
|
||||
tip: 'The II7 is a true dominant-II (Lydian ♭7 colour), and the ♭II7 is the tritone sub of V — the bass slides home by half-step instead of jumping a fifth.',
|
||||
},
|
||||
{
|
||||
id: 'bossa-minor-251',
|
||||
name: 'Minor ii–V–i (Black Orpheus)',
|
||||
rn: ['i7', 'iiø7', 'V7♭9', 'i6'],
|
||||
degrees: [0, 2, 7, 0],
|
||||
qualities: ['min7', 'half_dim', 'dom7', 'min6'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'minor',
|
||||
songs: ['Manhã de Carnaval (Black Orpheus) — Luiz Bonfá', 'How Insensitive — Jobim (same engine)'],
|
||||
tip: 'The bossa minor tonic is the m6, not the m7 — that major sixth is the saudade. The ♭5 of the iiø7 returns as the ♭9 of the V7.',
|
||||
},
|
||||
{
|
||||
id: 'bossa-blue',
|
||||
name: 'Blue Bossa (16-bar form)',
|
||||
rn: ['i7', 'i7', 'iv7', 'iv7', 'iiø7', 'V7', 'i7', 'i7', '♭iii7', '♭VI7', '♭IImaj7', '♭IImaj7', 'iiø7', 'V7', 'i7', 'i7'],
|
||||
degrees: [0, 0, 5, 5, 2, 7, 0, 0, 3, 8, 1, 1, 2, 7, 0, 0],
|
||||
qualities: ['min7', 'min7', 'min7', 'min7', 'half_dim', 'dom7', 'min7', 'min7', 'min7', 'dom7', 'maj7', 'maj7', 'half_dim', 'dom7', 'min7', 'min7'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'minor',
|
||||
songs: ['Blue Bossa — Kenny Dorham'],
|
||||
tip: 'i–iv–iiø–V in minor, then a complete ii–V–I excursion a half-step up (♭II major) in bars 9–12. The jam-session bossa: everyone knows it, nobody minds another chorus.',
|
||||
},
|
||||
{
|
||||
id: 'bossa-one-note',
|
||||
name: 'Chromatic ii–V chain (One Note Samba)',
|
||||
rn: ['iii7', '♭III7', 'ii7', '♭II7'],
|
||||
degrees: [4, 3, 2, 1],
|
||||
qualities: ['min7', 'dom7', 'min7', 'dom7'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['One Note Samba — Jobim'],
|
||||
tip: 'iii–VI–ii–V with both dominants tritone-subbed: the bass walks straight down by half-steps while one melody note holds on top. Two grips, alternating, falling.',
|
||||
},
|
||||
{
|
||||
id: 'bossa-corcovado',
|
||||
name: 'Corcovado descent',
|
||||
rn: ['iii6', '♭iii°7', 'ii7', '♭II7', 'Imaj7'],
|
||||
degrees: [4, 3, 2, 1, 0],
|
||||
qualities: ['min6', 'dim7', 'min7', 'dom7', 'maj7'],
|
||||
bars: [1, 1, 1, 1, 2],
|
||||
mode: 'major',
|
||||
songs: ['Corcovado (Quiet Nights) — Jobim', 'How Insensitive — Jobim (same passing-dim device)'],
|
||||
tip: 'A chromatic staircase into the I: m6 → passing diminished → ii → tritone sub. (Charts vary on bar 2 — some write a II7(13) instead of the ♭iii°7; both are in circulation.)',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,230 @@
|
||||
// Country/folk guitar pack. Shapes verified by note-spelling against:
|
||||
// acousticguitar.com (boom-chuck, bass runs, Travis picking), fretjam.com
|
||||
// (alternate bass map), hvbluegrass.org (the Lester Flatt G-run), premierguitar.com
|
||||
// (double-stops), wernickmethod.org & drbanjo.com (jam etiquette), andyguitar.co.uk
|
||||
// (train beat), untidymusic.com (anchor-finger folk chords).
|
||||
|
||||
// Open shapes — the genre's home. Render only when the chord root matches.
|
||||
const OPEN_G_FOLK = { onlyRoot: 7, frets: [3, 2, 0, 0, 3, 3], fingers: [2, 1, 0, 0, 3, 4] } // big ringing folk G
|
||||
const OPEN_C = { onlyRoot: 0, frets: ['x', 3, 2, 0, 1, 0], fingers: [0, 3, 2, 0, 1, 0] }
|
||||
const OPEN_CADD9 = { onlyRoot: 0, frets: ['x', 3, 2, 0, 3, 3], fingers: [0, 2, 1, 0, 3, 4] }
|
||||
const OPEN_D = { onlyRoot: 2, frets: ['x', 'x', 0, 2, 3, 2], fingers: [0, 0, 0, 1, 3, 2] }
|
||||
const OPEN_D7 = { onlyRoot: 2, frets: ['x', 'x', 0, 2, 1, 2], fingers: [0, 0, 0, 2, 1, 3] }
|
||||
const OPEN_A7 = { onlyRoot: 9, frets: ['x', 0, 2, 0, 2, 0], fingers: [0, 0, 1, 0, 2, 0] }
|
||||
const OPEN_G7 = { onlyRoot: 7, frets: [3, 2, 0, 0, 0, 1], fingers: [3, 2, 0, 0, 0, 1] }
|
||||
const OPEN_E = { onlyRoot: 4, frets: [0, 2, 2, 1, 0, 0], fingers: [0, 2, 3, 1, 0, 0] }
|
||||
const OPEN_EM7 = { onlyRoot: 4, frets: [0, 2, 2, 0, 3, 3], fingers: [0, 1, 2, 0, 3, 4] }
|
||||
const OPEN_AM = { onlyRoot: 9, frets: ['x', 0, 2, 2, 1, 0], fingers: [0, 0, 2, 3, 1, 0] }
|
||||
const OPEN_F = { onlyRoot: 5, frets: ['x', 'x', 3, 2, 1, 1], fingers: [0, 0, 3, 2, 1, 1] }
|
||||
|
||||
// Movable barres — for when the capo can't save you.
|
||||
const BARRE_MAJ_6 = { rootStr: 6, offsets: [0, 2, 2, 1, 0, 0], fingers: [1, 3, 4, 2, 1, 1] }
|
||||
const BARRE_MAJ_5 = { rootStr: 5, offsets: ['x', 0, 2, 2, 2, 0], fingers: [0, 1, 2, 3, 4, 1] }
|
||||
const BARRE_MIN_6 = { rootStr: 6, offsets: [0, 2, 2, 0, 0, 0], fingers: [1, 3, 4, 1, 1, 1] }
|
||||
const BARRE_DOM7_6 = { rootStr: 6, offsets: [0, 2, 0, 1, 0, 0], fingers: [1, 3, 1, 2, 1, 1] }
|
||||
const BARRE_DOM7_5 = { rootStr: 5, offsets: ['x', 0, 2, 0, 2, 0], fingers: [0, 1, 3, 1, 4, 1] }
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'In a folk circle you accompany the singer; in a bluegrass jam you ARE the drums — bass notes on 1 and 3 (kick), crisp strums on 2 and 4 (snare), bass runs announcing every change, and the capo moving your open shapes to whatever key the singer holds up fingers for.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: 'Boom-chick (alternating bass)',
|
||||
rhythm: 'B . X . B . X . — root bass, strum, 5th bass, strum',
|
||||
description: 'The engine: picked bass note (root on 1, fifth on 3 — each open chord has its alternation map), down-strum chick between. Add an up-strum after each chick for "boom chick-a".',
|
||||
},
|
||||
{
|
||||
label: 'Carter bass runs',
|
||||
rhythm: 'runs replace beats 3–4 before a change',
|
||||
description: 'G→C: walk G–A–B into the C. C→G: walk back down. G→D: G–A–B–C♯. The run tells the whole circle the change is coming — in bluegrass it\'s practically mandatory.',
|
||||
},
|
||||
{
|
||||
label: 'Travis picking',
|
||||
rhythm: 'thumb: steady quarters on alternating bass; fingers: syncopated treble',
|
||||
description: 'Thumb never stops (the §boom-chick map), index/middle pick G and B strings between, pinch on beat 1. Freight Train is the curriculum.',
|
||||
},
|
||||
{
|
||||
label: 'Train beat (Cash)',
|
||||
rhythm: 'D D U D U D U with accents on 2 & 4, half-muted',
|
||||
description: 'Strings damped just enough to fake a snare; keep the boom note clean, mute only the chicks. Folsom Prison at any tempo.',
|
||||
},
|
||||
{
|
||||
label: 'Waltz boom-chick-chick',
|
||||
rhythm: '3/4: B X X — bass, strum, strum',
|
||||
description: 'Bass note on 1, two strums after, alternating root/5th by bar. Tennessee Waltz, Amazing Grace — every jam has them.',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'country-145': [
|
||||
{
|
||||
label: 'Open G-family, boom-chick',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: OPEN_G_FOLK, note: 'I — bass alternates low-E G / open-D D' },
|
||||
{ shape: OPEN_G_FOLK, note: '' },
|
||||
{ shape: OPEN_C, extensions: [], note: 'IV — bass: A-string C / low-E G' },
|
||||
{ shape: OPEN_G_FOLK, note: 'walk back down C–B–A–G' },
|
||||
{ shape: OPEN_G_FOLK, note: '' },
|
||||
{ shape: OPEN_G_FOLK, note: '' },
|
||||
{ shape: OPEN_D7, note: 'V7 — bass: open D / open A' },
|
||||
{ shape: OPEN_G_FOLK, note: 'home, G-run on the phrase end' },
|
||||
],
|
||||
tips: 'This is the key-of-G home position; for the singer\'s key, move the capo, not the shapes (A = capo 2, B♭ = capo 3, B = capo 4 — the G-run survives the capo, a barre kills it).',
|
||||
},
|
||||
{
|
||||
label: 'Barre shapes (capo-proof)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: BARRE_MAJ_6, note: 'I' },
|
||||
{ shape: BARRE_MAJ_6, note: '' },
|
||||
{ shape: BARRE_MAJ_5, note: 'IV — same fret, next string' },
|
||||
{ shape: BARRE_MAJ_6, note: '' },
|
||||
{ shape: BARRE_MAJ_6, note: '' },
|
||||
{ shape: BARRE_MAJ_6, note: '' },
|
||||
{ shape: BARRE_DOM7_5, note: 'V7 — two frets up from the IV' },
|
||||
{ shape: BARRE_MAJ_6, note: '' },
|
||||
],
|
||||
tips: 'For keys where no capo position gives you open strings. You lose the ringing folk voice — keep the alternating-bass right hand so you don\'t lose the genre.',
|
||||
},
|
||||
],
|
||||
|
||||
'country-folk-axis': [
|
||||
{
|
||||
label: 'Anchor-finger folk set',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: OPEN_G_FOLK, note: 'I — ring+pinky stay planted on the top two strings' },
|
||||
{ shape: OPEN_D, note: 'V' },
|
||||
{ shape: OPEN_EM7, extensions: ['b7'], note: 'vi as Em7 — two fingers move, anchors hold' },
|
||||
{ shape: OPEN_CADD9, extensions: ['9'], note: 'IV as Cadd9 — same anchors again' },
|
||||
{ shape: OPEN_G_FOLK, note: '' },
|
||||
{ shape: OPEN_D, note: '' },
|
||||
{ shape: OPEN_CADD9, extensions: ['9'], note: '' },
|
||||
{ shape: OPEN_CADD9, extensions: ['9'], note: 'two bars of IV — let it ring' },
|
||||
],
|
||||
tips: 'The modern-folk G-family sound: the top two strings drone through every chord while two fingers do the changes. Wagon Wheel is capo 2 with exactly these grips.',
|
||||
},
|
||||
{
|
||||
label: 'Barre version',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: BARRE_MAJ_6, note: 'I' },
|
||||
{ shape: BARRE_MAJ_5, note: 'V' },
|
||||
{ shape: BARRE_MIN_6, note: 'vi' },
|
||||
{ shape: BARRE_MAJ_5, note: 'IV' },
|
||||
{ shape: BARRE_MAJ_6, note: '' },
|
||||
{ shape: BARRE_MAJ_5, note: '' },
|
||||
{ shape: BARRE_MAJ_5, note: '' },
|
||||
{ shape: BARRE_MAJ_5, note: '' },
|
||||
],
|
||||
tips: 'When the song lands in a capo-hostile key. Lighten the left hand between strums — folk barres should breathe, not sustain like rock.',
|
||||
},
|
||||
],
|
||||
|
||||
'country-ragtime': [
|
||||
{
|
||||
label: 'Open C-family (Alice\'s Restaurant grips)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: OPEN_C, note: 'I' },
|
||||
{ shape: OPEN_A7, note: 'VI7 — the ragtime surprise' },
|
||||
{ shape: OPEN_D7, note: 'II7' },
|
||||
{ shape: OPEN_G7, note: 'V7 — and the sled arrives home' },
|
||||
],
|
||||
tips: 'Each dominant pulls into the next — lean on the bass notes (C→A→D→G is itself a circle of fifths) and the progression plays itself. Capo 2 = the Alice\'s Restaurant recording.',
|
||||
},
|
||||
{
|
||||
label: 'Barre circle',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: BARRE_MAJ_6, note: 'I' },
|
||||
{ shape: BARRE_DOM7_5, note: 'VI7' },
|
||||
{ shape: BARRE_DOM7_6, note: 'II7' },
|
||||
{ shape: BARRE_DOM7_5, note: 'V7' },
|
||||
],
|
||||
tips: 'Roots alternate 6th and 5th strings around the circle, so the hand barely travels. Swing the strums — this family is ragtime\'s grandchild.',
|
||||
},
|
||||
],
|
||||
|
||||
'country-rising-sun': [
|
||||
{
|
||||
label: 'The Animals grips (6/8 arpeggios)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: OPEN_AM, note: 'i — arpeggiate low to high, one sweep per bar' },
|
||||
{ shape: OPEN_C, note: 'III' },
|
||||
{ shape: OPEN_D, note: 'IV — the borrowed Dorian colour' },
|
||||
{ shape: OPEN_F, note: 'VI' },
|
||||
{ shape: OPEN_AM, note: '' },
|
||||
{ shape: OPEN_E, note: 'V — the harmonic-minor pull home' },
|
||||
],
|
||||
tips: 'Six chords, one arpeggio pattern: bass note then climb the strings in 6/8. The D major is the chord that makes it haunting — don\'t flatten it to Dm.',
|
||||
},
|
||||
{
|
||||
label: 'Barre version',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: BARRE_MIN_6, note: 'i' },
|
||||
{ shape: BARRE_MAJ_6, note: 'III' },
|
||||
{ shape: BARRE_MAJ_5, note: 'IV' },
|
||||
{ shape: BARRE_MAJ_6, note: 'VI' },
|
||||
{ shape: BARRE_MIN_6, note: '' },
|
||||
{ shape: BARRE_MAJ_6, note: 'V' },
|
||||
],
|
||||
tips: 'Keeps the climb available in any key — arpeggiate the barres rather than strumming them or the 6/8 lilt disappears.',
|
||||
},
|
||||
],
|
||||
|
||||
'country-bluegrass-cycle': [
|
||||
{
|
||||
label: 'G shapes, jam-circle standard',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: OPEN_G_FOLK, note: 'I' },
|
||||
{ shape: OPEN_C, note: 'IV — walk up G–A–B into it' },
|
||||
{ shape: OPEN_G_FOLK, note: 'walk back down' },
|
||||
{ shape: OPEN_D, note: 'V — chromatic walk G–A–B–C♯ if you\'re feeling it' },
|
||||
],
|
||||
tips: 'Bluegrass keys are called in fiddle terms: A = capo 2, B = capo 4, all G shapes. Bass on 1 & 3 locks with the upright; your 2 & 4 strums ARE the snare — there is no drummer.',
|
||||
},
|
||||
{
|
||||
label: 'C shapes (for keys C, D via capo)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: OPEN_C, note: 'I' },
|
||||
{ shape: OPEN_F, note: 'IV — small F, top four strings' },
|
||||
{ shape: OPEN_C, note: '' },
|
||||
{ shape: OPEN_G7, extensions: ['b7'], note: 'V played as V7 — the bluegrass default' },
|
||||
],
|
||||
tips: 'The C family gives different bass runs (C–D–E into F) — worth owning both families so the capo choice is about the singer, not your habits.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'I / major vamps', scale: 'major', why: 'Major pentatonic is the country default — the Don Rich/Buck Owens sweetness.' },
|
||||
{ over: 'I with attitude', scale: 'mixolydian', why: 'The "country composite": major pentatonic + the ♭3 blue note, always resolved up to the major 3rd.' },
|
||||
{ over: 'i (minor folk)', scale: 'minor', why: 'Natural minor with the harmonic-minor leading tone saved for when the V chord arrives.' },
|
||||
{ over: 'V7 / II7 (ragtime circle)', scale: 'mixolydian', why: 'Each dominant gets its own Mixolydian; target the 3rd of each as the circle turns.' },
|
||||
],
|
||||
targetNotes:
|
||||
'Country fills are double-stops: 3rds on the G+B pair, 6ths on G+e (hybrid-picked for the snap), slid or hammered into chord tones on the beat. End phrases with the G-run — it is the genre\'s punctuation mark.',
|
||||
licks: [
|
||||
{
|
||||
over: 'country-bluegrass-cycle',
|
||||
description: 'THE G-run (Lester Flatt): the canonical bluegrass phrase-ending tag — hammer through the blue note and land on the open G chord on the downbeat.',
|
||||
tab: 'e|----------------------------3--\nB|----------------------------0--\nG|---------------------0------0--\nD|---------------0--2---------0--\nA|--0--h1--2------------------2--\nE|----------------------------3--\n A A# B D E G (G chord on 1)',
|
||||
source: 'hvbluegrass.org "The Truth About the Lester Flatt G Run"; artistworks.com essential bluegrass licks',
|
||||
},
|
||||
{
|
||||
over: 'country-bluegrass-cycle',
|
||||
description: 'The original two-note Flatt run for flying tempos: E up to G at the phrase end — "an exclamation point at the end of a paragraph."',
|
||||
tab: 'G|--------0-- (open G)\nD|--2-------- (E)',
|
||||
source: 'hvbluegrass.org / nativeground.com (Flatt & Scruggs history)',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'country',
|
||||
label: 'Country / Folk',
|
||||
feel: 'boom-chick',
|
||||
tempoRange: [80, 160],
|
||||
character: 'Open strings, alternating bass, and the capo as a transposition machine: the guitar is the band\'s kick drum and snare, and every chord change gets announced by a bass run.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'country-145',
|
||||
name: 'Country I–IV–V (8-bar form)',
|
||||
rn: ['I', 'I', 'IV', 'I', 'I', 'I', 'V7', 'I'],
|
||||
degrees: [0, 0, 5, 0, 0, 0, 7, 0],
|
||||
qualities: ['maj', 'maj', 'maj', 'maj', 'maj', 'maj', 'dom7', 'maj'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Will the Circle Be Unbroken', 'Ring of Fire — Johnny Cash'],
|
||||
tip: 'The placement is the convention: IV arrives mid-phrase, V7 on the last line pulling home. Learn where the changes BREATHE, not just what they are.',
|
||||
},
|
||||
{
|
||||
id: 'country-folk-axis',
|
||||
name: 'Folk axis (Wagon Wheel loop)',
|
||||
rn: ['I', 'V', 'vi', 'IV', 'I', 'V', 'IV', 'IV'],
|
||||
degrees: [0, 7, 9, 5, 0, 7, 5, 5],
|
||||
qualities: ['maj', 'maj', 'min', 'maj', 'maj', 'maj', 'maj', 'maj'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Wagon Wheel — Old Crow Medicine Show (G shapes, capo 2)'],
|
||||
tip: 'The pop axis loop in folk clothes — note the second half lands on IV–IV instead of vi–IV. Capo 2 with G shapes is the canonical version.',
|
||||
},
|
||||
{
|
||||
id: 'country-ragtime',
|
||||
name: 'Ragtime circle (I–VI7–II7–V7)',
|
||||
rn: ['I', 'VI7', 'II7', 'V7'],
|
||||
degrees: [0, 9, 2, 7],
|
||||
qualities: ['maj', 'dom7', 'dom7', 'dom7'],
|
||||
bars: [2, 2, 2, 2],
|
||||
mode: 'major',
|
||||
songs: ['Salty Dog Blues — Flatt & Scruggs', "Alice's Restaurant — Arlo Guthrie", 'Tennessee Waltz (bridge)'],
|
||||
tip: 'Every chord is the dominant of the next — a circle-of-fifths sled ride home. The truncated I–II7–V–I ("Hey, Good Lookin\'") is the same device minus the VI7.',
|
||||
},
|
||||
{
|
||||
id: 'country-rising-sun',
|
||||
name: 'Rising Sun (6/8 minor climb)',
|
||||
rn: ['i', 'III', 'IV', 'VI', 'i', 'V'],
|
||||
degrees: [0, 3, 5, 8, 0, 7],
|
||||
qualities: ['min', 'maj', 'maj', 'maj', 'min', 'maj'],
|
||||
bars: [1, 1, 1, 1, 1, 1],
|
||||
mode: 'minor',
|
||||
songs: ['House of the Rising Sun — The Animals'],
|
||||
tip: 'Not the Andalusian descent people assume: it CLIMBS, and the major IV is borrowed Dorian colour. 6/8 time, arpeggiated, every chord one sweep of the arm.',
|
||||
},
|
||||
{
|
||||
id: 'country-bluegrass-cycle',
|
||||
name: 'Bluegrass cycle (I–IV–I–V)',
|
||||
rn: ['I', 'IV', 'I', 'V'],
|
||||
degrees: [0, 5, 0, 7],
|
||||
qualities: ['maj', 'maj', 'maj', 'maj'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Nine Pound Hammer — Merle Travis'],
|
||||
tip: 'The jam-circle workhorse: back to I between every excursion. Kick it off with the last line of the chorus, end every phrase with a G-run.',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,188 @@
|
||||
// Funk guitar pack. Shapes verified by note-spelling against: justinguitar.com
|
||||
// (E9 "the funk chord"), fundamental-changes.com (funk chords, JB E9-D9 accents),
|
||||
// yourguitaracademy.com (Sex Machine pattern), musicradar.com (Nile Rodgers grips),
|
||||
// ethanhein.com (Chameleon Dorian analysis), Wikipedia (Jimmy Nolen chicken scratch).
|
||||
|
||||
// 5th-string-root colour chords — the Nolen vocabulary.
|
||||
const NINE = { rootStr: 5, offsets: ['x', 0, -1, 0, 0, 0], fingers: [0, 2, 1, 3, 3, 3] } // R-3-♭7-9-5: THE funk chord
|
||||
const THIRTEEN = { rootStr: 5, offsets: ['x', 0, -1, 0, 0, 2], fingers: [0, 2, 1, 3, 3, 4] } // 9 grip, pinky takes 5→13
|
||||
const NINESUS = { rootStr: 5, offsets: ['x', 0, 0, 0, 0, 0], fingers: [0, 1, 1, 1, 1, 1] } // full barre: R-4-♭7-9-5
|
||||
const HENDRIX = { rootStr: 5, offsets: ['x', 0, -1, 0, 1, 'x'], fingers: [0, 2, 1, 3, 4, 0] } // 7♯9 — ♭3 grit over a dominant
|
||||
const M9 = { rootStr: 5, offsets: ['x', 0, -2, 0, 0, 'x'], fingers: [0, 2, 1, 3, 4, 0] } // R-♭3-♭7-9
|
||||
const MAJ7_5 = { rootStr: 5, offsets: ['x', 0, 2, 1, 2, 'x'], fingers: [0, 1, 3, 2, 4, 0] } // R-5-7-3
|
||||
|
||||
// 6th-string-root grips.
|
||||
const M7_6 = { rootStr: 6, offsets: [0, 'x', 0, 0, 0, 'x'], fingers: [1, 0, 2, 3, 4, 0] } // R-♭7-♭3-5 (the Le Freak Am7)
|
||||
const M11_BARRE = { rootStr: 6, offsets: [0, 0, 0, 0, 0, 0], fingers: [1, 1, 1, 1, 1, 1] } // one-finger m11 (D'Angelo)
|
||||
const THIRTEEN_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, 2, 'x'], fingers: [1, 0, 2, 3, 4, 0] } // R-♭7-3-13
|
||||
|
||||
// Top-4 fragments — above the bass, out of the keys' mid-range.
|
||||
const M7_TOP4 = { rootStr: 1, offsets: ['x', 'x', 0, 0, 0, 0], fingers: [0, 0, 1, 1, 1, 1] } // ♭7-♭3-5-R barre
|
||||
const MAJ7_TOP4 = { rootStr: 1, offsets: ['x', 'x', 1, 1, 0, 0], fingers: [0, 0, 2, 3, 1, 1] } // 7-3-5-R
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'The funk guitarist is a percussionist who happens to know chords: the strumming arm plays constant sixteenths like a hi-hat, and the fret hand decides which of them speak. Play the gaps the bass leaves, keep voicings small and high, and serve The One.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: '16th-note scratch foundation',
|
||||
rhythm: '1e&a 2e&a 3e&a 4e&a — DUDU, never stops',
|
||||
description: 'Mute everything with the fret hand and strum constant sixteenths — pure percussion first. Voiced hits are added by pressing the chord only on chosen slots, releasing pressure immediately after (the choke).',
|
||||
},
|
||||
{
|
||||
label: 'Chicken scratch ("chika")',
|
||||
rhythm: 'muted down-up 16th pairs',
|
||||
description: 'Jimmy Nolen\'s signature: strings pressed just enough for a pitchless scratch, strummed near the bridge. The texture between the hits IS the part.',
|
||||
},
|
||||
{
|
||||
label: 'JB one-bar cell',
|
||||
rhythm: 'C x x x x x x x x x C x x x x x — hits on 1 and the &-of-3',
|
||||
description: 'Chord stab on the One (always the One), a second on the and-of-3, ghosts everywhere else. The school pattern behind a hundred James Brown grooves.',
|
||||
},
|
||||
{
|
||||
label: 'Sex Machine pattern',
|
||||
rhythm: '9 . . . 9 . . . 13 . . . . . . 9',
|
||||
description: 'I9 on beats 1 and 2, I13 on beat 3, an upstroke 9 at the bar\'s tail — the documented Eb9/Eb13 figure. The top note rocking 5↔13 is the hook.',
|
||||
},
|
||||
{
|
||||
label: 'Nile Rodgers selective 16ths',
|
||||
rhythm: 'arm = metronome; the pick chooses string groups',
|
||||
description: 'Down-up sixteenths never stop, whether or not strings are struck. Accents come from catching the bottom of the grip vs the top-3 fragment, plus fret-hand chucks. Built on what he doesn\'t play.',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'funk-one-chord': [
|
||||
{
|
||||
label: 'The Nolen cycle (9 → 13 → 9sus4)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: NINE, extensions: ['9'], note: 'I9 — the funk chord' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: 'pinky stretches 5→13' },
|
||||
{ shape: NINESUS, extensions: ['b7', '9'], note: 'one-finger barre — the lift' },
|
||||
{ shape: NINE, extensions: ['9'], note: 'and home' },
|
||||
],
|
||||
tips: 'Three grips, one fret position, zero chord changes — the whole arrangement is the top two strings breathing. Choke every hit; the scratch between them never stops.',
|
||||
},
|
||||
{
|
||||
label: 'Grit set (7♯9 stabs)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: HENDRIX, extensions: ['#9'], note: 'I7♯9 — major and minor third at once' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: '' },
|
||||
{ shape: NINESUS, extensions: ['b7', '9'], note: '' },
|
||||
{ shape: NINE, extensions: ['9'], note: '' },
|
||||
],
|
||||
tips: 'The ♯9 is the blues clash built into one grip — use it for the stabs you want to hurt, the clean 9 for the ones that groove. Sparser than the Nolen cycle: half the hits, twice the silence.',
|
||||
},
|
||||
],
|
||||
|
||||
'funk-dorian-vamp': [
|
||||
{
|
||||
label: 'Chameleon pair (m9 + 9)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M9, extensions: ['9'], note: 'i9' },
|
||||
{ shape: NINE, extensions: ['9'], note: 'IV9 — same fret region, one string set' },
|
||||
],
|
||||
tips: 'Both grips share the A-string root region — the change is two fingers, not a position. Sixteenth scratch throughout; voice the chords only on the accents the bass leaves open.',
|
||||
},
|
||||
{
|
||||
label: 'D\'Angelo barre (m11 wash)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M11_BARRE, extensions: ['11'], note: 'i11 — one finger, all six strings' },
|
||||
{ shape: THIRTEEN_6, extensions: ['13'], note: 'IV13' },
|
||||
],
|
||||
tips: 'The one-finger m11 is the deepest chord in funk for the least effort — lay it across and let the fret hand bounce for the rhythm. Keep it short; six strings of m11 sustained is soup.',
|
||||
},
|
||||
],
|
||||
|
||||
'funk-25-loop': [
|
||||
{
|
||||
label: 'Le Freak grips',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M7_6, note: 'ii7 — 6th-string root' },
|
||||
{ shape: NINE, extensions: ['9'], note: 'V9 — 5th-string root, same position' },
|
||||
],
|
||||
tips: 'The Chic move: full grip held, pick selecting string groups in constant 16ths. Freak out on the mutes, not the volume.',
|
||||
},
|
||||
{
|
||||
label: 'Smooth set (m9 + 13)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M9, extensions: ['9'], note: 'ii9' },
|
||||
{ shape: THIRTEEN, extensions: ['9', '13'], note: 'V13' },
|
||||
],
|
||||
tips: 'The Stevie Wonder colour: 9ths on both sides of the loop. Push the V13 an eighth early every second bar and the loop starts to roll forward.',
|
||||
},
|
||||
],
|
||||
|
||||
'funk-bvii-move': [
|
||||
{
|
||||
label: 'One grip, whole-step slide',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: NINE, extensions: ['9'], note: 'I9' },
|
||||
{ shape: NINE, extensions: ['9'], note: '♭VII9 — two frets down, same grip' },
|
||||
],
|
||||
tips: 'The E9→D9 figure: the move is the slide itself — keep light finger pressure during the shift so the landing speaks. Snap back up to the I ON the One.',
|
||||
},
|
||||
{
|
||||
label: 'Grit on the I, clean below',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: HENDRIX, extensions: ['#9'], note: 'I7♯9' },
|
||||
{ shape: NINE, extensions: ['9'], note: '♭VII9' },
|
||||
],
|
||||
tips: 'Contrast as arrangement: the ♯9 bites on home, the plain 9 relaxes a whole step down. Save this pairing for the bridge or the last vamp out.',
|
||||
},
|
||||
],
|
||||
|
||||
'funk-smooth-loop': [
|
||||
{
|
||||
label: 'A-string roots (September set)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ7_5, note: 'IVmaj7' },
|
||||
{ shape: M9, extensions: ['9'], note: 'iii9' },
|
||||
{ shape: M9, extensions: ['9'], note: 'ii9 — whole grip down two frets' },
|
||||
{ shape: M9, extensions: ['9'], note: 'back up' },
|
||||
],
|
||||
tips: 'The loop is one m9 grip walking between iii and ii under a stationary maj7 anchor. Clean tone, light palm mute, hits shorter than you think.',
|
||||
},
|
||||
{
|
||||
label: 'Top-4 shimmer (with keys/horns)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ7_TOP4, note: 'IVmaj7 — top four strings only' },
|
||||
{ shape: M7_TOP4, note: 'iii7 — one-finger barre' },
|
||||
{ shape: M7_TOP4, note: 'ii7' },
|
||||
{ shape: M7_TOP4, note: '' },
|
||||
],
|
||||
tips: 'When keys and horns are present this register is yours and nothing below it. The barre fragments slide as one shape — think of it as playing the top of the arrangement, not chords.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'i7–IV7 vamps', scale: 'dorian', why: 'The whole vamp is one Dorian scale — Chameleon\'s entire harmony fits inside it. The natural 6 is the funk note.' },
|
||||
{ over: 'I9 one-chord vamps', scale: 'mixolydian', why: 'Mixolydian plus the minor-pentatonic/blues blend — the 7♯9 chord literally spells that major/minor mix.' },
|
||||
{ over: 'ii7–V9 loops', scale: 'dorian', why: 'Dorian on the ii covers both chords; it\'s the same dyad as the minor vamp heard from the ii.' },
|
||||
{ over: 'maj7 loops', scale: 'major', why: 'Diatonic major/pentatonic — the EWF horn-line sweetness. Target 9ths and 6ths, not roots.' },
|
||||
],
|
||||
targetNotes:
|
||||
'Funk solos are mostly chord fragments: the 3+♭7 tritone pair and the ♭7+9 pair of the 9 grip, slid in from a half-step below. Over static harmony, develop RHYTHM — state a short motif, displace it inside the 16th grid, add and remove ghosts. The harmony will not save you; the pocket will.',
|
||||
licks: [
|
||||
{
|
||||
over: 'funk-dorian-vamp',
|
||||
description: 'Cissy Strut main line (The Meters, 1969): a descending Cm7 arpeggio answered by double-stop stabs — upper-structure fragments of the i11.',
|
||||
tab: 'e|------------------|---------------6-6--5-5--\nB|------------------|---------------6-6--6-6--\nG|--5--3--0---------|---------------7-7--5-5--\nD|-----------1b-----|-------------------------\nA|--------------3---|--1--3--1--3-------------\n C Bb G Eb C Bb C Bb C (stab pairs)',
|
||||
source: 'The Meters, "Cissy Strut" (1969); spytunes.com & pianote.com analyses (Cm7 arpeggio construction)',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'funk',
|
||||
label: 'Funk',
|
||||
feel: '16th',
|
||||
tempoRange: [90, 120],
|
||||
character: 'One or two chords, sixteen subdivisions: harmony freezes so rhythm can talk. The guitar is a drum with pitch — most strokes are muted, and colour lives in the chord quality (9, 13, ♯9), not the changes.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'funk-one-chord',
|
||||
name: 'One-chord I9 vamp (James Brown)',
|
||||
rn: ['I9', 'I13', 'I9sus4', 'I9'],
|
||||
degrees: [0, 0, 0, 0],
|
||||
qualities: ['dom7', 'dom7', 'sus4', 'dom7'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'mixolydian',
|
||||
songs: ['Get Up (Sex Machine) — James Brown', 'Cold Sweat — James Brown', "Papa's Got a Brand New Bag"],
|
||||
tip: 'The harmony never moves — the chord QUALITY does: 9 → 13 → 9sus4 → 9 is the whole arrangement. Funk colour lives in the voicing, not the progression.',
|
||||
},
|
||||
{
|
||||
id: 'funk-dorian-vamp',
|
||||
name: 'Dorian two-chord vamp (i7–IV7)',
|
||||
rn: ['i9', 'IV9'],
|
||||
degrees: [0, 5],
|
||||
qualities: ['min7', 'dom7'],
|
||||
bars: [1, 1],
|
||||
mode: 'dorian',
|
||||
songs: ['Chameleon — Herbie Hancock', 'Use Me — Bill Withers', 'Cissy Strut — The Meters (i7 side)'],
|
||||
tip: 'THE funk pair: both chords live inside one Dorian scale, so soloists never have to switch. The major IV is what makes it Dorian, not sad.',
|
||||
},
|
||||
{
|
||||
id: 'funk-25-loop',
|
||||
name: 'Disco loop (ii7–V9, never resolves)',
|
||||
rn: ['ii7', 'V9'],
|
||||
degrees: [2, 7],
|
||||
qualities: ['min7', 'dom7'],
|
||||
bars: [1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Le Freak — Chic', 'Good Times — Chic', 'I Wish — Stevie Wonder'],
|
||||
tip: 'A ii–V that never finds its I — the resolution is the dance floor. Same two-chord dyad as the Dorian vamp, heard from the other side.',
|
||||
},
|
||||
{
|
||||
id: 'funk-bvii-move',
|
||||
name: 'I9–♭VII9 figure',
|
||||
rn: ['I9', '♭VII9'],
|
||||
degrees: [0, 10],
|
||||
qualities: ['dom7', 'dom7'],
|
||||
bars: [1, 1],
|
||||
mode: 'mixolydian',
|
||||
songs: ['the James Brown E9→D9 figure', 'countless JB-school vamps'],
|
||||
tip: 'One grip sliding down a whole step and back. The ♭VII is borrowed Mixolydian gravity — it falls back to the I on its own.',
|
||||
},
|
||||
{
|
||||
id: 'funk-smooth-loop',
|
||||
name: 'Smooth maj7 loop (EWF)',
|
||||
rn: ['IVmaj7', 'iii7', 'ii7', 'iii7'],
|
||||
degrees: [5, 4, 2, 4],
|
||||
qualities: ['maj7', 'min7', 'min7', 'min7'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['September — Earth, Wind & Fire'],
|
||||
tip: 'Starts on the IVmaj7 and orbits the iii — home is implied, never stated. (Every third pass, September turns the iii into V/vi for the lift.)',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,69 @@
|
||||
// KB registry — the UI reads only this. Each style folder registers here;
|
||||
// instruments appear as their cells are completed (see docs/kb-backlog.md).
|
||||
import jazzMeta from './jazz/meta.js'
|
||||
import jazzProgressions from './jazz/progressions.js'
|
||||
import jazzGuitar from './jazz/guitar.js'
|
||||
import bluesMeta from './blues/meta.js'
|
||||
import bluesProgressions from './blues/progressions.js'
|
||||
import bluesGuitar from './blues/guitar.js'
|
||||
import rockMeta from './rock/meta.js'
|
||||
import rockProgressions from './rock/progressions.js'
|
||||
import rockGuitar from './rock/guitar.js'
|
||||
import bossaMeta from './bossa/meta.js'
|
||||
import bossaProgressions from './bossa/progressions.js'
|
||||
import bossaGuitar from './bossa/guitar.js'
|
||||
import funkMeta from './funk/meta.js'
|
||||
import funkProgressions from './funk/progressions.js'
|
||||
import funkGuitar from './funk/guitar.js'
|
||||
import reggaeMeta from './reggae/meta.js'
|
||||
import reggaeProgressions from './reggae/progressions.js'
|
||||
import reggaeGuitar from './reggae/guitar.js'
|
||||
import countryMeta from './country/meta.js'
|
||||
import countryProgressions from './country/progressions.js'
|
||||
import countryGuitar from './country/guitar.js'
|
||||
import rnbMeta from './rnb/meta.js'
|
||||
import rnbProgressions from './rnb/progressions.js'
|
||||
import rnbGuitar from './rnb/guitar.js'
|
||||
|
||||
export default {
|
||||
jazz: {
|
||||
meta: jazzMeta,
|
||||
progressions: jazzProgressions,
|
||||
instruments: { guitar: jazzGuitar },
|
||||
},
|
||||
blues: {
|
||||
meta: bluesMeta,
|
||||
progressions: bluesProgressions,
|
||||
instruments: { guitar: bluesGuitar },
|
||||
},
|
||||
rock: {
|
||||
meta: rockMeta,
|
||||
progressions: rockProgressions,
|
||||
instruments: { guitar: rockGuitar },
|
||||
},
|
||||
bossa: {
|
||||
meta: bossaMeta,
|
||||
progressions: bossaProgressions,
|
||||
instruments: { guitar: bossaGuitar },
|
||||
},
|
||||
funk: {
|
||||
meta: funkMeta,
|
||||
progressions: funkProgressions,
|
||||
instruments: { guitar: funkGuitar },
|
||||
},
|
||||
reggae: {
|
||||
meta: reggaeMeta,
|
||||
progressions: reggaeProgressions,
|
||||
instruments: { guitar: reggaeGuitar },
|
||||
},
|
||||
country: {
|
||||
meta: countryMeta,
|
||||
progressions: countryProgressions,
|
||||
instruments: { guitar: countryGuitar },
|
||||
},
|
||||
rnb: {
|
||||
meta: rnbMeta,
|
||||
progressions: rnbProgressions,
|
||||
instruments: { guitar: rnbGuitar },
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
// Jazz guitar pack — gold-standard KB cell. Shapes verified by note-spelling
|
||||
// against: jazzguitar.be (shell chords, drop-2, comping rhythms), freddiegreen.org,
|
||||
// jenslarsen.nl (comping rhythms, voice leading), premierguitar.com (drop-2).
|
||||
|
||||
// Shell voicings (Freddie Green style) — root + 3rd + 7th, fifths omitted.
|
||||
const SHELL_6 = { // root on low E string
|
||||
maj7: { rootStr: 6, offsets: [0, 'x', 1, 1, 'x', 'x'], fingers: [1, 0, 3, 4, 0, 0] }, // R–7–3
|
||||
dom7: { rootStr: 6, offsets: [0, 'x', 0, 1, 'x', 'x'], fingers: [1, 0, 2, 3, 0, 0] }, // R–♭7–3
|
||||
min7: { rootStr: 6, offsets: [0, 'x', 0, 0, 'x', 'x'], fingers: [1, 0, 2, 3, 0, 0] }, // R–♭7–♭3
|
||||
half_dim: { rootStr: 6, offsets: [0, 'x', 0, 0, -1, 'x'], fingers: [2, 0, 3, 4, 1, 0] }, // R–♭7–♭3–♭5
|
||||
}
|
||||
const SHELL_5 = { // root on A string
|
||||
maj7: { rootStr: 5, offsets: ['x', 0, -1, 1, 'x', 'x'], fingers: [0, 2, 1, 4, 0, 0] }, // R–3–7
|
||||
dom7: { rootStr: 5, offsets: ['x', 0, -1, 0, 'x', 'x'], fingers: [0, 2, 1, 3, 0, 0] }, // R–3–♭7
|
||||
min7: { rootStr: 5, offsets: ['x', 0, -2, 0, 'x', 'x'], fingers: [0, 3, 1, 4, 0, 0] }, // R–♭3–♭7
|
||||
half_dim: { rootStr: 5, offsets: ['x', 0, 1, 0, 1, 'x'], fingers: [0, 1, 3, 2, 4, 0] }, // R–♭5–♭7–♭3
|
||||
}
|
||||
|
||||
// Drop-2 voicings on the top four strings (D–G–B–e) — stays out of the bass register.
|
||||
const DROP2 = {
|
||||
maj7Root: { rootStr: 4, offsets: ['x', 'x', 0, 2, 2, 2], fingers: [0, 0, 1, 3, 3, 3] }, // R–5–7–3
|
||||
dom7Root: { rootStr: 4, offsets: ['x', 'x', 0, 2, 1, 2], fingers: [0, 0, 1, 3, 2, 4] }, // R–5–♭7–3
|
||||
min7Root: { rootStr: 4, offsets: ['x', 'x', 0, 2, 1, 1], fingers: [0, 0, 1, 4, 2, 3] }, // R–5–♭7–♭3
|
||||
halfDimRoot: { rootStr: 4, offsets: ['x', 'x', 0, 1, 1, 1], fingers: [0, 0, 1, 2, 3, 4] }, // R–♭5–♭7–♭3
|
||||
min7Inv3: { rootStr: 1, offsets: ['x', 'x', 0, 0, 0, 0], fingers: [0, 0, 1, 1, 1, 1] }, // ♭7–♭3–5–R (one-finger barre)
|
||||
dom7Inv2: { rootStr: 2, offsets: ['x', 'x', 1, 2, 0, 2], fingers: [0, 0, 2, 3, 1, 4] }, // 3–♭7–R–5
|
||||
maj7Inv2: { rootStr: 1, offsets: ['x', 'x', 1, 1, 0, 0], fingers: [0, 0, 2, 3, 1, 1] }, // 7–3–5–R
|
||||
}
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'In a jazz jam the guitar is part of the rhythm section: small voicings built on 3rds and 7ths, placed around the soloist, never on top of the piano. The fifths and often the roots are someone else\'s job — your two guide tones carry the whole harmony.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: 'Four-to-the-bar (Freddie Green)',
|
||||
rhythm: '♩ ♩ ♩ ♩',
|
||||
description: 'Short, percussive quarter-note strums on all four beats, slight accent on 2 and 4 — the Count Basie pulse. Damp the unused strings; the chunk matters more than the chord.',
|
||||
},
|
||||
{
|
||||
label: 'Charleston',
|
||||
rhythm: '𝅗𝅥. + "and of 2"',
|
||||
description: 'Hit on beat 1 (held) plus a stab on the and-of-2 — the foundational syncopated comping cell. Displace it ("and of 1" + beat 3) for forward motion.',
|
||||
},
|
||||
{
|
||||
label: 'The push (anticipated and-of-4)',
|
||||
rhythm: 'tied from "and of 4"',
|
||||
description: 'Strike the next bar\'s chord an eighth note early and tie it over the barline — the standard jazz anticipation. Telegraphs the change to the whole band.',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'jazz-251-major': [
|
||||
{
|
||||
label: 'Shell voicings, guide-tone glue',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: SHELL_5.min7, note: 'R–♭3–♭7' },
|
||||
{ shape: SHELL_6.dom7, note: '♭7 of ii holds; ♭3 falls a half-step to become the 3rd' },
|
||||
{ shape: SHELL_5.maj7, note: '♭7 of V falls a half-step to the 3rd; the other voice holds' },
|
||||
],
|
||||
tips: 'Only the roots jump — both upper voices move 0 or 1 fret across the whole progression. Watch the D and G strings: that two-note thread is the ii–V–I.',
|
||||
},
|
||||
{
|
||||
label: 'Drop-2 in one position (top four strings)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: DROP2.min7Inv3, note: 'one-finger barre: ♭7–♭3–5–R' },
|
||||
{ shape: DROP2.dom7Inv2, note: 'every voice moves 0–2 frets' },
|
||||
{ shape: DROP2.maj7Inv2, note: 'lands with the root on top' },
|
||||
],
|
||||
tips: 'The whole progression sits in one 3-fret window with no position jump — ideal when a piano is holding the low end. Great behind a singer: high, thin, out of the way.',
|
||||
},
|
||||
],
|
||||
|
||||
'jazz-251-minor': [
|
||||
{
|
||||
label: 'Shell voicings with the ♭5 voiced',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: SHELL_6.half_dim, note: 'the ♭5 on the B string is the colour — don\'t skip it' },
|
||||
{ shape: SHELL_5.dom7, extensions: ['b9'], note: 'add the ♭9 a fret above the root for the full minor-key sound' },
|
||||
{ shape: SHELL_6.min7, note: 'home — resolve and get light' },
|
||||
],
|
||||
tips: 'The ♭5 of the iiø7 *is* the ♭9 of the V7 — same pitch, reinterpreted. Find it once, hold it through both chords.',
|
||||
},
|
||||
{
|
||||
label: 'Drop-2, top-four strings',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: DROP2.halfDimRoot, note: 'root + one-finger barre' },
|
||||
{ shape: DROP2.dom7Inv2, note: '' },
|
||||
{ shape: DROP2.min7Inv3, note: 'one-finger barre to rest on' },
|
||||
],
|
||||
tips: 'Both barre grips bookending this make the iiø7 the only real stretch — practise the V7 grip as the pivot between them.',
|
||||
},
|
||||
],
|
||||
|
||||
'jazz-rhythm-a': [
|
||||
{
|
||||
label: 'Shells, four-to-the-bar',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: SHELL_6.maj7, note: '' },
|
||||
{ shape: SHELL_5.min7, note: '' },
|
||||
{ shape: SHELL_5.min7, note: 'same grip, two frets down from vi' },
|
||||
{ shape: SHELL_6.dom7, note: '' },
|
||||
],
|
||||
tips: 'One chord per bar, four chunks per bar, Freddie Green style. At rhythm-changes tempo the small shapes are the only ones that keep up.',
|
||||
},
|
||||
{
|
||||
label: 'Drop-2 turnaround, upper register',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: DROP2.maj7Root, note: '' },
|
||||
{ shape: DROP2.min7Inv3, note: '' },
|
||||
{ shape: DROP2.min7Root, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: '' },
|
||||
],
|
||||
tips: 'A loop, not a line — bar 4 feeds bar 1. Practise it as one circular hand motion until the join disappears.',
|
||||
},
|
||||
],
|
||||
|
||||
'jazz-625': [
|
||||
{
|
||||
label: 'Shells, alternating root strings',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: SHELL_6.min7, note: '' },
|
||||
{ shape: SHELL_5.min7, note: '' },
|
||||
{ shape: SHELL_6.dom7, note: '' },
|
||||
{ shape: SHELL_5.maj7, note: '' },
|
||||
],
|
||||
tips: 'Roots falling in fifths alternate 6th string → 5th string at the same fret — the progression stays in one position by construction. This is why shells were built for circle-of-fifths tunes.',
|
||||
},
|
||||
{
|
||||
label: 'Drop-2 circle, top-four strings',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: DROP2.min7Inv3, note: '' },
|
||||
{ shape: DROP2.min7Root, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: '' },
|
||||
{ shape: DROP2.maj7Inv2, note: '' },
|
||||
],
|
||||
tips: 'Sing the top note of each grip as you move — drop-2 makes the melody line on the e string audible, and that line is what the soloist hears from you.',
|
||||
},
|
||||
],
|
||||
|
||||
'jazz-blues': [
|
||||
{
|
||||
label: 'Shells through the form',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: SHELL_6.dom7, note: 'I7 — root on the 6th string' },
|
||||
{ shape: SHELL_5.dom7, note: 'IV7 — same fret, root string up' },
|
||||
{ shape: SHELL_6.dom7, note: '' },
|
||||
{ shape: SHELL_6.dom7, note: '' },
|
||||
{ shape: SHELL_5.dom7, note: '' },
|
||||
{ shape: SHELL_5.dom7, note: '' },
|
||||
{ shape: SHELL_6.dom7, note: '' },
|
||||
{ shape: SHELL_5.dom7, note: 'VI7 — the jazz move; hear bar 8 coming' },
|
||||
{ shape: SHELL_5.min7, note: 'ii7 of the turnaround' },
|
||||
{ shape: SHELL_6.dom7, note: 'V7' },
|
||||
{ shape: SHELL_6.dom7, note: 'home' },
|
||||
{ shape: SHELL_6.dom7, note: 'V7 pickup into the next chorus' },
|
||||
],
|
||||
tips: 'I7 and IV7 sit at the same fret on adjacent root strings — the first four bars are a two-finger-move exercise. Keep everything within two frets of the I.',
|
||||
},
|
||||
{
|
||||
label: 'Drop-2 blues, top-four strings',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: DROP2.dom7Root, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: 'IV7 without leaving the position' },
|
||||
{ shape: DROP2.dom7Root, note: '' },
|
||||
{ shape: DROP2.dom7Root, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: '' },
|
||||
{ shape: DROP2.dom7Root, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: 'VI7' },
|
||||
{ shape: DROP2.min7Inv3, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: '' },
|
||||
{ shape: DROP2.dom7Root, note: '' },
|
||||
{ shape: DROP2.dom7Inv2, note: '' },
|
||||
],
|
||||
tips: 'Comping above the 7th fret leaves the whole low end to bass and piano — the classic organ-trio guitar register. Charleston rhythm, not four-to-the-bar, up here.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'ii7', scale: 'dorian', why: 'Minor 7 chords in a major key take Dorian — the natural 6 keeps it from sounding sad.' },
|
||||
{ over: 'V7', scale: 'mixolydian', why: 'The ♭7 is built in; in minor keys use Phrygian dominant (harmonic minor from the V) for the ♭9 sound.' },
|
||||
{ over: 'Imaj7', scale: 'major', why: 'Plain major works; avoid sitting on the 4th over the maj7.' },
|
||||
{ over: 'I7 (blues)', scale: 'mixolydian', why: 'Mix with the blues scale — Mixolydian for the changes, blues scale for the attitude.' },
|
||||
{ over: 'iiø7', scale: 'locrian', why: 'Target the ♭3 or ♭5; the ♭5 becomes the ♭9 of the next V7.' },
|
||||
],
|
||||
targetNotes:
|
||||
'Land the 3rd of each chord on the downbeat of the change. In any ii–V–I the 7th of one chord falls a half-step to the 3rd of the next — that two-note rail is the whole map.',
|
||||
licks: [
|
||||
{
|
||||
over: 'jazz-251-major',
|
||||
description: '"The Lick" — the most famous ii–V cliché in jazz (Parker, Coltrane, everyone). Degrees 1–2–♭3–4–2–♭7–1 over the ii chord.',
|
||||
tab: 'e|--------------------------\nB|--------------------------\nG|--------------------------\nD|----2--3--5--2------------\nA|-5--------------3--5------\nE|--------------------------\n D E F G E C D (over Dm7 in C)',
|
||||
source: 'Wikipedia: "The Lick"; Alex Heitlinger compilation (2011)',
|
||||
},
|
||||
{
|
||||
over: 'jazz-251-major',
|
||||
description: 'Stock bebop ii–V–I: ii arpeggio up, then the 3–5–♭7–♭9 diminished arpeggio over the V7 (B–D–F–A♭ over G7), resolving half-step into the I.',
|
||||
tab: 'e|--------------------------|------------4--3---------|--------\nB|----------------5--3------|----3--6----------6--3----|--1-----\nG|-------------5---------5--|-4---------------------4--|--------\nD|----3--7---------------7--|--------------------------|--------\nA|-5------------------------|--------------------------|--------\nE|--------------------------|--------------------------|--------\n Dm7 arpeggio + 9th G7: 3-5-♭7-♭9 dim arp Cmaj7',
|
||||
source: 'David Baker, How to Play Bebop Vol. 1; jazzguitar.be "50 Bebop Licks"',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'jazz',
|
||||
label: 'Jazz',
|
||||
feel: 'swing',
|
||||
tempoRange: [110, 230],
|
||||
character: 'Harmony in constant motion — 7th chords everywhere, 3rds and 7ths doing the voice-leading work, rhythm section breathing around the soloist.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'jazz-251-major',
|
||||
name: 'ii–V–I',
|
||||
rn: ['ii7', 'V7', 'Imaj7'],
|
||||
degrees: [2, 7, 0],
|
||||
qualities: ['min7', 'dom7', 'maj7'],
|
||||
bars: [1, 1, 2],
|
||||
mode: 'major',
|
||||
songs: ['All The Things You Are', 'Tune Up — Miles Davis', 'Honeysuckle Rose'],
|
||||
tip: 'The 7th of each chord resolves down a half-step to the 3rd of the next — that two-note thread is the whole progression.',
|
||||
},
|
||||
{
|
||||
id: 'jazz-251-minor',
|
||||
name: 'minor ii–V–i',
|
||||
rn: ['iiø7', 'V7', 'i7'],
|
||||
degrees: [2, 7, 0],
|
||||
qualities: ['half_dim', 'dom7', 'min7'],
|
||||
bars: [1, 1, 2],
|
||||
mode: 'minor',
|
||||
songs: ['Autumn Leaves (bridge)', 'Blue Bossa', 'Beautiful Love'],
|
||||
tip: 'Same engine as the major ii–V–I, darker fuel: the ♭5 of the iiø7 is the ♭9 colour waiting to happen on the V7.',
|
||||
},
|
||||
{
|
||||
id: 'jazz-rhythm-a',
|
||||
name: 'Rhythm changes turnaround',
|
||||
rn: ['Imaj7', 'vi7', 'ii7', 'V7'],
|
||||
degrees: [0, 9, 2, 7],
|
||||
qualities: ['maj7', 'min7', 'min7', 'dom7'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['I Got Rhythm — Gershwin', 'Oleo — Sonny Rollins', 'Blue Moon'],
|
||||
tip: 'A loop, not a line — bar 4 hands you straight back to bar 1. Learn it as one circular shape your hands repeat.',
|
||||
},
|
||||
{
|
||||
id: 'jazz-625',
|
||||
name: 'vi–ii–V–I circle',
|
||||
rn: ['vi7', 'ii7', 'V7', 'Imaj7'],
|
||||
degrees: [9, 2, 7, 0],
|
||||
qualities: ['min7', 'min7', 'dom7', 'maj7'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Fly Me to the Moon', 'Autumn Leaves (A section, relative view)'],
|
||||
tip: 'Pure circle-of-fifths motion: every root falls a fifth. If you can hear this one, you can predict half the jazz repertoire.',
|
||||
},
|
||||
{
|
||||
id: 'jazz-blues',
|
||||
name: 'Jazz blues (12-bar)',
|
||||
rn: ['I7', 'IV7', 'I7', 'I7', 'IV7', 'IV7', 'I7', 'VI7', 'ii7', 'V7', 'I7', 'V7'],
|
||||
degrees: [0, 5, 0, 0, 5, 5, 0, 9, 2, 7, 0, 7],
|
||||
qualities: ['dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'dom7', 'min7', 'dom7', 'dom7', 'dom7'],
|
||||
bars: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ["Billie's Bounce — Charlie Parker", "Now's the Time — Charlie Parker", 'Tenor Madness — Sonny Rollins'],
|
||||
tip: 'A 12-bar blues wearing a suit: bars 8-10 swap the plain V-IV for a VI7 → ii–V turnaround. Hear bar 8 coming and you sound like a jazz player.',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,182 @@
|
||||
// Reggae guitar pack. Shapes verified by note-spelling against: guitarwiz.app
|
||||
// (skank voicings, bubble grid), guitarworld.com (Marley rhythm lesson),
|
||||
// guitarkitchen.com (Stir It Up / Get Up Stand Up lessons), Wikipedia ("Ska
|
||||
// stroke", "One drop rhythm"), ethanhein.com (Stir It Up hook analysis).
|
||||
|
||||
// Top-3-string triads — the classic skank register (above the bubble, far above the bass).
|
||||
const TOP3_MAJ = { rootStr: 1, offsets: ['x', 'x', 'x', 1, 0, 0], fingers: [0, 0, 0, 2, 1, 1] } // 3-5-R
|
||||
const TOP3_MIN = { rootStr: 1, offsets: ['x', 'x', 'x', 0, 0, 0], fingers: [0, 0, 0, 1, 1, 1] } // ♭3-5-R barre
|
||||
|
||||
// Middle-string triads (strings 4-3-2) — the Wailers chop register.
|
||||
const MID_MAJ = { rootStr: 3, offsets: ['x', 'x', 0, 0, 0, 'x'], fingers: [0, 0, 1, 1, 1, 0] } // 5-R-3
|
||||
const MID_MIN = { rootStr: 3, offsets: ['x', 'x', 0, 0, -1, 'x'], fingers: [0, 0, 2, 3, 1, 0] } // 5-R-♭3
|
||||
|
||||
// Top-4 partial barres — fuller chop, still no low strings.
|
||||
const TOP4_MAJ = { rootStr: 4, offsets: ['x', 'x', 0, -1, -2, -2], fingers: [0, 0, 4, 3, 1, 1] } // R-3-5-R
|
||||
const TOP4_MIN = { rootStr: 4, offsets: ['x', 'x', 0, -2, -2, -2], fingers: [0, 0, 4, 1, 1, 1] } // R-♭3-5-R
|
||||
|
||||
// Quality-neutral 5th+root dyad (strings B+e) — works over major or minor.
|
||||
const DYAD_5R = { rootStr: 1, offsets: ['x', 'x', 'x', 'x', 0, 0], fingers: [0, 0, 0, 0, 1, 1] }
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'The reggae guitarist plays one thing and plays it perfectly: the skank — a small, high, choked chord chop strictly on the offbeats. Beat 1 is sacred silence (the one drop), beat 3 belongs to the drums, the low end belongs to the bass. Strike, choke, wait.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: 'One-drop skank',
|
||||
rhythm: '. . X . | . . X . — chops on 2 and 4 only',
|
||||
description: 'The core part. Strike the chord, release fret pressure instantly (fingers stay touching, off the frets), silence until the next chop. Downstroke-dominant in reggae. Counted double-time it becomes the and-of-every-beat.',
|
||||
},
|
||||
{
|
||||
label: 'Double skank (Stir It Up)',
|
||||
rhythm: '. . D U | . . D U — down-up pair on 2 and 4',
|
||||
description: 'Each chop splits into a two-hit "chak-a": downstroke on the beat, upstroke on its and. The rockers-era intensifier — same placement, doubled motion.',
|
||||
},
|
||||
{
|
||||
label: 'Ska upstroke',
|
||||
rhythm: '. U . U . U . U — every offbeat 8th, bright and fast',
|
||||
description: 'The same offbeat principle at 120–180 BPM: upstrokes on every "and". Rocksteady is this relaxed; roots reggae is this halved. The placement never changes across the whole family — only the drums do.',
|
||||
},
|
||||
{
|
||||
label: 'The bubble (only without keys)',
|
||||
rhythm: '. . X X . . X X . . X X . . X X — the "& a" of every beat',
|
||||
description: 'Normally the organ\'s job (Jackie Mittoo): a palm-muted continuous offbeat pulse in the midrange. Cover it on guitar only when there is no keyboardist — never alongside one.',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'reggae-stir': [
|
||||
{
|
||||
label: 'Top-3 triads (the classic skank)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TOP3_MAJ, note: 'I' },
|
||||
{ shape: TOP3_MAJ, note: 'IV — same shape up the neck' },
|
||||
{ shape: TOP3_MAJ, note: 'V — two frets above the IV' },
|
||||
],
|
||||
tips: 'One shape, three positions, chop on 2 and 4. The chop must die immediately — if a chord rings into the next beat, that\'s a rock strum, not a skank.',
|
||||
},
|
||||
{
|
||||
label: 'Middle-string set (Wailers register)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MID_MAJ, note: 'I — strings 4-3-2' },
|
||||
{ shape: MID_MAJ, note: 'IV' },
|
||||
{ shape: MID_MAJ, note: 'V' },
|
||||
],
|
||||
tips: 'A warmer chop one string set down — the Marley band register. Use it when a second guitar or keys already occupy the top strings.',
|
||||
},
|
||||
],
|
||||
|
||||
'reggae-two-chord': [
|
||||
{
|
||||
label: 'Top-3 triads',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TOP3_MAJ, note: 'I' },
|
||||
{ shape: TOP3_MAJ, note: 'IV — five frets up, or two down on the next string set' },
|
||||
],
|
||||
tips: 'Two chords for the whole tune means the skank IS your entire job: identical length, identical volume, every chop. Boredom is the test — pass it.',
|
||||
},
|
||||
{
|
||||
label: 'Top-4 partial barres',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TOP4_MAJ, note: 'I' },
|
||||
{ shape: TOP4_MAJ, note: 'IV' },
|
||||
],
|
||||
tips: 'The fuller chop for when the band is sparse — still nothing below the D string. Half-press the barre (Marley style) and the chop turns almost fully percussive.',
|
||||
},
|
||||
],
|
||||
|
||||
'reggae-minor-vamp': [
|
||||
{
|
||||
label: 'Top-3 triads',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TOP3_MIN, note: 'i — one-finger barre' },
|
||||
{ shape: TOP3_MAJ, note: '♭VII — a passing breath, two frets down' },
|
||||
],
|
||||
tips: 'Treat the ♭VII as ornament, not destination — Get Up Stand Up is functionally one chord, and the groove is the message. The intro hook (♭7→root on the G string) doubles the bass.',
|
||||
},
|
||||
{
|
||||
label: 'Middle-string set',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MID_MIN, note: 'i' },
|
||||
{ shape: MID_MAJ, note: '♭VII' },
|
||||
],
|
||||
tips: 'Lower, darker chop for the heavier roots feel. Keep the choke brutal at slow tempos — space is the instrument at 75 BPM.',
|
||||
},
|
||||
],
|
||||
|
||||
'reggae-nwnc': [
|
||||
{
|
||||
label: 'Top-3 triads with the bass walk',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TOP3_MAJ, note: 'I' },
|
||||
{ shape: TOP3_MAJ, note: 'V — the bass plays its 3rd underneath; your triad doesn\'t change' },
|
||||
{ shape: TOP3_MIN, note: 'vi' },
|
||||
{ shape: TOP3_MAJ, note: 'IV' },
|
||||
],
|
||||
tips: 'The V⁶\'s descending bass (root→7th of the scale→6th) is the bassist\'s line — your job is to NOT double it. Stay high, stay small, let the walk happen below you.',
|
||||
},
|
||||
{
|
||||
label: 'Neutral 5+R dyads',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: DYAD_5R, omit3: true, note: 'I' },
|
||||
{ shape: DYAD_5R, omit3: true, note: 'V' },
|
||||
{ shape: DYAD_5R, omit3: true, note: 'vi — same dyad; the bass supplies the minor' },
|
||||
{ shape: DYAD_5R, omit3: true, note: 'IV' },
|
||||
],
|
||||
tips: 'Two strings, no 3rd — quality-neutral, so one dyad shape skanks the whole progression while bass and vocals colour it. The most transparent part you can play behind a singer.',
|
||||
},
|
||||
],
|
||||
|
||||
'reggae-rocksteady': [
|
||||
{
|
||||
label: 'Top-3 triads, doo-wop sweetness',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TOP3_MAJ, note: 'I' },
|
||||
{ shape: TOP3_MIN, note: 'ii' },
|
||||
{ shape: TOP3_MIN, note: 'iii — two frets up' },
|
||||
{ shape: TOP3_MIN, note: 'ii' },
|
||||
],
|
||||
tips: 'A diatonic staircase: the minor barre walks up two frets and back while the I anchors. Rocksteady tempo (~86 BPM) sits between ska\'s sprint and roots\' crawl — relax the chop accordingly.',
|
||||
},
|
||||
{
|
||||
label: 'Top-4 partial barres',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TOP4_MAJ, note: 'I' },
|
||||
{ shape: TOP4_MIN, note: 'ii' },
|
||||
{ shape: TOP4_MIN, note: 'iii' },
|
||||
{ shape: TOP4_MIN, note: 'ii' },
|
||||
],
|
||||
tips: 'The soul-ballad version of the skank — slightly fuller, still bass-free. Good under a falsetto lead vocal where top-3 triads would crowd the singer\'s register.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'major vamps', scale: 'major', why: 'Major pentatonic fills in the gaps AFTER vocal lines — call and response, never over the singer.' },
|
||||
{ over: 'i–♭VII vamps', scale: 'minor', why: 'Minor pentatonic answer phrases; the ♭7 doubles as the ♭VII chord\'s root — the free note of roots reggae.' },
|
||||
{ over: 'any vamp (riddim role)', scale: 'minor', why: 'The classic second-guitar job is doubling the bass melody in unison, palm-muted for a dull attack — locked exactly, not approximately.' },
|
||||
],
|
||||
targetNotes:
|
||||
'Reggae lead is economy: short pentatonic answers in vocal gaps, high picked arpeggios of the current chord with 16th-note pickups, or unison bass-doubling. If you\'re not sure whether to play — don\'t. Beat 1 stays empty even for the soloist\'s instincts.',
|
||||
licks: [
|
||||
{
|
||||
over: 'reggae-stir',
|
||||
description: 'The Stir It Up hook (reconstruction from Ethan Hein\'s published note-by-note analysis, not a record transcription): an ornamented rise A→C♯→D over the I, then arpeggios of the IV and V with 16th-note pickups carrying the swing.',
|
||||
tab: ' A (I) D (IV) E (V)\ne|--------------------|----2----5---|----4----7----\nB|---------2----3-----|--3----------|--5-----------\nG|----2---------------|-------------|--------------\n A C# D D F# A E G# B',
|
||||
source: 'ethanhein.com "Musical simples: Stir It Up"; Bob Marley & The Wailers (1973)',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'reggae',
|
||||
label: 'Reggae',
|
||||
feel: 'one drop',
|
||||
tempoRange: [70, 95],
|
||||
character: 'Strict role separation and sacred negative space: bass owns the melody, drums drop beat one entirely, and the guitar is a choked offbeat chop that never, ever lands on 1 or 3.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'reggae-stir',
|
||||
name: 'Circular I–IV–V vamp',
|
||||
rn: ['I', 'IV', 'V'],
|
||||
degrees: [0, 5, 7],
|
||||
qualities: ['maj', 'maj', 'maj'],
|
||||
bars: [2, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Stir It Up — Bob Marley & The Wailers'],
|
||||
tip: 'Not a cadence — a wheel: a full bar of I, then IV and V share a bar, forever. The V never "resolves"; it just hands back to the I.',
|
||||
},
|
||||
{
|
||||
id: 'reggae-two-chord',
|
||||
name: 'Two-chord I–IV vamp',
|
||||
rn: ['I', 'IV'],
|
||||
degrees: [0, 5],
|
||||
qualities: ['maj', 'maj'],
|
||||
bars: [2, 2],
|
||||
mode: 'major',
|
||||
songs: ['Lively Up Yourself — Bob Marley'],
|
||||
tip: 'Two chords for an entire song. The interest is the interlock — every instrument in its own time slot — not the harmony.',
|
||||
},
|
||||
{
|
||||
id: 'reggae-minor-vamp',
|
||||
name: 'Minor vamp (i–♭VII)',
|
||||
rn: ['i', '♭VII'],
|
||||
degrees: [0, 10],
|
||||
qualities: ['min', 'maj'],
|
||||
bars: [3, 1],
|
||||
mode: 'minor',
|
||||
songs: ['Get Up, Stand Up — Bob Marley', 'Them Belly Full — Bob Marley (chorus)'],
|
||||
tip: 'Get Up Stand Up is arguably ONE chord — the ♭VII is a passing breath, not a destination. Roots reggae treats harmony as a drone with occasional weather.',
|
||||
},
|
||||
{
|
||||
id: 'reggae-nwnc',
|
||||
name: 'Roots ballad (I–V⁶–vi–IV)',
|
||||
rn: ['I', 'V⁶', 'vi', 'IV'],
|
||||
degrees: [0, 7, 9, 5],
|
||||
qualities: ['maj', 'maj', 'min', 'maj'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['No Woman, No Cry — Bob Marley'],
|
||||
tip: 'Major key despite the tears: the V carries its 3rd in the bass (G/B in C), walking the bassline down by step into the vi. The descent is the emotion.',
|
||||
},
|
||||
{
|
||||
id: 'reggae-rocksteady',
|
||||
name: 'Rocksteady climb (I–ii–iii–ii)',
|
||||
rn: ['I', 'ii', 'iii', 'ii'],
|
||||
degrees: [0, 2, 4, 2],
|
||||
qualities: ['maj', 'min', 'min', 'min'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Queen Majesty — The Techniques (1967)'],
|
||||
tip: 'Rocksteady grew from doo-wop covers, and it shows: a gentle diatonic staircase up and back at ~86 BPM. Soul harmony with the bass carrying the tune.',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,192 @@
|
||||
// R&B / neo-soul guitar pack. Shapes verified by note-spelling against:
|
||||
// pickupmusic.com (m9/maj9 grips, slide-into-chords), fundamental-changes.com
|
||||
// (The Neo-Soul Guitar Book vocabulary, hammer-ons inside shapes),
|
||||
// premierguitar.com (Curtis Mayfield figures — standard-tuning adaptations;
|
||||
// originals are in open F# tuning), justinguitar.com (Mayfield/Hendrix fills),
|
||||
// musicradar.com (D'Angelo Brown Sugar breakdown), landr.com & hearandplay.com
|
||||
// (gospel borrowed-iv), brltheory.com (the Dilla feel).
|
||||
|
||||
// The core neo-soul grips.
|
||||
const M9_5 = { rootStr: 5, offsets: ['x', 0, -2, 0, 0, 'x'], fingers: [0, 2, 1, 3, 4, 0] } // R-♭3-♭7-9
|
||||
const M9_6 = { rootStr: 6, offsets: [0, 'x', 0, 0, 0, 2], fingers: [1, 0, 2, 3, 3, 4] } // R-♭7-♭3-5-9
|
||||
const M11_C = { rootStr: 6, offsets: [0, 'x', 0, 0, -2, 'x'], fingers: [2, 0, 3, 4, 1, 0] } // R-♭7-♭3-11 compact
|
||||
const M11_BARRE = { rootStr: 6, offsets: [0, 0, 0, 0, 0, 0], fingers: [1, 1, 1, 1, 1, 1] } // one-finger m11
|
||||
const MAJ9_5 = { rootStr: 5, offsets: ['x', 0, -1, 1, 0, 'x'], fingers: [0, 2, 1, 4, 3, 0] } // R-3-7-9
|
||||
const MAJ7_5 = { rootStr: 5, offsets: ['x', 0, 2, 1, 2, 'x'], fingers: [0, 1, 3, 2, 4, 0] } // R-5-7-3
|
||||
const MAJ7_BARRE_6 = { rootStr: 6, offsets: [0, 2, 1, 1, 0, 0], fingers: [1, 4, 2, 3, 1, 1] } // E-shape maj7 (embellishment host)
|
||||
const DOM9_5 = { rootStr: 5, offsets: ['x', 0, -1, 0, 0, 0], fingers: [0, 2, 1, 3, 3, 3] } // R-3-♭7-9-5
|
||||
const DOM13_6 = { rootStr: 6, offsets: [0, 'x', 0, 1, 2, 'x'], fingers: [1, 0, 2, 3, 4, 0] } // R-♭7-3-13
|
||||
const NINESUS = { rootStr: 5, offsets: ['x', 0, 0, 0, 0, 0], fingers: [0, 1, 1, 1, 1, 1] } // R-4-♭7-9-5 (the 9sus barre)
|
||||
const HENDRIX = { rootStr: 5, offsets: ['x', 0, -1, 0, 1, 'x'], fingers: [0, 2, 1, 3, 4, 0] } // 7♯9
|
||||
const SIX9_5 = { rootStr: 5, offsets: ['x', 0, -1, -1, 0, 0], fingers: [0, 3, 1, 2, 4, 4] } // R-3-6-9-5 (Motown I-colour)
|
||||
const M6_4 = { rootStr: 4, offsets: ['x', 'x', 0, -2, 0, -2], fingers: [0, 0, 3, 1, 4, 2] } // R-♭3-6-R (the borrowed iv)
|
||||
const TOP3_MAJ = { rootStr: 1, offsets: ['x', 'x', 'x', 1, 0, 0], fingers: [0, 0, 0, 2, 1, 1] } // plain triad, top strings
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'Against keys-heavy neo-soul arrangements the guitar is a colourist: small rootless grips on the top strings, double-stop fills between vocal phrases, and chord stabs placed just behind the drums. Agree on extensions with the keys player, stay out of their octave, and treat silence as part of the part.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: 'Pluck and mute',
|
||||
rhythm: 'fingerstyle stabs + muted ghost 16ths',
|
||||
description: 'Pluck the grip with thumb and fingers, release fret pressure instantly for the staccato, fill between hits with muted ghost strums. Per-note dynamic control is why the genre is fingerstyle.',
|
||||
},
|
||||
{
|
||||
label: 'The neo-soul slide',
|
||||
rhythm: 'grip formed a half-step away, slid in on the beat',
|
||||
description: 'Assemble the full chord shape a half-step below (or above) the target, pluck, slide the whole grip in. The signature move — most common on the m9 and maj9 grips.',
|
||||
},
|
||||
{
|
||||
label: 'Mayfield hammer vocabulary',
|
||||
rhythm: 'one finger moves inside a held shape',
|
||||
description: 'Hold the barre, hammer single embellishments: 9→3 on the B string (A-shape), 5→6 on the B string (the My Girl move), ♭3→11 on the G string (minor shapes). Little Wing is this vocabulary at ballad tempo.',
|
||||
},
|
||||
{
|
||||
label: 'Cropper 6ths',
|
||||
rhythm: 'diatonic 6ths slid in from a fret below',
|
||||
description: 'Double-stop 6ths on the G+e string pair walking the scale — the Soul Man hook. One ladder per fill, then get out of the vocal\'s way.',
|
||||
},
|
||||
{
|
||||
label: 'The Dilla feel',
|
||||
rhythm: 'everything a hair behind the grid',
|
||||
description: 'Lay stabs slightly behind the drums and keep ghost 16ths even — displaced by less than a subdivision, drifting back across the phrase. Never rush a fill; "perfectly imperfect."',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'rnb-mediant-circle': [
|
||||
{
|
||||
label: 'm9 circle, slid into',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M9_5, extensions: ['9'], note: 'iii9 — slide in from a half-step below' },
|
||||
{ shape: M9_5, extensions: ['9'], note: 'vi9' },
|
||||
{ shape: M9_5, extensions: ['9'], note: 'ii9' },
|
||||
{ shape: DOM13_6, extensions: ['13'], note: 'V13' },
|
||||
],
|
||||
tips: 'One grip walks the whole circle — the move IS the slide into each new root. Keep every stab behind the beat; the drums are ahead of you on purpose.',
|
||||
},
|
||||
{
|
||||
label: 'm11 colour set',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M11_C, extensions: ['11'], note: 'iii11' },
|
||||
{ shape: M9_6, extensions: ['9'], note: 'vi9 — 9 on top' },
|
||||
{ shape: M11_C, extensions: ['11'], note: 'ii11' },
|
||||
{ shape: HENDRIX, extensions: ['#9'], note: 'V7♯9 — the soul exclamation' },
|
||||
],
|
||||
tips: 'The 11 grips are darker and hollower than the 9s — use this set on the verse, the m9 set on the hook. The ♯9 V is the once-per-chorus spice, not the default.',
|
||||
},
|
||||
],
|
||||
|
||||
'rnb-6251': [
|
||||
{
|
||||
label: 'Stevie cadence (9s and the 9sus)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M9_5, extensions: ['9'], note: 'vi9' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: 'II9 — the secondary dominant' },
|
||||
{ shape: NINESUS, extensions: ['b7', '9'], note: 'V9sus — one-finger barre, suspended sweetness' },
|
||||
{ shape: SIX9_5, extensions: ['6', '9'], note: 'I6/9 — resolve without a leading tone' },
|
||||
],
|
||||
tips: 'The 9sus never sharpens into a plain dominant — it melts. Resolve to the 6/9 rather than a maj7 and the cadence lands like a sigh instead of a full stop.',
|
||||
},
|
||||
{
|
||||
label: 'Verse set with the ♯9 lift',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M11_C, extensions: ['11'], note: 'vi11' },
|
||||
{ shape: HENDRIX, extensions: ['#9'], note: 'II7♯9 — grit before the suspension' },
|
||||
{ shape: NINESUS, extensions: ['b7', '9'], note: 'V9sus' },
|
||||
{ shape: TOP3_MAJ, note: 'plain triad on top — let the bass own the root' },
|
||||
],
|
||||
tips: 'Ending on a bare high triad after three extended chords is the dynamic trick: the simplest chord in the progression hits hardest because of what preceded it.',
|
||||
},
|
||||
],
|
||||
|
||||
'rnb-maj7-vamp': [
|
||||
{
|
||||
label: 'maj9 pair',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: 'Imaj9' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: 'IVmaj9 — same grip, five frets up (or string set over)' },
|
||||
],
|
||||
tips: 'Two grips, four bars, infinite patience. Vary the pluck pattern, not the harmony — and if a keys player holds these voicings, drop to double-stop 6ths fills instead.',
|
||||
},
|
||||
{
|
||||
label: 'Embellished barres (Mayfield/Hendrix)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ7_BARRE_6, note: 'Imaj7 — hammer 5→6 on the B string, 9→3 inside' },
|
||||
{ shape: MAJ7_5, note: 'IVmaj7 — answer with the A-shape hammers' },
|
||||
],
|
||||
tips: 'The chord is a house and the hammers are someone moving around inside it. One embellishment per bar maximum — Castles Made of Sand is mostly air.',
|
||||
},
|
||||
],
|
||||
|
||||
'rnb-dorian': [
|
||||
{
|
||||
label: "D'Angelo pair",
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M9_5, extensions: ['9'], note: 'i9' },
|
||||
{ shape: DOM9_5, extensions: ['9'], note: 'IV9 — the raised 6th lives here' },
|
||||
],
|
||||
tips: 'Same dyad as the funk vamp at two-thirds the tempo: drag every hit behind the kick, ghost the 16ths unevenly, and let the pocket wobble — that wobble is the genre.',
|
||||
},
|
||||
{
|
||||
label: 'Barre wash (m11 + 13)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: M11_BARRE, extensions: ['11'], note: 'i11 — one finger, lay it across' },
|
||||
{ shape: DOM13_6, extensions: ['13'], note: 'IV13' },
|
||||
],
|
||||
tips: 'The lazy-looking version that sounds the deepest. Half-press the barre between hits for the pitchless scratch — texture first, harmony second.',
|
||||
},
|
||||
],
|
||||
|
||||
'rnb-gospel-amen': [
|
||||
{
|
||||
label: 'The Amen cadence',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ7_5, note: 'IVmaj7' },
|
||||
{ shape: M6_4, note: 'iv6 — the borrowed minor, one semitone falls' },
|
||||
{ shape: MAJ9_5, extensions: ['9'], note: 'Imaj9 — home, with the 9 glowing on top' },
|
||||
],
|
||||
tips: 'Voice-lead the 3rd of the IV down a semitone and hold everything else — the whole cadence is one finger\'s journey. Slow it down further than feels right.',
|
||||
},
|
||||
{
|
||||
label: 'Barre version with the high iv',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: MAJ7_BARRE_6, note: 'IVmaj7' },
|
||||
{ shape: M6_4, note: 'iv6 on the top four strings' },
|
||||
{ shape: MAJ7_5, note: 'Imaj7' },
|
||||
],
|
||||
tips: 'For the gospel walk, insert a passing diminished between any two diatonic chords a step apart (I→♯i°→ii) — same borrowed-from-the-choir logic as the iv.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'i9 / m9 vamps', scale: 'dorian', why: 'The neo-soul default — Brown Sugar is pure E Dorian. ("Neo-soul scale" in lesson jargon ≈ minor pentatonic + the 9; an alias, not a different scale.)' },
|
||||
{ over: 'maj7 / maj9 vamps', scale: 'major', why: 'Major pentatonic with the 9th and 6th emphasized — land on colours, not roots.' },
|
||||
{ over: 'V9sus / II9', scale: 'mixolydian', why: 'Mixolydian of each dominant; over the 9sus avoid the 3rd entirely — the suspension is the point.' },
|
||||
{ over: 'i–iv minor vamps', scale: 'minor', why: 'Aeolian when the iv is minor (Didn\'t Cha Know) — the ♭6 differentiates it from the Dorian vamps.' },
|
||||
],
|
||||
targetNotes:
|
||||
'Target the 9ths and 13ths, never the roots — over a m9 land on its 9, over a 13 land on its 13. The melodic vocabulary is double-stops (3rds, 4ths, 6ths) slid in from a fret below, and pentatonics stacked in 4ths for the modern sound.',
|
||||
licks: [
|
||||
{
|
||||
over: 'rnb-maj7-vamp',
|
||||
description: 'Curtis Mayfield figure (standard-tuning adaptation — Mayfield tuned to open F♯): hammer cells inside the held shape, landing on the 3rd and the 9th. The direct ancestor of Little Wing.',
|
||||
tab: ' Figure A (land on the 3rd) Figure B (land on the 9th→7th)\ne|---5h7p5--------| e|--5-------5------5------\nB|----------7-----| B|-----5h7-----p5---------\nG|----------------| G|---------------------6--\n A B A F# (A) E F# E C# (in D major)',
|
||||
source: 'Premier Guitar "Digging Deeper: Curtis Mayfield"; JustinGuitar "Mayfield & Hendrix Style Fills" (RF-101)',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'rnb',
|
||||
label: 'R&B / Neo-soul',
|
||||
feel: 'laid-back 16th',
|
||||
tempoRange: [65, 100],
|
||||
character: 'Extended chords as the baseline (9ths are the floor, not the ceiling), grips slid into from a half-step away, and everything placed slightly behind the drums — the Dilla feel: the precise right amount of wrong.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'rnb-mediant-circle',
|
||||
name: 'Mediant circle (iii7–vi7–ii7–V)',
|
||||
rn: ['iii7', 'vi7', 'ii7', 'V13'],
|
||||
degrees: [4, 9, 2, 7],
|
||||
qualities: ['min7', 'min7', 'min7', 'dom7'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['September — Earth, Wind & Fire (rotation family)', 'the soul turnaround started from the iii'],
|
||||
tip: 'The 1-6-2-5 family entered from the mediant — home is implied for three bars before the V finally points at it. Neo-soul lives in that deferral.',
|
||||
},
|
||||
{
|
||||
id: 'rnb-6251',
|
||||
name: 'Soul 6-2-5-1 (with dominant II)',
|
||||
rn: ['vi7', 'II9', 'V9sus', 'I'],
|
||||
degrees: [9, 2, 7, 0],
|
||||
qualities: ['min7', 'dom7', 'sus4', 'maj'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ["Isn't She Lovely — Stevie Wonder"],
|
||||
tip: 'The II is a secondary dominant (not the polite ii), and the V arrives as a 9sus — suspended, never quite dominant, melting into the I. Stevie\'s whole cadence language in four chords.',
|
||||
},
|
||||
{
|
||||
id: 'rnb-maj7-vamp',
|
||||
name: 'Two-chord maj7 vamp (Imaj7–IVmaj7)',
|
||||
rn: ['Imaj7', 'IVmaj7'],
|
||||
degrees: [0, 5],
|
||||
qualities: ['maj7', 'maj7'],
|
||||
bars: [2, 2],
|
||||
mode: 'major',
|
||||
songs: ['Waiting in Vain — Bob Marley', "Cruisin' — Smokey Robinson (I–ii7 variant)"],
|
||||
tip: 'Two lush chords trading forever — the song is the texture. The same vamp underpins half of modern bedroom R&B; colour it differently every two bars.',
|
||||
},
|
||||
{
|
||||
id: 'rnb-dorian',
|
||||
name: 'Dorian vamp (i7–IV9, D\'Angelo school)',
|
||||
rn: ['i9', 'IV9'],
|
||||
degrees: [0, 5],
|
||||
qualities: ['min7', 'dom7'],
|
||||
bars: [1, 1],
|
||||
mode: 'dorian',
|
||||
songs: ["Spanish Joint — D'Angelo", "Didn't Cha Know — Erykah Badu (i–iv minor variant)", "Brown Sugar — D'Angelo (E Dorian loop)"],
|
||||
tip: 'The IV9 carries the raised 6th that makes it Dorian — the same pair as the funk vamp, slowed to 70 BPM and dragged behind the beat.',
|
||||
},
|
||||
{
|
||||
id: 'rnb-gospel-amen',
|
||||
name: 'Gospel Amen (IV–iv–I)',
|
||||
rn: ['IVmaj7', 'iv6', 'Imaj7'],
|
||||
degrees: [5, 5, 0],
|
||||
qualities: ['maj7', 'min6', 'maj7'],
|
||||
bars: [1, 1, 2],
|
||||
mode: 'major',
|
||||
songs: ['the gospel "Amen" cadence', 'countless soul ballad turnarounds (borrowed iv)'],
|
||||
tip: 'The IV turns minor on its way home — borrowed from the parallel minor, the single most-borrowed chord in soul. One semitone (the 3rd of the IV falling) does all the work.',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,212 @@
|
||||
// Rock guitar pack. Shapes verified by note-spelling against: guitarplayer.com
|
||||
// (Malcolm Young, Hendrix rhythm rules), musicradar.com (Keith Richards grips,
|
||||
// Andy Summers add9), appliedguitartheory.com (triads on string sets),
|
||||
// fundamental-changes.com (open-G translations), justinguitar.com (unison bends).
|
||||
|
||||
// Power chords — the rock engine room. omit3: works over major or minor.
|
||||
const P5R_6 = { rootStr: 6, offsets: [0, 2, 2, 'x', 'x', 'x'], fingers: [1, 3, 4, 0, 0, 0] } // R-5-R
|
||||
const P5R_5 = { rootStr: 5, offsets: ['x', 0, 2, 2, 'x', 'x'], fingers: [0, 1, 3, 4, 0, 0] }
|
||||
|
||||
// Full barres.
|
||||
const E_BARRE_MAJ = { rootStr: 6, offsets: [0, 2, 2, 1, 0, 0], fingers: [1, 3, 4, 2, 1, 1] }
|
||||
const A_BARRE_MAJ = { rootStr: 5, offsets: ['x', 0, 2, 2, 2, 0], fingers: [0, 1, 2, 3, 4, 1] }
|
||||
const E_BARRE_MIN = { rootStr: 6, offsets: [0, 2, 2, 0, 0, 0], fingers: [1, 3, 4, 1, 1, 1] }
|
||||
|
||||
// Open-position big chords (Malcolm Young) — render only when the chord root matches.
|
||||
const OPEN_A = { onlyRoot: 9, frets: ['x', 0, 2, 2, 2, 0], fingers: [0, 0, 1, 2, 3, 0] }
|
||||
const OPEN_G = { onlyRoot: 7, frets: [3, 2, 0, 0, 0, 3], fingers: [2, 1, 0, 0, 0, 3] }
|
||||
const OPEN_D = { onlyRoot: 2, frets: ['x', 'x', 0, 2, 3, 2], fingers: [0, 0, 0, 1, 3, 2] }
|
||||
|
||||
// Triads on the top string sets — the second-guitar register.
|
||||
const TRIAD_GBE_MAJ = { rootStr: 3, offsets: ['x', 'x', 'x', 0, 0, -2], fingers: [0, 0, 0, 3, 4, 1] } // R-3-5
|
||||
const TRIAD_GBE_MAJ_INV1 = { rootStr: 1, offsets: ['x', 'x', 'x', 1, 0, 0], fingers: [0, 0, 0, 2, 1, 1] } // 3-5-R
|
||||
const TRIAD_GBE_MIN_INV1 = { rootStr: 1, offsets: ['x', 'x', 'x', 0, 0, 0], fingers: [0, 0, 0, 1, 1, 1] } // ♭3-5-R barre
|
||||
const TRIAD_DGB_MAJ = { rootStr: 4, offsets: ['x', 'x', 0, -1, -2, 'x'], fingers: [0, 0, 3, 2, 1, 0] } // R-3-5
|
||||
const TRIAD_DGB_MIN = { rootStr: 4, offsets: ['x', 'x', 0, -2, -2, 'x'], fingers: [0, 0, 3, 1, 1, 0] } // R-♭3-5
|
||||
|
||||
// Hendrix/Frusciante thumb-over E-shape — A string muted, fingers free to embellish.
|
||||
const THUMB_E = { rootStr: 6, offsets: [0, 'x', 2, 1, 0, 0], fingers: [0, 0, 3, 2, 1, 1] }
|
||||
|
||||
// Police-style add9 stretches (clean arpeggio picking).
|
||||
const ADD9_ARP = { rootStr: 6, offsets: [0, 'x', 2, 1, 0, 2], fingers: [1, 0, 3, 2, 1, 4] } // R-R-3-5-9
|
||||
const MADD9_ARP = { rootStr: 6, offsets: [0, 'x', 2, 0, 0, 2], fingers: [1, 0, 3, 1, 1, 4] } // R-R-♭3-5-9
|
||||
|
||||
export default {
|
||||
styleIntro:
|
||||
'Rock rhythm guitar is arrangement: the same chords played as muted chugs, open-string detonations, or high triad shimmer depending on the section. With two guitars, split the register — one low and thick, one high and thin — and never share an octave.',
|
||||
|
||||
comping: [
|
||||
{
|
||||
label: 'Straight-8ths downstroke drive',
|
||||
rhythm: '♪♪♪♪♪♪♪♪ all downstrokes',
|
||||
description: 'Relentless eighth-note downpicks on power chords, slight palm mute, no gaps — the punk/Ramones engine. Only works if the other guitar stays sparse or high.',
|
||||
},
|
||||
{
|
||||
label: 'Malcolm Young space',
|
||||
rhythm: 'accent hits + deliberate rests',
|
||||
description: 'Big open-position chords hit hard with silence between — the rests ARE the hook. Low gain, all downstrokes, let the band breathe.',
|
||||
},
|
||||
{
|
||||
label: 'Palm-muted chug with pushes',
|
||||
rhythm: 'muted 8ths/16ths, lift on the and-of-4',
|
||||
description: 'Muted root chug; lift the palm for full-ring accents on anticipations. High note-density, low spectral density — leaves room above.',
|
||||
},
|
||||
{
|
||||
label: 'Keith Richards sus figure',
|
||||
rhythm: 'hammer sus4/6 on the offbeats',
|
||||
description: 'Hold the A-shape barre, hammer the sus4 (B string +1) and the 6th (top string +2) on the "ands", pull back to the triad. The Start Me Up / Brown Sugar move.',
|
||||
},
|
||||
{
|
||||
label: 'Clean add9 arpeggio picking',
|
||||
rhythm: 'steady picked 8ths, light mute',
|
||||
description: 'Hold the add9 stretch and pick through it string by string — the Every Breath You Take verse texture everyone else lays out under.',
|
||||
},
|
||||
],
|
||||
|
||||
plays: {
|
||||
'rock-mixo-vamp': [
|
||||
{
|
||||
label: 'Big open chords (Malcolm)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: OPEN_A, note: 'I — open A, all six strings of it' },
|
||||
{ shape: OPEN_G, note: '♭VII — open G' },
|
||||
{ shape: OPEN_D, note: 'IV — open D' },
|
||||
],
|
||||
tips: 'The open-chord version lives in the key of A (A–G–D). Hit hard, then shut up — the space between hits is the AC/DC trick. In other keys, use the barre or triad play.',
|
||||
},
|
||||
{
|
||||
label: 'Second-guitar triads, top strings',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TRIAD_GBE_MAJ, note: 'I up high' },
|
||||
{ shape: TRIAD_GBE_MAJ_INV1, note: '♭VII — nearest inversion, no jump' },
|
||||
{ shape: TRIAD_GBE_MAJ, note: 'IV' },
|
||||
],
|
||||
tips: 'This is the guitar-2 part: triads above fret 5 while someone else owns the low end. Move to the nearest inversion, not the same shape up the neck.',
|
||||
},
|
||||
],
|
||||
|
||||
'rock-145': [
|
||||
{
|
||||
label: 'Barres, straight-8ths drive',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: E_BARRE_MAJ, note: 'I — 6th-string root' },
|
||||
{ shape: A_BARRE_MAJ, note: 'IV — same fret, root string up' },
|
||||
{ shape: A_BARRE_MAJ, note: 'V — two frets up' },
|
||||
],
|
||||
tips: 'Same I/IV/V geometry as a blues: one position, two grips. Verse = palm-muted, chorus = open. The dynamic contrast is the part.',
|
||||
},
|
||||
{
|
||||
label: 'Keith sus figure on the IV and V',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: A_BARRE_MAJ, note: 'hammer the sus4 (B string +1) on the and-beats' },
|
||||
{ shape: A_BARRE_MAJ, note: 'same figure — sus4 and 6th (top string +2) trading' },
|
||||
{ shape: A_BARRE_MAJ, note: 'resolve the hammer INTO the change' },
|
||||
],
|
||||
tips: 'The grip stays still; two fingers do the talking. Swing the hammers slightly even over straight drums — that lag is the Stones feel.',
|
||||
},
|
||||
],
|
||||
|
||||
'rock-minor-descent': [
|
||||
{
|
||||
label: 'Barres walking down the 6th string',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: E_BARRE_MIN, note: 'i' },
|
||||
{ shape: E_BARRE_MAJ, note: '♭VII — two frets down' },
|
||||
{ shape: E_BARRE_MAJ, note: '♭VI — two more' },
|
||||
{ shape: E_BARRE_MAJ, note: 'V — one more half-step, the borrowed pull home' },
|
||||
],
|
||||
tips: 'The whole progression is the low-E string walking down: root, -2, -4, -5 frets. Let the audience hear that bassline inside your chords.',
|
||||
},
|
||||
{
|
||||
label: 'High triads (Watchtower texture)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: TRIAD_DGB_MIN, note: 'i — middle-string triad' },
|
||||
{ shape: TRIAD_DGB_MAJ, note: '♭VII' },
|
||||
{ shape: TRIAD_DGB_MAJ, note: '♭VI' },
|
||||
{ shape: TRIAD_DGB_MAJ, note: 'V' },
|
||||
],
|
||||
tips: 'Strum these as 16th-note skanks or let them ring — either way you\'re the texture, not the foundation. Classic when keys or a second guitar hold the low end.',
|
||||
},
|
||||
],
|
||||
|
||||
'rock-axis': [
|
||||
{
|
||||
label: 'Power-chord chug',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: P5R_6, omit3: true, note: 'I' },
|
||||
{ shape: P5R_6, omit3: true, note: 'V' },
|
||||
{ shape: P5R_6, omit3: true, note: 'vi — same shape; the bass note carries the minor' },
|
||||
{ shape: P5R_5, omit3: true, note: 'IV — 5th-string root keeps you in position' },
|
||||
],
|
||||
tips: 'No 3rds anywhere — major and minor come from the root motion, which is why one shape plays the whole loop. Save the full barres for the last chorus.',
|
||||
},
|
||||
{
|
||||
label: 'Add9 arpeggio verse (Police)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: ADD9_ARP, extensions: ['9'], note: 'pick through, low to high, let it ring' },
|
||||
{ shape: ADD9_ARP, extensions: ['9'], note: '' },
|
||||
{ shape: MADD9_ARP, extensions: ['9'], note: 'minor add9 — one finger lifts' },
|
||||
{ shape: ADD9_ARP, extensions: ['9'], note: '' },
|
||||
],
|
||||
tips: 'It\'s a stretch — practise the grip high on the neck first, then move down. Light palm mute, clean tone, metronomic 8ths: the part is a clock, not a riff.',
|
||||
},
|
||||
],
|
||||
|
||||
'rock-riff-cell': [
|
||||
{
|
||||
label: 'Power chords (Smoke on the Water)',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: P5R_6, omit3: true, note: 'i' },
|
||||
{ shape: P5R_6, omit3: true, note: '♭III — three frets up, same shape' },
|
||||
{ shape: P5R_6, omit3: true, note: 'IV — two more' },
|
||||
],
|
||||
tips: 'Root–♭3–4 on one string is the riff; the power chords are it harmonised. The famous version is two-note 4ths on the middle strings — same cell.',
|
||||
},
|
||||
{
|
||||
label: 'Thumb-over with embellishments',
|
||||
level: 'intermediate',
|
||||
chords: [
|
||||
{ shape: E_BARRE_MIN, note: 'i' },
|
||||
{ shape: THUMB_E, note: '♭III — thumb takes the bass, hammer the sus4 (G string +1)' },
|
||||
{ shape: THUMB_E, note: 'IV — add the 9 with the pinky (top string +2)' },
|
||||
],
|
||||
tips: 'The Hendrix/Frusciante device: thumb frets the root, the freed fingers decorate inside the chord. The Dorian IV is where the colour lives — lean on it.',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
improv: {
|
||||
scales: [
|
||||
{ over: 'i / I', scale: 'minor', why: 'Minor pentatonic box 1 plus the ♭5 (blues scale) is the rock default over almost everything.' },
|
||||
{ over: 'I (country-rock)', scale: 'major', why: 'Major pentatonic for the Skynyrd/Allman sweetness — same box shape three frets down from the minor one.' },
|
||||
{ over: 'I–♭VII–IV', scale: 'mixolydian', why: 'Major pentatonic + the ♭7 and 4. The ♭7 of the key IS the root of the ♭VII chord — free target note.' },
|
||||
{ over: 'i–♭VII–♭VI', scale: 'minor', why: 'Natural minor (Aeolian): minor pentatonic + the 2 and ♭6 for the stepwise colour.' },
|
||||
{ over: 'i–♭III–IV', scale: 'dorian', why: 'The major IV asks for Dorian — minor pentatonic + the natural 6.' },
|
||||
],
|
||||
targetNotes:
|
||||
'Root and 5th are safe everywhere; the 3rd of the chord of the moment is the pro move. Double-stops are rock\'s vocabulary: Berry 4ths on the top two strings, unison bends, and the quarter-step blues curl on the ♭3.',
|
||||
licks: [
|
||||
{
|
||||
over: 'rock-145',
|
||||
description: 'Chuck Berry double-stop intro figure (Johnny B. Goode device, shown in A): one-finger barre on the top two strings, slid in from below, hammered in triplets.',
|
||||
tab: 'e|--5--5--5--5--5--5--5--5--5--5--5--5--\nB|3/5--5--5--5--5--5--5--5--5--5--5--5--\n (slide in; A on e + E on B = root+5th of A)',
|
||||
source: 'Chuck Berry, "Johnny B. Goode" (1958); JustinGuitar song lesson SB-425',
|
||||
},
|
||||
{
|
||||
over: 'rock-axis',
|
||||
description: 'Box-1 unison bend cliché: bend the B-string ♭7 a whole step up to the root against the same note held on the top string (Hendrix "Purple Haze" outro, Page, May).',
|
||||
tab: 'e|---5------5------5------5----\nB|--8b10---8b10---8b10---8b10--\n (G bent to A against the A on e-string 5)',
|
||||
source: 'JustinGuitar unison bend technique BL-607; Happy Bluesman unison bends',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
id: 'rock',
|
||||
label: 'Rock',
|
||||
feel: 'straight',
|
||||
tempoRange: [80, 180],
|
||||
character: 'Straight eighths, big chords, and arrangement-as-dynamics: the same progression whispered in the verse and detonated in the chorus.',
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
export default [
|
||||
{
|
||||
id: 'rock-mixo-vamp',
|
||||
name: 'Mixolydian vamp (I–♭VII–IV)',
|
||||
rn: ['I', '♭VII', 'IV'],
|
||||
degrees: [0, 10, 5],
|
||||
qualities: ['maj', 'maj', 'maj'],
|
||||
bars: [2, 1, 1],
|
||||
mode: 'mixolydian',
|
||||
songs: ['Sweet Home Alabama — Lynyrd Skynyrd', 'Sympathy for the Devil — Rolling Stones'],
|
||||
tip: 'The ♭VII is the rock sound — borrowed flat-seven instead of the polite V. (Sweet Home Alabama famously also parses as V–IV–I; the band played it I-centred.)',
|
||||
},
|
||||
{
|
||||
id: 'rock-145',
|
||||
name: 'I–IV–V',
|
||||
rn: ['I', 'IV', 'V'],
|
||||
degrees: [0, 5, 7],
|
||||
qualities: ['maj', 'maj', 'maj'],
|
||||
bars: [2, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['Wild Thing — The Troggs', 'Twist and Shout — The Beatles', 'La Bamba'],
|
||||
tip: 'Three chords, no slack: the arrangement does the work. Decide per section how big each hit is — that decision is the song.',
|
||||
},
|
||||
{
|
||||
id: 'rock-minor-descent',
|
||||
name: 'Minor descent (i–♭VII–♭VI–V)',
|
||||
rn: ['i', '♭VII', '♭VI', 'V'],
|
||||
degrees: [0, 10, 8, 7],
|
||||
qualities: ['min', 'maj', 'maj', 'maj'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'minor',
|
||||
songs: ['Hit the Road Jack — Ray Charles', 'Sultans of Swing — Dire Straits (chorus tail)', 'All Along the Watchtower (without the V)'],
|
||||
tip: 'A staircase to the V: the major V is borrowed from harmonic minor and is what yanks the loop home. Drop it and you get the floatier Watchtower version.',
|
||||
},
|
||||
{
|
||||
id: 'rock-axis',
|
||||
name: 'Axis (I–V–vi–IV)',
|
||||
rn: ['I', 'V', 'vi', 'IV'],
|
||||
degrees: [0, 7, 9, 5],
|
||||
qualities: ['maj', 'maj', 'min', 'maj'],
|
||||
bars: [1, 1, 1, 1],
|
||||
mode: 'major',
|
||||
songs: ['With or Without You — U2', 'Let It Be — The Beatles'],
|
||||
tip: 'The same four chords carry a whisper or a stadium — rock\'s job is choosing which. Start the loop on the vi for the dark version.',
|
||||
},
|
||||
{
|
||||
id: 'rock-riff-cell',
|
||||
name: 'Riff cell (i–♭III–IV)',
|
||||
rn: ['i', '♭III', 'IV'],
|
||||
degrees: [0, 3, 5],
|
||||
qualities: ['min', 'maj', 'maj'],
|
||||
bars: [2, 1, 1],
|
||||
mode: 'dorian',
|
||||
songs: ['Smoke on the Water — Deep Purple', 'Iron Man — Black Sabbath (spine of the riff)'],
|
||||
tip: 'Root–♭3–4 is THE rock riff cell, lifted straight from minor pentatonic. The major IV makes it Dorian — the app\'s Dorian mode lights up exactly these notes.',
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,873 @@
|
||||
import { NOTES, CHORD_TYPES } from './theory'
|
||||
|
||||
// ─── Parse helper (self-contained, mirrors voicings.js) ───────────────────────
|
||||
export function parseChord(name) {
|
||||
if (!name) return null
|
||||
const FLAT = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B']
|
||||
let rest = name
|
||||
let root = rest.length > 1 && (rest[1] === '#' || rest[1] === 'b')
|
||||
? (rest = rest.slice(2), name.slice(0, 2))
|
||||
: (rest = rest.slice(1), name.slice(0, 1))
|
||||
let rootPc = NOTES.indexOf(root)
|
||||
if (rootPc === -1) rootPc = FLAT.indexOf(root)
|
||||
if (rootPc === -1) return null
|
||||
const suffixMap = {
|
||||
'': 'maj', 'm': 'min', 'min': 'min', 'maj': 'maj',
|
||||
'7': 'dom7', 'maj7': 'maj7', 'm7': 'min7', 'min7': 'min7',
|
||||
'dim': 'dim', 'dim7': 'dim7', 'm7b5': 'half_dim', 'ø': 'half_dim',
|
||||
'aug': 'aug', '+': 'aug',
|
||||
'sus4': 'sus4', 'sus2': 'sus2',
|
||||
'6': 'maj6', 'm6': 'min6', 'add9': 'add9',
|
||||
}
|
||||
return { rootPc, type: suffixMap[rest] ?? 'maj' }
|
||||
}
|
||||
|
||||
function chordName(rootPc, type) {
|
||||
return NOTES[rootPc] + (CHORD_TYPES[type]?.suffix ?? '')
|
||||
}
|
||||
|
||||
// ─── Famous progressions ──────────────────────────────────────────────────────
|
||||
// degrees[] — semitone offsets from tonic
|
||||
// qualities[] — chord type keys (CHORD_TYPES) for each degree
|
||||
// mode — the mode this progression is naturally written in
|
||||
// styleVariations — how genre players re-harmonise these chords
|
||||
|
||||
export const FAMOUS_PROGRESSIONS = [
|
||||
{
|
||||
id: 'axis',
|
||||
name: 'Axis Progression',
|
||||
pattern: 'I – V – vi – IV',
|
||||
degrees: [0, 7, 9, 5],
|
||||
qualities: ['maj', 'maj', 'min', 'maj'],
|
||||
mode: 'major',
|
||||
genre: ['Pop', 'Rock'],
|
||||
songs: ['Let It Be — Beatles', 'With or Without You — U2', 'Someone Like You — Adele', "Don't Stop Believin' — Journey", 'Wonderwall — Oasis', 'Demons — Imagine Dragons'],
|
||||
description: 'The defining progression of modern pop. Works in every genre and tempo.',
|
||||
tip: 'Try starting on the vi instead — suddenly it feels darker and more yearning.',
|
||||
styleVariations: [
|
||||
{ label: 'Jazz', pattern: 'Imaj7 – V7 – vim7 – IVmaj7', qualities: ['maj7','dom7','min7','maj7'] },
|
||||
{ label: 'Soul', pattern: 'Imaj9 – V9 – vim9 – IVmaj9', qualities: ['maj7','dom7','min7','maj7'] },
|
||||
{ label: 'Blues', pattern: 'I7 – V7 – vi7 – IV7', qualities: ['dom7','dom7','dom7','dom7'] },
|
||||
{ label: 'Ambient', pattern: 'Isus2 – Vsus2 – vim7 – IVadd9', qualities: ['sus2','sus2','min7','add9'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'fifties',
|
||||
name: '50s / Doo-Wop',
|
||||
pattern: 'I – vi – IV – V',
|
||||
degrees: [0, 9, 5, 7],
|
||||
qualities: ['maj', 'min', 'maj', 'maj'],
|
||||
mode: 'major',
|
||||
genre: ['Pop', 'Doo-Wop', 'Rock'],
|
||||
songs: ['Stand By Me — Ben E. King', 'Earth Angel', 'Blue Moon', 'Unchained Melody', 'Every Breath You Take — Police'],
|
||||
description: 'The doo-wop backbone. Sweet, nostalgic, universally singable and timeless.',
|
||||
tip: "The vi chord is the emotional pivot — it's the same root as in the Axis, just a different order.",
|
||||
styleVariations: [
|
||||
{ label: 'Jazz', pattern: 'Imaj7 – vim7 – IVmaj7 – V7', qualities: ['maj7','min7','maj7','dom7'] },
|
||||
{ label: 'Soul', pattern: 'I6 – vim7 – IV – V7sus4', qualities: ['maj6','min7','maj','sus4'] },
|
||||
{ label: 'Funk', pattern: 'Imaj9 – vim9 – IV9 – V9', qualities: ['maj7','min7','dom7','dom7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'canon',
|
||||
name: 'Canon / Pachelbel',
|
||||
pattern: 'I – V – vi – iii – IV – I – IV – V',
|
||||
degrees: [0, 7, 9, 4, 5, 0, 5, 7],
|
||||
qualities: ['maj','maj','min','min','maj','maj','maj','maj'],
|
||||
mode: 'major',
|
||||
genre: ['Classical', 'Pop', 'Rock'],
|
||||
songs: ['Canon in D — Pachelbel', 'Basket Case — Green Day', 'Go West — Pet Shop Boys', 'Graduation — Vitamin C'],
|
||||
description: 'Baroque timelessness. The descending bass line creates inevitable forward motion.',
|
||||
tip: 'The iii chord is the secret ingredient — it bridges vi and IV with aristocratic weight.',
|
||||
styleVariations: [
|
||||
{ label: 'Rock', pattern: 'Power chords all the way down', qualities: [] },
|
||||
{ label: 'Neo-soul',pattern: 'Imaj9 – V9 – vim9 – iiim7 – IVmaj9', qualities: ['maj7','dom7','min7','min7','maj7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'two_five_one',
|
||||
name: 'ii – V – I (Jazz)',
|
||||
pattern: 'iim7 – V7 – Imaj7',
|
||||
degrees: [2, 7, 0],
|
||||
qualities: ['min7', 'dom7', 'maj7'],
|
||||
mode: 'major',
|
||||
genre: ['Jazz', 'Bossa Nova'],
|
||||
songs: ['Autumn Leaves', 'All The Things You Are', 'Fly Me To The Moon', 'The Girl From Ipanema', 'Misty'],
|
||||
description: 'The bedrock of jazz harmony. The tritone in V7 resolves to I with beautiful tension.',
|
||||
tip: 'The ii chord pre-resolves the V — together they create an inevitable pull to the I.',
|
||||
styleVariations: [
|
||||
{ label: 'Bossa', pattern: 'iim7 – V7(9) – Imaj9', qualities: ['min7','dom7','maj7'] },
|
||||
{ label: 'Bebop', pattern: 'iim7 – V7(♭9) – Imaj7(#11)', qualities: ['min7','dom7','maj7'] },
|
||||
{ label: 'Modal', pattern: 'im7 – IV7 (Dorian vamp)', qualities: ['min7','dom7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'blues_12',
|
||||
name: '12-Bar Blues',
|
||||
pattern: 'I – I – I – I – IV – IV – I – I – V – IV – I – V',
|
||||
degrees: [0, 0, 0, 0, 5, 5, 0, 0, 7, 5, 0, 7],
|
||||
qualities: ['dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7','dom7'],
|
||||
mode: 'major',
|
||||
genre: ['Blues', 'Rock', 'Jazz'],
|
||||
songs: ['Johnny B. Goode — Chuck Berry', 'Pride & Joy — SRV', 'Crossroads — Robert Johnson', 'Hound Dog', 'Folsom Prison Blues — Cash'],
|
||||
description: 'The foundation of rock and blues. Master this and you can jam with anyone on Earth.',
|
||||
tip: 'All three chords are dominant 7ths — that dissonance is what makes blues feel so restless.',
|
||||
styleVariations: [
|
||||
{ label: 'Shuffle', pattern: 'I7 – IV7 – V7 with shuffle rhythm', qualities: ['dom7','dom7','dom7'] },
|
||||
{ label: 'Jazz', pattern: 'Imaj7 – IV7 – iim7 – V7 quick changes', qualities: ['maj7','dom7','min7','dom7'] },
|
||||
{ label: 'Minor', pattern: 'im7 – ivm7 – vm7 (minor blues)', qualities: ['min7','min7','min7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'andalusian',
|
||||
name: 'Andalusian Cadence',
|
||||
pattern: 'i – ♭VII – ♭VI – V',
|
||||
degrees: [0, 10, 8, 7],
|
||||
qualities: ['min', 'maj', 'maj', 'maj'],
|
||||
mode: 'minor',
|
||||
genre: ['Flamenco', 'Rock', 'Classical'],
|
||||
songs: ['Stairway to Heaven intro — Led Zeppelin', 'Hit the Road Jack', 'Sultans of Swing — Dire Straits', 'White Christmas'],
|
||||
description: 'Descending bass line creates unstoppable forward motion. Timeless, dramatic, inevitable.',
|
||||
tip: 'The final V chord (major) is the harmonic surprise in a minor context — forces resolution.',
|
||||
styleVariations: [
|
||||
{ label: 'Flamenco', pattern: 'im – ♭VII – ♭VI – V7', qualities: ['min','maj','maj','dom7'] },
|
||||
{ label: 'Rock', pattern: 'im5 – ♭VII5 – ♭VI5 – V5 (power)', qualities: ['min','maj','maj','maj'] },
|
||||
{ label: 'Jazz', pattern: 'im(maj7) – ♭VIImaj7 – ♭VImaj7 – V7(#9)', qualities: ['min7','maj7','maj7','dom7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'minor_anthem',
|
||||
name: 'Minor Anthem',
|
||||
pattern: 'i – ♭VI – ♭III – ♭VII',
|
||||
degrees: [0, 8, 3, 10],
|
||||
qualities: ['min', 'maj', 'maj', 'maj'],
|
||||
mode: 'minor',
|
||||
genre: ['Rock', 'Pop', 'Metal'],
|
||||
songs: ['Numb — Linkin Park', 'In The End — Linkin Park', 'Boulevard of Broken Dreams — Green Day', 'Creep — Radiohead', 'Smells Like Teen Spirit — Nirvana'],
|
||||
description: 'The anthem of angst. Powerful, relentless, emotionally direct.',
|
||||
tip: 'Every chord is major except the tonic — the contrast makes the i feel even more desperate.',
|
||||
styleVariations: [
|
||||
{ label: 'Stripped', pattern: 'im7 – ♭VImaj7 – ♭IIImaj7 – ♭VIImaj7', qualities: ['min7','maj7','maj7','maj7'] },
|
||||
{ label: 'Epic', pattern: 'im – ♭VI – ♭III – ♭VII with sus2 variants', qualities: ['min','maj','maj','maj'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'minor_oscillate',
|
||||
name: 'Minor Oscillation',
|
||||
pattern: 'i – ♭VII – ♭VI – ♭VII',
|
||||
degrees: [0, 10, 8, 10],
|
||||
qualities: ['min', 'maj', 'maj', 'maj'],
|
||||
mode: 'minor',
|
||||
genre: ['Rock', 'Folk', 'Pop'],
|
||||
songs: ['All Along the Watchtower — Dylan/Hendrix', "Knockin' on Heaven's Door — Dylan", 'Pumped Up Kicks — Foster the People', 'Africa — Toto'],
|
||||
description: 'The ♭VII oscillates back and forth — creates hypnotic looping energy.',
|
||||
tip: 'Works as a 2-bar vamp (i – ♭VII) or a full 4-bar loop. The ♭VI adds breathing room.',
|
||||
styleVariations: [
|
||||
{ label: 'Folk', pattern: 'im – ♭VII – ♭VI – ♭VII fingerpicked', qualities: ['min','maj','maj','maj'] },
|
||||
{ label: 'Rock', pattern: 'im – ♭VII – ♭VI power chords', qualities: ['min','maj','maj','maj'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'mixolydian',
|
||||
name: 'Mixolydian Rock',
|
||||
pattern: 'I – ♭VII – IV',
|
||||
degrees: [0, 10, 5],
|
||||
qualities: ['maj', 'maj', 'maj'],
|
||||
mode: 'major',
|
||||
genre: ['Rock', 'Folk', 'Celtic'],
|
||||
songs: ['Sweet Home Alabama — Lynyrd Skynyrd', 'La Grange — ZZ Top', 'Werewolves of London — Warren Zevon', 'Norwegian Wood — Beatles'],
|
||||
description: 'The ♭VII chord defines Mixolydian mode. Swagger and swagger only.',
|
||||
tip: 'In standard major, the VII is diminished. Flattening it to ♭VII gives you a major chord — that shift is everything.',
|
||||
styleVariations: [
|
||||
{ label: 'Celtic', pattern: 'I – ♭VII – IV – I alternating', qualities: ['maj','maj','maj','maj'] },
|
||||
{ label: 'Funk', pattern: 'I9 – ♭VII9 – IV9 dominant 9ths', qualities: ['dom7','dom7','dom7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'dorian_vamp',
|
||||
name: 'Dorian Vamp',
|
||||
pattern: 'i – IV',
|
||||
degrees: [0, 5],
|
||||
qualities: ['min', 'maj'],
|
||||
mode: 'minor',
|
||||
genre: ['Rock', 'Jazz', 'Funk'],
|
||||
songs: ['Oye Como Va — Santana', 'So What — Miles Davis', 'Scarborough Fair', 'Eleanor Rigby verse — Beatles', 'Mad World — Tears for Fears'],
|
||||
description: 'The major IV over a minor i chord signals Dorian mode. Smooth, open, sophisticated.',
|
||||
tip: 'Natural minor would have a minor iv. The major IV is Dorian\'s signature — it feels both sad and groovy.',
|
||||
styleVariations: [
|
||||
{ label: 'Jazz', pattern: 'im7 – IV7 (comp beneath a soloist)', qualities: ['min7','dom7'] },
|
||||
{ label: 'Funk', pattern: 'im9 – IV13 (layered synth and guitar)', qualities: ['min7','dom7'] },
|
||||
{ label: 'Rock', pattern: 'im – IV – im – IV (guitar riff)', qualities: ['min','maj'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'jazz_turnaround',
|
||||
name: 'Jazz Turnaround',
|
||||
pattern: 'I – vi – ii – V',
|
||||
degrees: [0, 9, 2, 7],
|
||||
qualities: ['maj7', 'min7', 'min7', 'dom7'],
|
||||
mode: 'major',
|
||||
genre: ['Jazz', 'Swing'],
|
||||
songs: ['I Got Rhythm — Gershwin', 'Rhythm Changes', 'How High the Moon', 'countless jazz standards'],
|
||||
description: 'The jazz turnaround — loops back to the top of the form with elegant inevitability.',
|
||||
tip: 'Each chord resolves down a fifth to the next. That chain of fifths is what makes jazz sound "right".',
|
||||
styleVariations: [
|
||||
{ label: 'Bebop', pattern: 'Imaj7 – vim7 – iim7 – V7(♭9)', qualities: ['maj7','min7','min7','dom7'] },
|
||||
{ label: 'Tritone', pattern: 'Imaj7 – ♭III7 – iim7 – ♭II7 (tritone subs)', qualities: ['maj7','dom7','min7','dom7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'phrygian',
|
||||
name: 'Phrygian Tension',
|
||||
pattern: 'i – ♭II',
|
||||
degrees: [0, 1],
|
||||
qualities: ['min', 'maj'],
|
||||
mode: 'minor',
|
||||
genre: ['Flamenco', 'Metal', 'Film'],
|
||||
songs: ['Game of Thrones theme', 'Spanish flamenco standards', 'heavy metal riffs', 'El Tango de Roxanne'],
|
||||
description: 'The ♭II (Neapolitan) chord creates extreme tension. Spanish fire and metal darkness.',
|
||||
tip: 'Just two chords — the half-step relationship between roots is what makes it feel so tense.',
|
||||
styleVariations: [
|
||||
{ label: 'Flamenco', pattern: 'im – ♭II – im with fast strumming', qualities: ['min','maj','min'] },
|
||||
{ label: 'Metal', pattern: 'im5 – ♭II5 power chord riff', qualities: ['min','maj'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'minor_pop',
|
||||
name: 'Sad Pop Minor',
|
||||
pattern: 'vi – IV – I – V',
|
||||
degrees: [9, 5, 0, 7],
|
||||
qualities: ['min', 'maj', 'maj', 'maj'],
|
||||
mode: 'major',
|
||||
genre: ['Pop', 'Rock', 'Indie'],
|
||||
songs: ['Zombie — Cranberries', 'Torn — Natalie Imbruglia', 'Apologize — Timbaland', 'Fix You — Coldplay'],
|
||||
description: 'Same chords as the Axis — just starting on the vi. Instantly feels darker and more yearning.',
|
||||
tip: 'Which chord you start on changes everything emotionally. This is the Axis heard through minor eyes.',
|
||||
styleVariations: [
|
||||
{ label: 'Soul', pattern: 'vim7 – IVmaj7 – Imaj7 – V9', qualities: ['min7','maj7','maj7','dom7'] },
|
||||
{ label: 'Indie', pattern: 'vim7 – IVadd9 – Iadd9 – Vsus4', qualities: ['min7','add9','add9','sus4'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'lydian_float',
|
||||
name: 'Lydian Float',
|
||||
pattern: 'I – II',
|
||||
degrees: [0, 2],
|
||||
qualities: ['maj', 'maj'],
|
||||
mode: 'major',
|
||||
genre: ['Film', 'Jazz', 'Pop'],
|
||||
songs: ['The Simpsons theme', 'Joe Satriani — Flying in a Blue Dream', 'many John Williams cues', 'Man or Muppet'],
|
||||
description: 'The raised ♯4 in Lydian makes the II chord major instead of minor. Dreamy, floating, magical.',
|
||||
tip: 'In normal major, the II chord is minor. Making it major (Lydian) lifts the whole progression off the ground.',
|
||||
styleVariations: [
|
||||
{ label: 'Film', pattern: 'Imaj7 – IImaj7 slowly held', qualities: ['maj7','maj7'] },
|
||||
{ label: 'Jazz', pattern: 'Imaj7(#11) — the Lydian 7th chord', qualities: ['maj7','maj7'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'sensitive',
|
||||
name: 'Sensitive Oscillation',
|
||||
pattern: 'vi – V – IV – V',
|
||||
degrees: [9, 7, 5, 7],
|
||||
qualities: ['min', 'maj', 'maj', 'maj'],
|
||||
mode: 'major',
|
||||
genre: ['Pop', 'Indie'],
|
||||
songs: ['Mad World — Tears for Fears', 'Every Breath You Take — Police', 'Losing My Religion — REM'],
|
||||
description: 'Oscillates between vi and IV through V. Aching, introspective, perpetually unresolved.',
|
||||
tip: 'The V never quite resolves to I — it keeps bouncing back to the IV or vi. That suspension is the emotion.',
|
||||
styleVariations: [
|
||||
{ label: 'Indie', pattern: 'vim7 – Vsus4 – IVadd9 – V', qualities: ['min7','sus4','add9','maj'] },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// ─── Chord substitution options ───────────────────────────────────────────────
|
||||
// For each chord type: array of { type, label, tip } suggestions
|
||||
export const CHORD_SUBSTITUTIONS = {
|
||||
maj: [
|
||||
{ type: 'maj7', tip: 'Add the major 7th — dreamy jazz colour' },
|
||||
{ type: 'add9', tip: 'Add the 9th — modern, open, Coldplay-ish' },
|
||||
{ type: 'maj6', tip: 'Add major 6th — vintage Django jazz sweetness' },
|
||||
{ type: 'sus2', tip: 'Replace 3rd with 2nd — airy and ambiguous' },
|
||||
{ type: 'sus4', tip: 'Suspend then resolve — creates rhythmic motion' },
|
||||
],
|
||||
min: [
|
||||
{ type: 'min7', tip: 'Add the minor 7th — smooth soul and jazz' },
|
||||
{ type: 'add9', tip: 'Add 9th over minor — bittersweet modern ache (Radiohead)' },
|
||||
{ type: 'min6', tip: 'Add major 6th over minor — flamenco and tango colour' },
|
||||
{ type: 'sus2', tip: 'Remove 3rd entirely — ambiguous and floating' },
|
||||
{ type: 'half_dim', tip: 'Flatten the 5th — half-diminished, much darker' },
|
||||
],
|
||||
dom7: [
|
||||
{ type: 'maj7', tip: 'Raise the 7th — softer, much less tension' },
|
||||
{ type: 'min7', tip: 'Lower the 3rd too — darkens the dominant' },
|
||||
{ type: 'sus4', tip: 'Replace 3rd with 4th — funky unresolved suspension' },
|
||||
{ type: 'dim7', tip: 'Diminished substitute — extreme tension before resolution' },
|
||||
],
|
||||
maj7: [
|
||||
{ type: 'maj', tip: 'Simplify — strip back to triad, rawer feel' },
|
||||
{ type: 'add9', tip: 'Drop 7th, add 9th — brighter and more open' },
|
||||
{ type: 'maj6', tip: 'Swap 7th for 6th — retro jazz, less ethereal' },
|
||||
{ type: 'dom7', tip: 'Flatten 7th — suddenly bluesy with tension' },
|
||||
],
|
||||
min7: [
|
||||
{ type: 'min', tip: 'Strip back — rawer, more aggressive feel' },
|
||||
{ type: 'half_dim', tip: 'Flatten the 5th — half-dim, darker and more tense' },
|
||||
{ type: 'min6', tip: 'Add major 6th — sophisticated jazz minor colour' },
|
||||
{ type: 'dom7', tip: 'Make it dominant — strong pull to resolve' },
|
||||
],
|
||||
dim: [
|
||||
{ type: 'dim7', tip: 'Add dim7 — fully symmetric, equally unstable' },
|
||||
{ type: 'half_dim', tip: 'Half-dim — softer, more melodic tension' },
|
||||
{ type: 'min', tip: 'Simplify to minor — much less dissonant' },
|
||||
],
|
||||
dim7: [
|
||||
{ type: 'dim', tip: 'Remove 7th — triad version, slightly less tense' },
|
||||
{ type: 'half_dim', tip: 'Raise one note to half-dim — softer resolution' },
|
||||
{ type: 'min7', tip: 'Raise ♭5 — from dark to smooth in one note' },
|
||||
],
|
||||
aug: [
|
||||
{ type: 'maj', tip: 'Resolve the aug5 down to 5 — release the tension' },
|
||||
{ type: 'dom7', tip: 'Add ♭7 over aug — double tension before a big resolution' },
|
||||
],
|
||||
sus4: [
|
||||
{ type: 'maj', tip: 'Resolve — drop the 4th to the 3rd (classic sus → maj)' },
|
||||
{ type: 'sus2', tip: 'Switch suspension — from 4th to 2nd, different feel' },
|
||||
{ type: 'dom7', tip: 'Add ♭7 too — 7sus4, funky and unresolved' },
|
||||
],
|
||||
sus2: [
|
||||
{ type: 'maj', tip: 'Fill in the 3rd — resolve the suspension clearly' },
|
||||
{ type: 'sus4', tip: 'Swap 2nd for 4th — different flavour of openness' },
|
||||
{ type: 'add9', tip: 'Add the 3rd back — sus2 becomes a richer add9' },
|
||||
],
|
||||
half_dim: [
|
||||
{ type: 'dim7', tip: 'Add dim7 — more symmetric and tense' },
|
||||
{ type: 'min7', tip: 'Raise the ♭5 to 5 — suddenly much smoother' },
|
||||
{ type: 'min', tip: 'Strip back — simple minor triad' },
|
||||
],
|
||||
maj6: [
|
||||
{ type: 'maj7', tip: 'Swap 6th for 7th — more modern jazz, more ethereal' },
|
||||
{ type: 'add9', tip: 'Replace 6th with 9th — brighter, contemporary feel' },
|
||||
],
|
||||
min6: [
|
||||
{ type: 'min7', tip: 'Swap 6th for 7th — smoother, less exotic' },
|
||||
{ type: 'half_dim', tip: 'Enharmonic trick — min6 and half-dim share notes' },
|
||||
],
|
||||
add9: [
|
||||
{ type: 'maj7', tip: 'Add the 7th — full maj9 sound, very lush' },
|
||||
{ type: 'sus2', tip: 'Remove the 3rd — purely suspended' },
|
||||
{ type: 'maj', tip: 'Strip the 9th — clean triad' },
|
||||
],
|
||||
}
|
||||
|
||||
// ─── Compute chord names for a famous progression in a given key ──────────────
|
||||
export function progressionInKey(famousProg, keyRoot) {
|
||||
const rootPc = NOTES.indexOf(keyRoot)
|
||||
if (rootPc === -1) return []
|
||||
return famousProg.degrees.map((d, i) => {
|
||||
const pc = (rootPc + d) % 12
|
||||
const type = famousProg.qualities[i] ?? 'maj'
|
||||
return chordName(pc, type)
|
||||
})
|
||||
}
|
||||
|
||||
// Style variation chords in a given key
|
||||
export function styleVariationInKey(styleVar, famousProg, keyRoot) {
|
||||
if (!styleVar.qualities?.length) return []
|
||||
const rootPc = NOTES.indexOf(keyRoot)
|
||||
if (rootPc === -1) return []
|
||||
return famousProg.degrees.slice(0, styleVar.qualities.length).map((d, i) => {
|
||||
const pc = (rootPc + d) % 12
|
||||
return chordName(pc, styleVar.qualities[i] ?? 'maj')
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Similarity matching ──────────────────────────────────────────────────────
|
||||
export function findSimilarProgressions(detectedChords, keyInfo) {
|
||||
if (!detectedChords?.length || !keyInfo?.root) return []
|
||||
const rootPc = NOTES.indexOf(keyInfo.root)
|
||||
if (rootPc === -1) return []
|
||||
|
||||
// Convert detected chords to semitone offsets from key root
|
||||
const detectedPcs = detectedChords
|
||||
.map(c => { const p = parseChord(c); return p ? (p.rootPc - rootPc + 12) % 12 : null })
|
||||
.filter(v => v !== null)
|
||||
if (!detectedPcs.length) return []
|
||||
|
||||
const detectedSet = new Set(detectedPcs)
|
||||
const results = []
|
||||
|
||||
for (const prog of FAMOUS_PROGRESSIONS) {
|
||||
const progPcs = prog.degrees.map(d => d % 12)
|
||||
const progSet = new Set(progPcs)
|
||||
|
||||
// Rotation match: does detected sequence appear in famous prog (as cyclic rotation)?
|
||||
let rotScore = 0
|
||||
const compareLen = Math.min(detectedPcs.length, progPcs.length)
|
||||
for (let rot = 0; rot < progPcs.length; rot++) {
|
||||
let hits = 0
|
||||
for (let i = 0; i < compareLen; i++) {
|
||||
if (detectedPcs[i] === progPcs[(rot + i) % progPcs.length]) hits++
|
||||
}
|
||||
rotScore = Math.max(rotScore, hits / compareLen)
|
||||
}
|
||||
|
||||
// Jaccard similarity (chord-set overlap regardless of order)
|
||||
const inter = [...detectedSet].filter(d => progSet.has(d)).length
|
||||
const union = new Set([...detectedSet, ...progSet]).size
|
||||
const jaccardScore = inter / union
|
||||
|
||||
const score = Math.max(rotScore, jaccardScore * 0.8)
|
||||
if (score >= 0.35) results.push({ ...prog, score })
|
||||
}
|
||||
|
||||
return results.sort((a, b) => b.score - a.score).slice(0, 4)
|
||||
}
|
||||
|
||||
// ─── Substitutions for a chord name ──────────────────────────────────────────
|
||||
export function getChordSubstitutions(chordName) {
|
||||
const p = parseChord(chordName)
|
||||
if (!p) return []
|
||||
const subs = CHORD_SUBSTITUTIONS[p.type] ?? []
|
||||
return subs.map(sub => ({
|
||||
...sub,
|
||||
chord: NOTES[p.rootPc] + (CHORD_TYPES[sub.type]?.suffix ?? ''),
|
||||
}))
|
||||
}
|
||||
|
||||
// ─── Chord Playbook ───────────────────────────────────────────────────────────
|
||||
// Jam-focused knowledge base per chord type.
|
||||
// jamRole — one sentence on this chord's role in a live jam
|
||||
// voicings — 2-3 voicings with their jam use-case (not fingering lessons)
|
||||
// licks — 2-3 fills/licks with ASCII tab, style-labelled
|
||||
// jamTips — 3 tight bullet points for live playing
|
||||
// loopPractice — 1-2 concrete loop station exercises
|
||||
|
||||
export const CHORD_PLAYBOOK = {
|
||||
maj: {
|
||||
jamRole: 'The home chord in a major key — everything resolves here. Your job is to lock in the groove and hold the harmonic centre while others explore around you.',
|
||||
voicings: [
|
||||
{ name: 'Open position', use: 'Full, resonant. Use when you\'re the only chordal instrument — fills the room. Avoid it in a dense band (too much low-end clash with bass).' },
|
||||
{ name: 'Barre mid-neck (E or A shape)', use: 'Controlled and punchy. Use in a band — you\'re sitting above the bassist\'s register. Good for rock and funk comping.' },
|
||||
{ name: 'Partial 4-string (strings 1–4, upper neck)', use: 'Jazz and funk comping. Stays completely out of the low end. Ideal when there\'s a keys player — you add texture without competing.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Major pentatonic walkup',
|
||||
style: 'Rock / Country',
|
||||
tab: 'e|-------------------------------5-7-|\nB|---------------------5-7-8---------|\nG|-----------4-5-7-------------------|\nD|-----4-5-7-------------------------|\nA|-5-7-------------------------------|\n (G major pentatonic — position shift for any key)',
|
||||
tip: 'End on the root or the 3rd for a resolved feel. Use this as a fill between chord changes.',
|
||||
},
|
||||
{
|
||||
title: 'Chord tone arpeggio fill',
|
||||
style: 'Jazz / Funk',
|
||||
tab: 'e|-----5-----------|\nB|---5---8---------|\nG|-5-------7-5-----|\nD|-----------------|\n (C major: R–3–5–high root)',
|
||||
tip: 'Highlight the 3rd and 5th — these define the chord. Avoid the root on a strong beat to keep it moving.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'If a bassist is locking down the root, move your voicing up the neck — let them own the low end.',
|
||||
'Behind a soloist: comp short stabs on beats 2 and 4. Full strums on every beat will drown them out.',
|
||||
'Pedal point trick: hold one string on the root and let the chord move underneath — creates harmonic motion without a chord change.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Comp loop + fill swap', body: 'Record a 2-bar major chord comp (stabs on beats 2 and 4). Loop it. Improvise fills over the top using the major pentatonic — aim to respond to the rhythm, not just run scales. Swap between "comping mode" and "fill mode" every 4 bars.' },
|
||||
],
|
||||
},
|
||||
|
||||
min: {
|
||||
jamRole: 'Sets the emotional temperature of the jam. Minor chords invite exploration — soloists will look to you for the harmonic anchor. Hold it firmly and let the mood develop.',
|
||||
voicings: [
|
||||
{ name: 'Open minor (Em, Am, Dm)', use: 'Resonant and sustaining. Use when the jam is sparse or acoustic — let it ring while others move around it.' },
|
||||
{ name: 'Barre mid-neck', use: 'Rock and pop jams. Punchy and controlled. Roll slightly onto the index bony edge for clean barres. Palm-mute lightly for a tighter comp.' },
|
||||
{ name: 'Partial upper voicing (4 strings)', use: 'Jazz-funk context. Stays completely out of the bass. Add light muting for a percussive comp that doesn\'t muddy the mix.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Minor pentatonic box 1',
|
||||
style: 'Blues / Rock',
|
||||
tab: 'e|--8-5-----------|\nB|------8-5-6-5---|\nG|------------7-5-|\nD|---------7------|\nA|----------------|\n (A minor pentatonic at position 5)',
|
||||
tip: 'The b3 and b7 are your strongest notes over any minor chord. End phrases on one of them.',
|
||||
},
|
||||
{
|
||||
title: 'Dorian groove phrase',
|
||||
style: 'Jazz / Funk',
|
||||
tab: 'e|-------------------|\nB|-------------------|\nG|--2-4-2-4-5-4-2----|\nD|--2-4-2-4---4-2----|\nA|--0----------------|\n (A Dorian — note the F# = natural 6th)',
|
||||
tip: 'The natural 6th (F# in Am Dorian) is what gives Santana, Stevie Wonder, and jazz-funk their brightness over a minor chord.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'The minor pentatonic (5 notes) is the safe zone — you can\'t go wrong with it over any minor chord.',
|
||||
'On a long minor vamp, try the Dorian mode (raise the 6th by one semitone) — it shifts the feel from melancholic to funky.',
|
||||
'When the jam sits on a minor chord, play fewer chord tones and more single-note fills in the gaps — let the sustain breathe.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Minor vamp + Dorian exploration', body: 'Record a 4-bar minor chord groove with gaps (e.g. hit on beat 1, let it ring, stab again on beat 3). Loop it. Solo over it with minor pentatonic for 2 laps. Then raise the 6th by one semitone (into Dorian) on the next 2 laps. Hear the shift from dark to groove.' },
|
||||
],
|
||||
},
|
||||
|
||||
dom7: {
|
||||
jamRole: 'THE blues chord — in a 12-bar blues jam, every chord is a dom7. In jazz, it\'s the maximum-tension V chord. Either way: play with attitude and resolve with purpose.',
|
||||
voicings: [
|
||||
{ name: 'Full dom7 barre', use: 'Blues rhythm guitar. Combine with the shuffle pattern — bass note then top strings alternating. This IS the sound of a blues jam.' },
|
||||
{ name: 'Shell voicing (root + 3rd + b7, 3 strings only)', use: 'Jazz comping. Three notes, right in the pocket. Leaves room for piano, sax, everything — the most polite voicing you can play.' },
|
||||
{ name: '9th voicing (add the 2nd on top)', use: 'R&B and blues-rock upgrade. One extra note transforms the barre into something sophisticated without changing the function.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Blues shuffle figure',
|
||||
style: 'Blues',
|
||||
tab: 'e|--------------------|\nB|--------------------|\nG|--------------------|\nD|--2-4--2-4----------|\nA|--2-4--2-4----------|\nE|--0----0------------|\n (E7 shuffle — repeat; move to A string for A7)',
|
||||
tip: 'The shuffle feel is long-short, long-short (triplet with the middle note removed). Lock this in before speed.',
|
||||
},
|
||||
{
|
||||
title: 'Mixolydian fill',
|
||||
style: 'Jazz / Rock',
|
||||
tab: 'e|--10-8---8-10-8--7---------|\nB|---------10---------10-8---|\nG|---------------------------|\n (G mixolydian: G A B C D E F)',
|
||||
tip: 'Mixolydian = major scale with b7. It\'s the natural scale over any dominant 7th chord — the b7 note is the defining colour.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'In a 12-bar blues, every chord is a dom7. The notes that shift between I7, IV7, and V7 are just the 3rd and b7 — learn those for each chord and you can navigate the whole form.',
|
||||
'The b7 note is the single best note to target in a fill over a dom7. It\'s immediately recognisable as the "blues note."',
|
||||
'On the V7 (the most tense moment), one well-placed phrase hits harder than ten frantic notes. Listen to what B.B. King leaves out.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: '12-bar blues loop', body: 'Record a 2-bar I7 chord shuffle (e.g. E7 for 2 bars). Loop it and solo using the minor pentatonic. Then add the major 3rd occasionally (in E: G#) — you\'re now mixing major and minor pentatonic, which is the blues scale. Notice how that one note shifts the whole flavour.' },
|
||||
],
|
||||
},
|
||||
|
||||
maj7: {
|
||||
jamRole: 'The sophisticated home chord of jazz, bossa nova, and soul. It floats rather than resolves — gives the jam a dreamy, suspended quality. Play it quietly and let it hang.',
|
||||
voicings: [
|
||||
{ name: 'Open Cmaj7 / Amaj7 / Emaj7', use: 'Acoustic and light electric jams. Beautiful resonance. Let it ring — the maj7 note needs space to project.' },
|
||||
{ name: '4-string mid-neck (no 5th)', use: 'Jazz comping. Drop the 5th — it clutters. Root, 3rd, and maj7 is more elegant and sits better under a soloist.' },
|
||||
{ name: 'High-neck partial (strings 1–4)', use: 'Comping behind a vocalist. High, bright, completely out of the bass range. Keeps you from competing with anything.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Maj7 arpeggio climb',
|
||||
style: 'Jazz / Bossa',
|
||||
tab: 'e|--------9----------|\nB|------9---9--------|\nG|----9-------9------|\nD|--10-----------10--|\nA|------------------|\n (Cmaj7: C–E–G–B)',
|
||||
tip: 'Land on the maj7 (the B over Cmaj7) — it\'s the characteristic note. Resolve it gently, don\'t snap down.',
|
||||
},
|
||||
{
|
||||
title: 'Lydian colour phrase',
|
||||
style: 'Jazz',
|
||||
tab: 'e|--9-10-12-10--9---------|\nB|----------------10-9----|\nG|----------------------9-|\n (#4 = Lydian mode over maj7 — the raised 4th creates a dreamy, floating quality)',
|
||||
tip: 'The #4 (raised 4th) is the Lydian note — one semitone above the perfect 4th. It creates instant "floating" colour over any maj7 chord.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'Maj7 sounds strongest quiet — dial back your volume. It\'s a listening chord that rewards the band for playing softly.',
|
||||
'In bossa nova, emphasise the bass note on beat 1 with your thumb and comp the chord on the upbeats with your fingers. No plectrum.',
|
||||
'The maj7 is one semitone below the root. If you play the root too prominently in the voicing, the 7th disappears. Favour the 3rd and 7th in your note choices.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Bossa nova comp loop', body: 'Record a 4-bar maj7 chord using bossa rhythm (bass on beat 1, chord on the "and"). Play it at half the volume you think you need. Then improvise a simple 3–4 note melody over it. Fewer notes = more space = better bossa feel.' },
|
||||
],
|
||||
},
|
||||
|
||||
min7: {
|
||||
jamRole: 'The smoothed-out minor — soul, R&B, funk, and jazz all live here. It invites groove without demanding resolution. Great for long vamps and ii chord setups in jazz.',
|
||||
voicings: [
|
||||
{ name: 'Open Am7 / Em7 / Dm7', use: 'Folk, acoustic, and light jazz. Clean and resonant. Good starting point — the open strings blend naturally with the chord.' },
|
||||
{ name: 'Barre mid-neck (muted)', use: 'Rock-funk. Mute slightly with your palm for a tighter, more percussive sound. Useful for rhythmic comping in a band.' },
|
||||
{ name: '4-string funk stab (high position)', use: 'THE funk voicing. 4 strings, quick stab and mute. Stay high on the neck — leave the low end for the bass. This is how you comp in a funk jam.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Dorian funk phrase',
|
||||
style: 'Funk / Jazz',
|
||||
tab: 'e|---------------------|\nB|---------------------|\nG|--5-7-5-7-9-7-5------|\nD|--5-7-5-7---7-5------|\nA|--3------------------|\n (Am Dorian: natural 6th = F# = fret 9 on G string)',
|
||||
tip: 'The natural 6th (raised from the plain minor) is the single note that turns a minor vamp into a funk groove. Target it.',
|
||||
},
|
||||
{
|
||||
title: 'Min7 arpeggio fill',
|
||||
style: 'Jazz / Soul',
|
||||
tab: 'e|------8----------|\nB|----8---8--------|\nG|--7-------7-5----|\nD|--7-----------7--|\n (Am7: A–C–E–G)',
|
||||
tip: 'In jazz, the b7 (G over Am7) is the departure note — it creates the sense of movement to the V chord. Let it hang.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'In a funk jam, min7 stabs go on the upbeats. The muted scratches between are as musical as the chords themselves — they hold the groove.',
|
||||
'In jazz, min7 is almost always the ii chord — expect a dom7 to follow. Your job on ii is to build tension so the V chord feels even better.',
|
||||
'On a long minor 7th vamp, the Dorian mode (natural 6th) is your key. It\'s what separates "sad minor" from "soulful groove".',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Funk stab loop', body: 'Record a 2-bar pattern: stab the min7 on the "and" of each beat, leaving the beats empty. Loop it. Add a second loop layer with a single bass note on beats 1 and 3. Hear how it locks into a groove. Then try improvising single notes on top.' },
|
||||
],
|
||||
},
|
||||
|
||||
dim: {
|
||||
jamRole: 'Almost never a destination — diminished is a bridge. In a live jam, use it to glide chromatically from one chord to another a half step away. One beat, maximum drama, then move.',
|
||||
voicings: [
|
||||
{ name: 'Chromatic passing shape', use: 'Move any dim shape up one fret to arrive at the next chord. This is how diminished works in practice — a one-fret slide between two stable chords.' },
|
||||
{ name: 'Compact 4-string voicing', use: 'Jazz context where you want the dim colour without full 6-string weight. Cleaner in a dense mix.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Chromatic approach line',
|
||||
style: 'Jazz / Classical',
|
||||
tab: 'e|--8-9-10-----------|\nB|------10-11-12-----|\nG|---------------11--|\n (chromatic passing: approach Cmaj7 from B dim)',
|
||||
tip: 'Each note moves up by exactly one semitone. The half-step motion is what creates the magnetic pull toward the landing chord.',
|
||||
},
|
||||
{
|
||||
title: 'Symmetric dim arpeggio',
|
||||
style: 'Jazz',
|
||||
tab: 'e|--4-7-10-----------|\nB|------10-13--------|\nG|---------12--------|\nD|--5-8--------------|\n (B dim: B–D–F–Ab — all minor 3rds apart)',
|
||||
tip: 'Move this pattern up 3 frets and you have the same chord in a new inversion. Exploit the symmetry.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'Use dim as a chromatic approach: going from G to Am, insert G#dim for one beat. The half-step movement makes the landing feel inevitable.',
|
||||
'In jazz, you can substitute a dim7 a half step above the V chord — it creates even more tension before the resolution.',
|
||||
'Diminished chords are brief. Never sit on one in a jam — play it quickly and move. It\'s a dramatic pivot, not a home.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Chromatic approach exercise', body: 'Record a 2-bar Am loop. On the last beat before the loop repeats, land on G#dim for just one beat before the Am hits. Loop it. Feel how the approach makes the Am feel like a release. Try with different target chords.' },
|
||||
],
|
||||
},
|
||||
|
||||
dim7: {
|
||||
jamRole: 'The most symmetric chord in music — one shape, four roots. Use it as a dramatic pivot or tension builder before any chord. In a jazz jam it\'s a secret harmonic weapon.',
|
||||
voicings: [
|
||||
{ name: 'Moveable box (any position)', use: 'Move up 3 frets for each inversion — same notes, different voice. Use whichever inversion sits closest to the chord you\'re resolving to.' },
|
||||
{ name: 'High-neck 4-string', use: 'Clean and tight. Good for jazz where you want the tension colour without orchestral weight. The top string carries the characteristic tritone.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Dim7 arpeggio (symmetric)',
|
||||
style: 'Jazz / Classical',
|
||||
tab: 'e|--1-4-7-10--------|\nB|----------10-13---|\nG|------1-4---------|\nD|--2-5-------------|\n (Bdim7: all notes 3 semitones apart)',
|
||||
tip: 'Every note is an equal minor 3rd apart. Moving up 3 frets lands you on the same chord — use this to shift register dramatically.',
|
||||
},
|
||||
{
|
||||
title: 'Chromatic resolution',
|
||||
style: 'Jazz',
|
||||
tab: 'e|--1-0--|\nB|--2-1--|\nG|--1-0--|\nD|--3-2--|\nA|--3-3--|\n Bdim7 → Cmaj7 (half-step resolution)',
|
||||
tip: 'Each voice moves by just one semitone. This is why dim7 resolves so smoothly — voice leading at its most efficient.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'A dim7 shape a half step above your target chord creates maximum tension before resolution. Before Cmaj7, play Bdim7 for one beat — the release will feel enormous.',
|
||||
'Every dim7 is an inversion of 3 others. Learn one shape and you have 12 roots covered — just move 3 frets at a time.',
|
||||
'In a jazz jam, place dim7 on the last beat of a phrase, not the first. The tension arrives just before the new section resolves.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Resolution contrast loop', body: 'Record a 4-bar loop: 3 bars Cmaj7, then exactly 1 beat of Bdim7 on the final "and" before the loop repeats. The contrast will be striking every time. Try different dim7 → resolution pairs to hear how universally this works.' },
|
||||
],
|
||||
},
|
||||
|
||||
half_dim: {
|
||||
jamRole: 'The ii chord in minor key jazz — where the tension journey begins. When you play this in a jam, you\'re saying "we\'re heading somewhere" and everyone leans in to hear where.',
|
||||
voicings: [
|
||||
{ name: 'Standard (5th-string root)', use: 'Most common voicing. The b5 on top is the characteristic tension note — let it ring clearly so everyone hears the harmonic direction.' },
|
||||
{ name: 'Compact 4-string (b3–b5–b7)', use: 'Jazz comping. Root, b3, b5, b7 — tight and dark. Perfect when comping behind a soloist who needs space.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Locrian colour phrase',
|
||||
style: 'Jazz',
|
||||
tab: 'e|--7-8-10--------|\nB|--------10-8-7--|\nG|--7-8-----------|\nD|--7-------------|\n (Bm7b5: Locrian mode — b2, b3, b5, b7)',
|
||||
tip: 'The b5 is the defining note. Feature it in your phrase — it\'s what signals "half-diminished" to every musician in the room.',
|
||||
},
|
||||
{
|
||||
title: 'ii–V–i connection line',
|
||||
style: 'Jazz',
|
||||
tab: 'e|------7-8-10----------10-9---------|\nB|----8---------8-10-12------12-10---|\nG|--9---------------------------------|\n (Bm7b5 → E7 → Am: melodic line through the ii–V–i)',
|
||||
tip: 'This phrase flows across all three chords. That\'s the goal: melodic lines that connect chords, not stop-start at each change.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'The m7b5 almost always precedes a dominant 7th a 4th above it. If you\'re on Bm7b5, expect E7 next. Learn to anticipate — comp toward the V before it arrives.',
|
||||
'The characteristic note is the b5. Target it in your fills — it\'s the note that makes the chord sound "yearning" rather than just dark.',
|
||||
'In jazz comping, your chord stab on the ii should feel like tension loading. Don\'t resolve early — let the V chord do that work.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Minor ii–V–i drill', body: 'Record a 4-bar loop: 2 bars Bm7b5, 1 bar E7, 1 bar Am7. Practise this in Am until it\'s automatic, then transpose to other keys. Every jazz standard is built on variations of this — knowing it in all 12 keys is the single biggest unlock in jazz.' },
|
||||
],
|
||||
},
|
||||
|
||||
aug: {
|
||||
jamRole: 'A single beat of suspended tension. Augmented chords are almost always passing — one beat before resolving. In a jam, use one to add forward harmonic motion between two stable chords.',
|
||||
voicings: [
|
||||
{ name: 'Standard augmented shape (moveable)', use: 'It\'s symmetric — any inversion works. Use whichever position sits closest to where you\'re going next.' },
|
||||
{ name: 'Partial 4-string', use: 'Lighter touch. Use in a sparse jam where you want the aug colour without weight. The raised 5th on top is the defining note — keep it.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Whole-tone run',
|
||||
style: 'Jazz',
|
||||
tab: 'e|--5-7-9-10-12------|\nB|-------------12----|\nG|--4-6-8------------|\n (whole-tone scale: all major 2nds — the natural scale over augmented)',
|
||||
tip: 'Every interval is a whole step. The scale has no "home" and sounds disorienting — which is exactly the aug chord feeling. Use it briefly then land on something stable.',
|
||||
},
|
||||
{
|
||||
title: 'I → aug → IV resolution',
|
||||
style: 'Jazz / Pop',
|
||||
tab: 'e|--0---0---1--|\nB|--1---1---1--|\nG|--0---1---2--|\nD|--2---2---3--|\nA|--3---3---3--|\nE|--x---x---x--|\n Cmaj Caug F',
|
||||
tip: 'The aug chord is only one note different from the major — the 5th raised by one semitone. That one note creates all the forward motion into the IV.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'The raised 5th wants to move up by a half step — follow it. C aug → F: the G# in Caug resolves naturally to A (the 3rd of F). That voice leading is the whole point.',
|
||||
'In jazz, if you hear an aug chord, stay light and brief. One voicing, then move — it\'s a raised eyebrow, not a full statement.',
|
||||
'Augmented works as a substitute for the V chord — both create tension that resolves to I. Try it in a major key jam as an unexpected colour.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'I → aug → IV loop', body: 'Record a 4-bar loop: 1.5 bars C major, 0.5 bar Caug, 2 bars F. The augmented is just a moment — practise landing cleanly on the F. Once locked in, add a melodic phrase that follows the aug note (G#) upward to A on the F chord.' },
|
||||
],
|
||||
},
|
||||
|
||||
sus4: {
|
||||
jamRole: 'Creates anticipation without committing to major or minor. In a jam, use it to build tension before a major resolution, or sustain it for a floating open feel that invites any scale.',
|
||||
voicings: [
|
||||
{ name: 'Open sus4 (Dsus4, Asus4)', use: 'Ring out beautifully. Best for creating space and expectation — especially effective in acoustic and ambient jams.' },
|
||||
{ name: 'Barre sus4 → major', use: 'Rock and pop jams. Use the sus4 → major resolution as a rhythmic gesture: sus4 on the upbeat, major on the downbeat. The landing feels like a musical exhale.' },
|
||||
{ name: 'Open string drone + sus4 shape', use: 'Andy Summers / Sting technique. Let high E or B ring open while the fretted notes move. Lush complexity from simple shapes — works beautifully with delay.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Sus4 → major rhythmic gesture',
|
||||
style: 'Rock / Pop',
|
||||
tab: 'e|--3---2---3---2--|\nB|--3---3---3---3--|\nG|--2---2---2---2--|\nD|--0---0---0---0--|\n (Dsus4 → D → Dsus4 → D)',
|
||||
tip: 'The 4th (that one suspended note) resolves down to the 3rd. Let the sus4 hang for a full beat before resolving — the longer the tension, the sweeter the landing.',
|
||||
},
|
||||
{
|
||||
title: 'Open drone riff',
|
||||
style: 'Ambient / Rock',
|
||||
tab: 'e|--0---0---0---0--|\nB|--5---5---3---3--|\nG|--6---6---4---4--|\nD|--7---7---5---5--|\nA|--7---7---5---5--|\nE|--5---5---3---3--|\n (C#sus4 riff — open high E rings throughout)',
|
||||
tip: 'The open high E string is the constant — it creates the suspension as the chord changes underneath it. This is The Police\'s entire harmonic language.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'Sus4 is most powerful just before resolving — the longer you hold it, the more satisfying the major landing. Use it on the upbeat, resolve on the downbeat.',
|
||||
'In a jam, switching to sus4 on the I chord while others keep playing instantly changes the feel without a real chord change. Subtle and powerful.',
|
||||
'Pair sus4 with a delay effect (or the loop station reverb tail) for ambient, textural comping that leaves maximum space for other musicians.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Tension-release loop', body: 'Record a 2-bar loop: 1 bar sus4, 1 bar major (e.g. Dsus4 → D). Improvise over it, emphasising the 4th over the sus4 bar and resolving to the 3rd on the major bar — your melody mirrors the exact motion of the chord. Teach your ear to hear and resolve suspension.' },
|
||||
],
|
||||
},
|
||||
|
||||
sus2: {
|
||||
jamRole: 'The neutral canvas. Sus2 removes the 3rd — it\'s neither major nor minor. In a jam, it gives any soloist total freedom and creates a floating, modern texture that never clashes.',
|
||||
voicings: [
|
||||
{ name: 'Open Asus2 / Dsus2', use: 'Key voicings. Open strings ring freely and the chord floats. Best in quieter or ambient jams — don\'t fight it with a heavy strum.' },
|
||||
{ name: 'Capo + open sus2 shape', use: 'Any key, same open feel. Capo up and play Dsus2 or Asus2 shapes. Constant by Sting, Coldplay, The Edge — sus2 resonance in any key.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Sus2 arpeggio (floating)',
|
||||
style: 'Ambient / Pop',
|
||||
tab: 'e|--0-----------0--|\nB|--0---0---0------|\nG|----2---2--------|\nD|------2----------|\nA|--0-----------0--|\n (Asus2: A–B–E — root, 2nd, 5th)',
|
||||
tip: 'The 2nd (9th) is the highest note — feature it in your voicing. It\'s the note that makes the chord float.',
|
||||
},
|
||||
{
|
||||
title: 'Single note melody over sus2 drone',
|
||||
style: 'Ambient',
|
||||
tab: 'e|--0-2-3-5-3-2-0--|\nB|--0-----------0--|\nG|--2-----------2--|\nD|--2-----------2--|\nA|--0-----------0--|\n (Asus2 held, melody on string 1)',
|
||||
tip: 'Because there\'s no 3rd in the sus2, any major or minor scale note works as a melody. Total harmonic freedom.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'Sus2 has no 3rd — soloists can play major OR minor scales over it and neither will clash. Use it as a harmonic reset between more defined chords.',
|
||||
'In a dense jam, switching from a full major chord to a sus2 is like opening a window — everyone hears and appreciates the space.',
|
||||
'The 9th (the 2nd up an octave) is your featured note. Build your voicing so it sits on top — that\'s what gives the chord its shimmer.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Neutral canvas loop', body: 'Record a sparse 4-bar sus2 loop — just a few arpeggiated notes, played quietly. Then add a second loop layer with a single sustained melody note. Try different melody notes and notice that none of them clash. That\'s the power of the sus2 as a backdrop.' },
|
||||
],
|
||||
},
|
||||
|
||||
maj6: {
|
||||
jamRole: 'Sweetened major — used in jazz, bossa nova, and vintage pop where a plain major feels too simple. Lush and nostalgic, it sits perfectly under a vocalist or a soloist\'s upper-register lines.',
|
||||
voicings: [
|
||||
{ name: 'Open C6 / A6', use: 'Classic jazz and bossa starting points. Bright and warm — good comp chord for a vocalist. The 6th sits naturally on top.' },
|
||||
{ name: '4-string voicing (no 5th, 6th on top)', use: 'Jazz comping — elegant and uncluttered. Drop the 5th, feature the 6th as the top note. This is how the chord sings in a jazz context.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Maj6 arpeggio',
|
||||
style: 'Jazz / Bossa',
|
||||
tab: 'e|--5-----------|\nB|----5---------|\nG|------5-4-2---|\nD|----------4-2-|\nA|--3-----------|\n (C6: C–E–G–A, target the 6th = A)',
|
||||
tip: 'The 6th (A over C6) is the top of the arpeggio — treat it as the melody note and let everything else support it.',
|
||||
},
|
||||
{
|
||||
title: 'Bossa comp rhythm',
|
||||
style: 'Bossa Nova',
|
||||
tab: 'Thumb (T) on bass string, fingers (f) on chord:\n T . f . T f . f | T . f . T f . f\n 1 . + . 2 + . + | 1 . + . 2 + . +\n (the classic João Gilberto bossa strum)',
|
||||
tip: 'The thumb bass is as important as the chord — it defines the bossa feel. Keep it locked with the kick drum if there is one.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'Maj6 and min7 are inversions of each other — C6 and Am7 share the same four notes. This means you can substitute one for the other in many contexts.',
|
||||
'Voice the chord so the 6th sits on top — it\'s the melody note. A maj6 with the root on top just sounds like a major chord with extra notes.',
|
||||
'In bossa nova, the I chord is often maj6 (not maj7). The 6th is sweeter and less mysterious than the 7th — it resolves more completely.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Bossa ii–V–I loop', body: 'Record a 4-bar loop: 1 bar Dm7, 1 bar G7, 2 bars Cmaj6. The most common jazz cadence. Practise until each change is effortless, then improvise a simple melody that lands on the 6th of the Cmaj6 as its final note — the sweetest possible resolution.' },
|
||||
],
|
||||
},
|
||||
|
||||
min6: {
|
||||
jamRole: 'Minor with unexpected brightness — the Dorian chord. The major 6th over a minor chord creates emotional complexity: dark and light at once. Essential in flamenco, tango, jazz, and anything Dorian.',
|
||||
voicings: [
|
||||
{ name: 'Open Am6 (x02212)', use: 'The classic voicing. The F# on top is the 6th — it must ring clearly. This is the chord that defines the flamenco-jazz crossover sound.' },
|
||||
{ name: 'Jazz tonic min6 (4-string)', use: 'In jazz minor jams, use min6 as the tonic instead of plain minor. It sounds resolved but never bland — more sophisticated than a plain triad.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Dorian descending line',
|
||||
style: 'Jazz / Funk',
|
||||
tab: 'e|--5-3-----------|\nB|------5-3-2-----|\nG|----------4-2---|\nD|-----------4-2--|\nA|--0-------------|\n (A Dorian descending: A G F# E D C# B A)',
|
||||
tip: 'The F# (natural 6th) is what makes this Dorian, not natural minor. Feature it — it\'s the brightness inside the darkness.',
|
||||
},
|
||||
{
|
||||
title: 'Flamenco approach (Am → Am6)',
|
||||
style: 'Flamenco / Spanish',
|
||||
tab: 'e|--0---1---0------|\nB|--1---2---1------|\nG|--2---2---2------|\nD|--2---2---2------|\nA|--0---0---0------|\n Am Am6 Am (the 6th appears and disappears)',
|
||||
tip: 'Letting the Am6 appear for just one beat creates the characteristic Spanish colour — like a flash of sunlight inside the minor mood.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'The natural 6th in a minor chord IS the Dorian mode marker. If the jam is in Dorian (minor with raised 6th), min6 is the correct tonic — play it instead of plain minor.',
|
||||
'In a jazz minor jam, use min6 as the final resting point of a phrase. It sounds more resolved than min7 (which still wants to move) but darker than a plain major.',
|
||||
'The contrast between min6 and plain minor in the same phrase is a device — use it intentionally. Go to Am, then Am6, then back. The harmonic colour shifts are micro-movements of emotion.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Dorian vamp loop', body: 'Record a 4-bar Am loop — but on bar 3, switch to Am6 instead of plain Am. Notice how the F# lifts the sound. Improvise using the Dorian scale (natural minor with raised 6th) and specifically target the F# in your phrases. That note IS the sound.' },
|
||||
],
|
||||
},
|
||||
|
||||
add9: {
|
||||
jamRole: 'The modern open chord — spacious, unambiguous, never clashes. Add9 keeps the clarity of a triad but adds one note of colour. The sound of contemporary rock, pop, and folk jams.',
|
||||
voicings: [
|
||||
{ name: 'Open Cadd9 (x32033)', use: 'The quintessential modern voicing. Ring and middle fingers on 3rd fret, open G and high E ring as the 9th. Perfect for pop and acoustic jams.' },
|
||||
{ name: 'G / Cadd9 (anchor fingers 3–4)', use: 'Keep ring and pinky on strings 1–2 (fret 3) for BOTH G and Cadd9. Only your first two fingers move between the chords. This anchor technique is what makes the two chords sound seamless.' },
|
||||
{ name: 'High position with open string drone', use: 'Use open strings as drones while fretting the add9 shape further up. Creates lush textural layers — very effective in ambient or layered jams.' },
|
||||
],
|
||||
licks: [
|
||||
{
|
||||
title: 'Cadd9 arpeggio (the 9th rings)',
|
||||
style: 'Pop / Folk',
|
||||
tab: 'e|--3-----------3--|\nB|----3-------3----|\nG|------0---0------|\nD|--------2--------|\nA|--3-----------3--|\n (Cadd9: root → 3rd → 9th — let the 9th ring over the whole phrase)',
|
||||
tip: 'The 9th (D over C) is the featured note — let it ring as long as possible. It\'s the note that makes the chord feel modern and open.',
|
||||
},
|
||||
{
|
||||
title: 'Melodic fill on string 1 between stabs',
|
||||
style: 'Rock / Pop',
|
||||
tab: 'e|--3---5---3---0---3--|\nB|--3-----------3---3--|\nG|--0-----------0---0--|\nD|--2-----------2---2--|\n (Cadd9 chord stab, melody fill, back to chord)',
|
||||
tip: 'The fill on string 1 sits over the same chord shape — you\'re comping and filling at the same time. This technique makes you sound like two guitarists.',
|
||||
},
|
||||
],
|
||||
jamTips: [
|
||||
'The Cadd9 ↔ G movement with anchored fingers 3–4 is the single most useful two-chord pattern in modern pop guitar. Master the anchor first.',
|
||||
'Unlike maj9, add9 has no 7th — it stays clean and unambiguous in a dense mix. Great when there\'s a keys player already adding 7ths.',
|
||||
'Let the 9th ring as a pedal note in your fills. The 2nd degree of the scale — heard an octave up — sounds modern every time and never conflicts with the harmony.',
|
||||
],
|
||||
loopPractice: [
|
||||
{ title: 'Anchor pattern loop', body: 'Record a 2-bar loop alternating Cadd9 and G, using the anchor technique (fingers 3–4 never lift). When the transition is smooth, start adding single-note fills on string 1 between the chord stabs — a lick on the "and" of beat 2, back to the chord on beat 3. You\'re now comping and leading simultaneously.' },
|
||||
],
|
||||
},
|
||||
}
|
||||
+52
-19
@@ -360,40 +360,72 @@ export function toRomanNumeral(chordName, keyRoot, keyMode) {
|
||||
|
||||
// ─── Repeating progression detection ─────────────────────────────────────────
|
||||
|
||||
// Returns true if arr is made of a shorter repeating unit (e.g. [A,B,A,B] → true)
|
||||
function isPeriodicPattern(arr) {
|
||||
for (let p = 1; p <= Math.floor(arr.length / 2); p++) {
|
||||
if (arr.length % p !== 0) continue
|
||||
const unit = arr.slice(0, p)
|
||||
if (arr.every((v, i) => v === unit[i % p])) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// Returns the lexicographically smallest rotation so the same loop always
|
||||
// produces the same string regardless of where in the cycle we currently are.
|
||||
function canonicalize(pattern) {
|
||||
let best = pattern
|
||||
for (let i = 1; i < pattern.length; i++) {
|
||||
const rot = [...pattern.slice(i), ...pattern.slice(0, i)]
|
||||
if (rot.join('\0') < best.join('\0')) best = rot
|
||||
}
|
||||
return best
|
||||
}
|
||||
|
||||
/**
|
||||
* detectRepeatingProgression(history) → chord[] or null
|
||||
* Returns the most-recently-completed repeating pattern (length 2–6).
|
||||
* Uses non-overlapping match counting to avoid over-counting.
|
||||
*
|
||||
* Tests every unique subsequence of every length (not just the tail) so the
|
||||
* result is stable regardless of where in the loop the musician currently is.
|
||||
* Returns the canonical (rotation-normalised) form of the best pattern found.
|
||||
*/
|
||||
export function detectRepeatingProgression(history) {
|
||||
if (!history || history.length < 4) return null
|
||||
if (!history || history.length < 6) return null
|
||||
|
||||
const window = history.slice(-20)
|
||||
const win = history.slice(-32)
|
||||
let best = null, bestScore = 0
|
||||
|
||||
for (let len = 2; len <= 6; len++) {
|
||||
if (len * 2 > window.length) break
|
||||
if (len * 2 > win.length) break
|
||||
|
||||
const candidate = window.slice(-len)
|
||||
let reps = 0, i = 0
|
||||
const seen = new Set()
|
||||
|
||||
while (i <= window.length - len) {
|
||||
if (candidate.every((c, j) => c === window[i + j])) {
|
||||
reps++
|
||||
i += len // skip past match — non-overlapping
|
||||
} else {
|
||||
i++
|
||||
for (let start = 0; start <= win.length - len; start++) {
|
||||
const candidate = win.slice(start, start + len)
|
||||
const key = candidate.join('\0')
|
||||
if (seen.has(key)) continue
|
||||
seen.add(key)
|
||||
|
||||
// A pattern that is itself a repetition of something shorter will be
|
||||
// found at that shorter length — skip it here to avoid inflating scores.
|
||||
if (len >= 4 && isPeriodicPattern(candidate)) continue
|
||||
|
||||
let reps = 0, i = 0
|
||||
while (i <= win.length - len) {
|
||||
if (candidate.every((c, j) => c === win[i + j])) { reps++; i += len }
|
||||
else i++
|
||||
}
|
||||
}
|
||||
|
||||
const score = reps * len
|
||||
if (reps >= 2 && score > bestScore) {
|
||||
bestScore = score
|
||||
best = candidate
|
||||
if (reps < 2) continue
|
||||
|
||||
const score = reps * len * len // square length — prevents sub-patterns from beating full loop
|
||||
if (score > bestScore) {
|
||||
bestScore = score
|
||||
best = candidate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return best
|
||||
return best ? canonicalize(best) : null
|
||||
}
|
||||
|
||||
// ─── Debug / analysis helpers ─────────────────────────────────────────────────
|
||||
@@ -450,6 +482,7 @@ export function getNoteHistoryAnalysis(noteHistory) {
|
||||
}
|
||||
return {
|
||||
freq: normalized,
|
||||
total,
|
||||
topKeys: candidates.sort((a, b) => b.score - a.score).slice(0, 5),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,563 @@
|
||||
// ─── Guitar voicing shapes ────────────────────────────────────────────────────
|
||||
// Open string pitches (standard tuning): E A D G B e
|
||||
const OPEN = [4, 9, 2, 7, 11, 4] // pitch class per string [s6 … s1]
|
||||
|
||||
// Barre shape: offsets[] are fret distances from the root fret, per string [s6…s1].
|
||||
// 'x' = muted. rootStr = 1-indexed string that holds the root (6=low E, 5=A…).
|
||||
// Open shape: frets[] are absolute fret numbers (0=open, 'x'=muted) for a specific root key.
|
||||
|
||||
const GUITAR_SHAPES = {
|
||||
maj: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,2,1,0,0], fingers: [1,3,4,2,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,2,2,0], fingers: [0,1,3,4,2,1], barre: { fromStr: 1, toStr: 5, fo: 0 } },
|
||||
{ label: 'D Shape', type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,2], fingers: [0,0,1,3,4,2] },
|
||||
{ label: 'G Shape', type: 'barre', rootStr: 6, offsets: [0,-1,-3,-3,-3,0], fingers: [4,3,1,1,1,4] },
|
||||
{ label: 'Open E', type: 'open', onlyRoot: 4, frets: [0,2,2,1,0,0], fingers: [0,2,3,1,0,0] },
|
||||
{ label: 'Open A', type: 'open', onlyRoot: 9, frets: ['x',0,2,2,2,0], fingers: [0,0,1,2,3,0] },
|
||||
{ label: 'Open G', type: 'open', onlyRoot: 7, frets: [3,2,0,0,0,3], fingers: [2,1,0,0,0,3] },
|
||||
{ label: 'Open C', type: 'open', onlyRoot: 0, frets: ['x',3,2,0,1,0], fingers: [0,3,2,0,1,0] },
|
||||
{ label: 'Open D', type: 'open', onlyRoot: 2, frets: ['x','x',0,2,3,2], fingers: [0,0,0,1,3,2] },
|
||||
],
|
||||
min: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,2,0,0,0], fingers: [1,3,4,1,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,2,1,0], fingers: [0,1,3,4,2,1], barre: { fromStr: 1, toStr: 5, fo: 0 } },
|
||||
{ label: 'D Shape', type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,1], fingers: [0,0,1,3,4,2] },
|
||||
{ label: 'Open Em', type: 'open', onlyRoot: 4, frets: [0,2,2,0,0,0], fingers: [0,2,3,0,0,0] },
|
||||
{ label: 'Open Am', type: 'open', onlyRoot: 9, frets: ['x',0,2,2,1,0], fingers: [0,0,2,3,1,0] },
|
||||
{ label: 'Open Dm', type: 'open', onlyRoot: 2, frets: ['x','x',0,2,3,1], fingers: [0,0,0,2,3,1] },
|
||||
],
|
||||
dom7: [
|
||||
{ label: 'E7 Barre', type: 'barre', rootStr: 6, offsets: [0,2,0,1,0,0], fingers: [1,3,0,2,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A7 Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,0,2,0], fingers: [0,1,2,0,3,0] },
|
||||
{ label: 'D Shape', type: 'barre', rootStr: 4, offsets: ['x','x',0,2,1,2], fingers: [0,0,1,3,2,4] },
|
||||
{ label: 'Open E7', type: 'open', onlyRoot: 4, frets: [0,2,0,1,0,0], fingers: [0,2,0,1,0,0] },
|
||||
{ label: 'Open A7', type: 'open', onlyRoot: 9, frets: ['x',0,2,0,2,0], fingers: [0,0,2,0,3,0] },
|
||||
{ label: 'Open G7', type: 'open', onlyRoot: 7, frets: [3,2,0,0,0,1], fingers: [3,2,0,0,0,1] },
|
||||
{ label: 'Open D7', type: 'open', onlyRoot: 2, frets: ['x','x',0,2,1,2], fingers: [0,0,0,2,1,3] },
|
||||
{ label: 'Open B7', type: 'open', onlyRoot: 11, frets: ['x',2,1,2,0,2], fingers: [0,2,1,3,0,4] },
|
||||
],
|
||||
maj7: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,1,1,0,0], fingers: [1,3,2,2,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,1,2,0], fingers: [0,1,3,2,4,1], barre: { fromStr: 1, toStr: 2, fo: 0 } },
|
||||
{ label: 'D Shape', type: 'barre', rootStr: 4, offsets: ['x','x',0,2,2,2], fingers: [0,0,1,2,3,4], barre: { fromStr: 1, toStr: 3, fo: 2 } },
|
||||
{ label: 'Open Cmaj7', type: 'open', onlyRoot: 0, frets: ['x',3,2,0,0,0], fingers: [0,3,2,0,0,0] },
|
||||
{ label: 'Open Amaj7', type: 'open', onlyRoot: 9, frets: ['x',0,2,1,2,0], fingers: [0,0,2,1,3,0] },
|
||||
{ label: 'Open Emaj7', type: 'open', onlyRoot: 4, frets: [0,2,1,1,0,0], fingers: [0,2,1,1,0,0] },
|
||||
],
|
||||
min7: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,0,0,0,0], fingers: [1,3,1,1,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,0,1,0], fingers: [0,1,3,1,2,1], barre: { fromStr: 1, toStr: 5, fo: 0 } },
|
||||
{ label: 'D Shape', type: 'barre', rootStr: 4, offsets: ['x','x',0,2,1,1], fingers: [0,0,1,3,2,2] },
|
||||
{ label: 'Open Em7', type: 'open', onlyRoot: 4, frets: [0,2,0,0,0,0], fingers: [0,2,0,0,0,0] },
|
||||
{ label: 'Open Am7', type: 'open', onlyRoot: 9, frets: ['x',0,2,0,1,0], fingers: [0,0,2,0,1,0] },
|
||||
{ label: 'Open Dm7', type: 'open', onlyRoot: 2, frets: ['x','x',0,2,1,1], fingers: [0,0,0,3,1,2] },
|
||||
],
|
||||
dim: [
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,1,2,1,'x'], fingers: [0,1,2,4,3,0] },
|
||||
{ label: 'Compact', type: 'barre', rootStr: 4, offsets: ['x','x',0,1,3,1], fingers: [0,0,1,2,4,3] },
|
||||
],
|
||||
dim7: [
|
||||
{ label: 'Movable Box', type: 'barre', rootStr: 5, offsets: ['x',0,1,2,1,2], fingers: [0,1,2,4,3,4] },
|
||||
{ label: 'Compact', type: 'barre', rootStr: 4, offsets: ['x','x',0,1,0,1], fingers: [0,0,1,2,3,4] },
|
||||
],
|
||||
aug: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,3,2,1,1,0], fingers: [1,4,3,2,2,1] },
|
||||
{ label: 'Compact', type: 'barre', rootStr: 5, offsets: ['x',0,3,2,2,'x'], fingers: [0,1,4,2,3,0] },
|
||||
],
|
||||
sus4: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,2,2,0,0], fingers: [1,2,3,4,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,2,3,0], fingers: [0,1,2,3,4,0] },
|
||||
{ label: 'D Shape', type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,3], fingers: [0,0,1,2,3,4] },
|
||||
{ label: 'Open Asus4', type: 'open', onlyRoot: 9, frets: ['x',0,2,2,3,0], fingers: [0,0,1,2,4,0] },
|
||||
{ label: 'Open Dsus4', type: 'open', onlyRoot: 2, frets: ['x','x',0,2,3,3], fingers: [0,0,0,1,2,3] },
|
||||
],
|
||||
sus2: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,4,4,0,0], fingers: [1,2,4,4,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,4,0,0], fingers: [0,1,2,4,1,1], barre: { fromStr: 1, toStr: 2, fo: 0 } },
|
||||
{ label: 'D Shape', type: 'barre', rootStr: 4, offsets: ['x','x',0,2,3,0], fingers: [0,0,1,2,3,0] },
|
||||
{ label: 'Open Asus2', type: 'open', onlyRoot: 9, frets: ['x',0,2,2,0,0], fingers: [0,0,1,2,0,0] },
|
||||
{ label: 'Open Dsus2', type: 'open', onlyRoot: 2, frets: ['x','x',0,2,3,0], fingers: [0,0,0,1,3,0] },
|
||||
],
|
||||
half_dim: [
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,1,0,1,'x'], fingers: [0,1,2,0,3,0] },
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,1,2,0,0,'x'], fingers: [1,2,3,1,1,0], barre: { fromStr: 2, toStr: 6, fo: 0 } },
|
||||
],
|
||||
maj6: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,2,1,2,0], fingers: [1,3,4,2,4,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'A Barre', type: 'barre', rootStr: 5, offsets: ['x',0,2,2,2,2], fingers: [0,1,2,3,4,4], barre: { fromStr: 1, toStr: 2, fo: 2 } },
|
||||
],
|
||||
min6: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,2,0,2,0], fingers: [1,3,4,1,4,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
],
|
||||
add9: [
|
||||
{ label: 'E Barre', type: 'barre', rootStr: 6, offsets: [0,2,4,1,0,2], fingers: [1,2,4,3,1,1], barre: { fromStr: 1, toStr: 6, fo: 0 } },
|
||||
{ label: 'Open Cadd9', type: 'open', onlyRoot: 0, frets: ['x',3,2,0,3,0], fingers: [0,3,2,0,4,0] },
|
||||
{ label: 'Open Gadd9', type: 'open', onlyRoot: 7, frets: [3,2,0,2,3,3], fingers: [2,1,0,3,4,4] },
|
||||
{ label: 'Open Dadd9', type: 'open', onlyRoot: 2, frets: ['x','x',0,2,3,0], fingers: [0,0,0,1,3,0] },
|
||||
],
|
||||
}
|
||||
|
||||
// ─── Piano techniques ─────────────────────────────────────────────────────────
|
||||
// Each technique has intervals for left hand (LH) and right hand (RH) in semitones above root.
|
||||
// Negative values go one octave below root. Labels appear on the keys.
|
||||
|
||||
export const PIANO_TECHNIQUES = {
|
||||
maj: [
|
||||
{
|
||||
name: 'Full Chord',
|
||||
desc: 'Classic voicing — root in left, triad in right',
|
||||
tip: 'Anchor the root alone in your left hand, lock into the rhythm, let right hand sing.',
|
||||
lh: [0],
|
||||
rh: [0, 4, 7],
|
||||
},
|
||||
{
|
||||
name: 'Root + 5th',
|
||||
desc: 'Open, powerful — ambiguous major/minor quality',
|
||||
tip: 'Stack octave + fifth in left hand. Works over major or minor — great for tense moments.',
|
||||
lh: [0, 7],
|
||||
rh: [0, 4, 7, 12],
|
||||
},
|
||||
{
|
||||
name: 'Root + Octave',
|
||||
desc: 'Thunderous low end — fills space in a band',
|
||||
tip: 'Octave doubles in left hand, full chord in right. Huge sound in lower registers.',
|
||||
lh: [0, 12],
|
||||
rh: [4, 7, 12],
|
||||
},
|
||||
{
|
||||
name: 'Spread Voicing',
|
||||
desc: 'Wide, orchestral — two octaves apart',
|
||||
tip: 'Split the chord wide: 5th in left, 3rd + 5th above the octave in right. Very cinematic.',
|
||||
lh: [0, 7],
|
||||
rh: [12, 16, 19],
|
||||
},
|
||||
{
|
||||
name: 'Suspended Approach',
|
||||
desc: 'Play sus4 → resolve to major — creates motion',
|
||||
tip: 'Hit sus4 (replace 3rd with 4th) then release to the major 3rd. Works great in slow ballads.',
|
||||
lh: [0],
|
||||
rh: [0, 5, 7],
|
||||
},
|
||||
],
|
||||
min: [
|
||||
{
|
||||
name: 'Full Chord',
|
||||
desc: 'Classic minor voicing — dark and rich',
|
||||
tip: 'The minor 3rd is everything. Let it ring — do not rush to resolve.',
|
||||
lh: [0],
|
||||
rh: [0, 3, 7],
|
||||
},
|
||||
{
|
||||
name: 'Root + 5th',
|
||||
desc: 'Open ambiguity — dramatic without the sadness',
|
||||
tip: 'Power chord in both hands. Hides the minor quality — use when you want tension without gloom.',
|
||||
lh: [0, 7],
|
||||
rh: [0, 7, 12],
|
||||
},
|
||||
{
|
||||
name: 'Root + Octave',
|
||||
desc: 'Deep anchor — gives bass player space',
|
||||
tip: 'Octave in left only. Right hand plays the minor chord high up for contrast.',
|
||||
lh: [0, 12],
|
||||
rh: [3, 7, 12],
|
||||
},
|
||||
{
|
||||
name: 'Spread Minor',
|
||||
desc: 'Atmospheric and wide — film score territory',
|
||||
tip: 'Wide spacing on minor chords feels melancholic and vast. Popular in ambient and cinematic styles.',
|
||||
lh: [0, 7],
|
||||
rh: [12, 15, 19],
|
||||
},
|
||||
{
|
||||
name: 'Minor + Add9',
|
||||
desc: 'Add the 9th (2nd) — aching, bittersweet quality',
|
||||
tip: 'Replace or add the 9th to minor. Radiohead, Portishead, modern soul — this interval is gold.',
|
||||
lh: [0],
|
||||
rh: [0, 3, 7, 14],
|
||||
},
|
||||
],
|
||||
dom7: [
|
||||
{
|
||||
name: 'Full Dom7',
|
||||
desc: 'Classic dominant — loaded with tension',
|
||||
tip: 'The tritone between the 3rd and ♭7th creates all the tension. Let it ring before resolving.',
|
||||
lh: [0],
|
||||
rh: [0, 4, 7, 10],
|
||||
},
|
||||
{
|
||||
name: 'Shell Voicing (1-3-♭7)',
|
||||
desc: 'Skip the 5th — lean, jazz-approved',
|
||||
tip: 'Root + major 3rd + ♭7th. The tritone is intact, 5th is redundant. Classic jazz comp technique.',
|
||||
lh: [0],
|
||||
rh: [4, 10],
|
||||
},
|
||||
{
|
||||
name: 'Rootless Voicing',
|
||||
desc: 'Advanced comping — let bass hold the root',
|
||||
tip: 'No root in your hands at all. 3rd in left, upper structure in right. Very sophisticated sound.',
|
||||
lh: [4],
|
||||
rh: [7, 10, 14],
|
||||
},
|
||||
{
|
||||
name: 'Blues Stomp',
|
||||
desc: 'Root + 5th left, add ♭7 right — R&B classic',
|
||||
tip: 'Left hand pumps root-5th pattern, right hand stabs the dominant 7th chord. Classic gospel/blues.',
|
||||
lh: [0, 7],
|
||||
rh: [0, 4, 10],
|
||||
},
|
||||
{
|
||||
name: 'Tritone Sub',
|
||||
desc: 'Replace with the chord a tritone away',
|
||||
tip: 'G7 can be replaced with Db7 — they share the same tritone (F and B). Mind-bending jazz move.',
|
||||
lh: [6],
|
||||
rh: [10, 14, 16],
|
||||
},
|
||||
],
|
||||
maj7: [
|
||||
{
|
||||
name: 'Full Maj7',
|
||||
desc: 'Dreamy, floating — jazz and bossa nova',
|
||||
tip: 'The major 7th creates a luminous, slightly unresolved quality. Do not over-play it — let it breathe.',
|
||||
lh: [0],
|
||||
rh: [0, 4, 7, 11],
|
||||
},
|
||||
{
|
||||
name: 'Shell (1-3-7)',
|
||||
desc: 'Root + 3rd + maj7 — lush and clean',
|
||||
tip: 'Skip the 5th. The major 7th directly above the root defines the chord without clutter.',
|
||||
lh: [0],
|
||||
rh: [4, 11],
|
||||
},
|
||||
{
|
||||
name: 'Spread Maj7',
|
||||
desc: 'Maj7 in left hand — wide, orchestral texture',
|
||||
tip: 'Place the 7th below the root (or an octave down). Creates a spacious, choir-like sound.',
|
||||
lh: [0, 11],
|
||||
rh: [12, 16, 19],
|
||||
},
|
||||
{
|
||||
name: 'Add9 Variation',
|
||||
desc: 'Add the 9th for extra colour',
|
||||
tip: 'Maj9 territory. Remove the root in the right hand, add the 9th (D for Cmaj9). Very smooth.',
|
||||
lh: [0],
|
||||
rh: [4, 7, 11, 14],
|
||||
},
|
||||
],
|
||||
min7: [
|
||||
{
|
||||
name: 'Full Min7',
|
||||
desc: 'Smooth and mellow — soul and jazz workhorse',
|
||||
tip: 'The minor 7th chord is the most versatile in jazz. Comp behind everything with this.',
|
||||
lh: [0],
|
||||
rh: [0, 3, 7, 10],
|
||||
},
|
||||
{
|
||||
name: 'Shell (1-♭3-♭7)',
|
||||
desc: 'Just the 3rd and 7th in right — spacious',
|
||||
tip: 'Root in left, minor 3rd + minor 7th in right. Leaves maximum space for the soloist.',
|
||||
lh: [0],
|
||||
rh: [3, 10],
|
||||
},
|
||||
{
|
||||
name: 'Rootless Min7',
|
||||
desc: 'No root — upper structure only',
|
||||
tip: '♭3rd in left, build up from there. Very advanced jazz voicing — trust the bass player.',
|
||||
lh: [3],
|
||||
rh: [10, 14, 15],
|
||||
},
|
||||
{
|
||||
name: 'Spread Atmospheric',
|
||||
desc: 'Wide voicing — ambient and cinematic',
|
||||
tip: 'Minor 7ths voiced wide feel endless. Great for intro sections or building tension.',
|
||||
lh: [0, 7],
|
||||
rh: [10, 15, 19],
|
||||
},
|
||||
],
|
||||
dim: [
|
||||
{
|
||||
name: 'Full Diminished',
|
||||
desc: 'All three tones — tense and unstable',
|
||||
tip: 'Always wants to resolve. Use as a passing chord between diatonic chords.',
|
||||
lh: [0],
|
||||
rh: [0, 3, 6],
|
||||
},
|
||||
{
|
||||
name: 'Octave + Dim',
|
||||
desc: 'Root octave in left — more weight',
|
||||
tip: 'Dim triads are thin — doubling the root in left hand adds body.',
|
||||
lh: [0, 12],
|
||||
rh: [3, 6, 12],
|
||||
},
|
||||
],
|
||||
dim7: [
|
||||
{
|
||||
name: 'Full Dim7',
|
||||
desc: 'Symmetrical — repeats every 3 frets',
|
||||
tip: 'Any note in a dim7 chord can be the root. It modulates effortlessly. Horror/drama gold.',
|
||||
lh: [0],
|
||||
rh: [0, 3, 6, 9],
|
||||
},
|
||||
{
|
||||
name: 'Arpeggiated',
|
||||
desc: 'Roll the notes — tension without crash',
|
||||
tip: 'Roll from bottom to top quickly. Dim7 arpeggios feel like falling — use before a big resolve.',
|
||||
lh: [0, 3],
|
||||
rh: [6, 9, 12],
|
||||
},
|
||||
],
|
||||
aug: [
|
||||
{
|
||||
name: 'Full Augmented',
|
||||
desc: 'Dreamy, unresolved — whole-tone territory',
|
||||
tip: 'Aug chords are symmetrical like dim7 — every inversion sounds the same. Very otherworldly.',
|
||||
lh: [0],
|
||||
rh: [0, 4, 8],
|
||||
},
|
||||
{
|
||||
name: 'Spread Aug',
|
||||
desc: 'Wide voicing — maximises the instability',
|
||||
tip: 'Spread over two octaves. The raised 5th wants to resolve up — let the listener feel the pull.',
|
||||
lh: [0, 8],
|
||||
rh: [12, 16, 20],
|
||||
},
|
||||
],
|
||||
sus4: [
|
||||
{
|
||||
name: 'Full Sus4',
|
||||
desc: 'Suspended — neither major nor minor',
|
||||
tip: 'Ambiguous and open. Resolve down to the major 3rd for instant satisfaction.',
|
||||
lh: [0],
|
||||
rh: [0, 5, 7],
|
||||
},
|
||||
{
|
||||
name: 'Sus4 → Major',
|
||||
desc: 'Play sus4 then resolve — creates motion',
|
||||
tip: 'Hit sus4 on the beat, release to major on the off-beat. The oldest trick in the book.',
|
||||
lh: [0],
|
||||
rh: [5, 7, 12],
|
||||
},
|
||||
{
|
||||
name: 'Root + 5th + Sus',
|
||||
desc: 'Power chord with the fourth on top',
|
||||
tip: 'Very rock and dramatic. The sus4 on top gives it an anthemic, U2-esque quality.',
|
||||
lh: [0, 7],
|
||||
rh: [7, 12, 17],
|
||||
},
|
||||
],
|
||||
sus2: [
|
||||
{
|
||||
name: 'Full Sus2',
|
||||
desc: 'Open, airy — the 2nd instead of 3rd',
|
||||
tip: 'Sus2 chords feel free and unanchored. Great for intros and ambient sections.',
|
||||
lh: [0],
|
||||
rh: [0, 2, 7],
|
||||
},
|
||||
{
|
||||
name: 'Spread Sus2',
|
||||
desc: 'Wide and spacious — very ambient',
|
||||
tip: 'The 2nd voiced wide feels like an open landscape. Sigur Rós territory.',
|
||||
lh: [0, 7],
|
||||
rh: [12, 14, 19],
|
||||
},
|
||||
],
|
||||
half_dim: [
|
||||
{
|
||||
name: 'Full m7♭5',
|
||||
desc: 'Half-diminished — minor 7th with flat 5',
|
||||
tip: 'The ii chord in minor keys (e.g. Bø in C minor). Tense but smoother than full diminished.',
|
||||
lh: [0],
|
||||
rh: [0, 3, 6, 10],
|
||||
},
|
||||
{
|
||||
name: 'Shell (1-♭3-♭7)',
|
||||
desc: 'Skip the flat 5 — cleaner jazz comp',
|
||||
tip: 'The ♭5 is optional in jazz. Root + minor 3rd + minor 7th is clean and functional.',
|
||||
lh: [0],
|
||||
rh: [3, 10],
|
||||
},
|
||||
],
|
||||
maj6: [
|
||||
{
|
||||
name: 'Full Maj6',
|
||||
desc: 'Major with added 6th — vintage jazz sound',
|
||||
tip: 'Maj6 and min7 are inversions of each other. Interchangeable in many jazz contexts.',
|
||||
lh: [0],
|
||||
rh: [0, 4, 7, 9],
|
||||
},
|
||||
{
|
||||
name: 'Shell (1-3-6)',
|
||||
desc: 'Clean and retro — skip the 5th',
|
||||
tip: 'The 6th adds sweetness without too much colour. Django Reinhardt loved this voicing.',
|
||||
lh: [0],
|
||||
rh: [4, 9],
|
||||
},
|
||||
],
|
||||
min6: [
|
||||
{
|
||||
name: 'Full Min6',
|
||||
desc: 'Minor with major 6th — exotic and dark',
|
||||
tip: 'The major 6th over a minor triad is a flamenco and tango staple. Very striking colour.',
|
||||
lh: [0],
|
||||
rh: [0, 3, 7, 9],
|
||||
},
|
||||
{
|
||||
name: 'Shell (1-♭3-6)',
|
||||
desc: 'Tense and colourful — the ♭3+6 tension',
|
||||
tip: 'The minor 3rd + major 6th interval is the characteristic clash of min6. Lean into it.',
|
||||
lh: [0],
|
||||
rh: [3, 9],
|
||||
},
|
||||
],
|
||||
add9: [
|
||||
{
|
||||
name: 'Full Add9',
|
||||
desc: 'Major chord + 9th — no 7th, stays bright',
|
||||
tip: 'The 9th adds colour without the jazz sophistication of maj9. Feels modern and open.',
|
||||
lh: [0],
|
||||
rh: [0, 4, 7, 14],
|
||||
},
|
||||
{
|
||||
name: 'No Root Add9',
|
||||
desc: 'Skip root in right — 3rd + 9th float',
|
||||
tip: 'Root in left, right hand plays 3rd + 5th + 9th. Airy and modern — Radiohead / Coldplay territory.',
|
||||
lh: [0],
|
||||
rh: [4, 7, 14],
|
||||
},
|
||||
{
|
||||
name: 'Sus2-style',
|
||||
desc: 'Add9 voiced as sus2 clusters',
|
||||
tip: 'Place the 9th close to the root (2nd instead of 9th). Creates a shimmering cluster effect.',
|
||||
lh: [0, 7],
|
||||
rh: [2, 4, 7],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// Fallback for chord types not in the map
|
||||
const GENERIC_PIANO = [
|
||||
{
|
||||
name: 'Full Chord',
|
||||
desc: 'Root in left, chord tones in right',
|
||||
tip: 'Play the chord tones in right hand while anchoring the root in the left.',
|
||||
lh: [0],
|
||||
rh: [0], // will be replaced by computed intervals
|
||||
},
|
||||
]
|
||||
|
||||
// ─── Compute functions ────────────────────────────────────────────────────────
|
||||
|
||||
// Parse a chord name like "C#m7" → { rootPc: 1, type: 'min7' }
|
||||
// Mirrors the logic in theory.js parseChord
|
||||
function parseChord(name) {
|
||||
if (!name) return null
|
||||
const NOTES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']
|
||||
const NOTES_FLAT = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B']
|
||||
const suffixMap = {
|
||||
'': 'maj', 'm': 'min', 'min': 'min', 'maj': 'maj',
|
||||
'7': 'dom7', 'maj7': 'maj7', 'm7': 'min7', 'min7': 'min7',
|
||||
'dim': 'dim', 'dim7': 'dim7', 'm7b5': 'half_dim', 'ø': 'half_dim', 'ø7': 'half_dim',
|
||||
'aug': 'aug', '+': 'aug',
|
||||
'sus4': 'sus4', 'sus2': 'sus2',
|
||||
'6': 'maj6', 'm6': 'min6', 'min6': 'min6',
|
||||
'add9': 'add9',
|
||||
}
|
||||
|
||||
let rest = name
|
||||
let root = ''
|
||||
if (rest.length > 1 && (rest[1] === '#' || rest[1] === 'b')) {
|
||||
root = rest.slice(0, 2); rest = rest.slice(2)
|
||||
} else {
|
||||
root = rest.slice(0, 1); rest = rest.slice(1)
|
||||
}
|
||||
|
||||
let rootPc = NOTES.indexOf(root)
|
||||
if (rootPc === -1) rootPc = NOTES_FLAT.indexOf(root)
|
||||
if (rootPc === -1) return null
|
||||
|
||||
const type = suffixMap[rest] ?? 'maj'
|
||||
return { rootPc, type }
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of voicing objects for a given chord name.
|
||||
* Each voicing: { label, frets[6], fingers[6], barre?, baseFret }
|
||||
* frets values: number (fret) or 'x' (muted) or 0 (open)
|
||||
*/
|
||||
export function getGuitarVoicings(chordName) {
|
||||
const parsed = parseChord(chordName)
|
||||
if (!parsed) return []
|
||||
const { rootPc, type } = parsed
|
||||
const shapes = GUITAR_SHAPES[type] ?? GUITAR_SHAPES.maj
|
||||
|
||||
const result = []
|
||||
|
||||
for (const shape of shapes) {
|
||||
if (shape.type === 'open') {
|
||||
if (shape.onlyRoot !== undefined && shape.onlyRoot !== rootPc) continue
|
||||
result.push({
|
||||
label: shape.label,
|
||||
frets: shape.frets,
|
||||
fingers: shape.fingers,
|
||||
barre: null,
|
||||
baseFret: 1,
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
// barre shape: compute rootFret on rootStr
|
||||
const strIdx = shape.rootStr - 1 // 0=s6 … 5=s1
|
||||
const openPc = OPEN[strIdx]
|
||||
let rootFret = (rootPc - openPc + 12) % 12
|
||||
|
||||
// Compute absolute frets
|
||||
const frets = shape.offsets.map((off, i) => {
|
||||
if (off === 'x') return 'x'
|
||||
return rootFret + off
|
||||
})
|
||||
|
||||
// Skip impossible positions
|
||||
if (frets.some(f => typeof f === 'number' && f < 0)) continue
|
||||
const maxFret = Math.max(...frets.filter(f => f !== 'x'))
|
||||
if (maxFret > 15) continue
|
||||
|
||||
// baseFret: start diagram so the chord fits in 5 frets
|
||||
const minFret = Math.min(...frets.filter(f => f !== 'x' && f > 0))
|
||||
const baseFret = rootFret === 0 ? 1 : Math.max(1, minFret)
|
||||
|
||||
// Compute barre position if applicable
|
||||
let barre = null
|
||||
if (shape.barre) {
|
||||
barre = {
|
||||
fret: rootFret + shape.barre.fo,
|
||||
fromStr: shape.barre.fromStr,
|
||||
toStr: shape.barre.toStr,
|
||||
}
|
||||
}
|
||||
|
||||
// For open-string E/A chords (rootFret=0), no barre needed
|
||||
if (rootFret === 0) barre = null
|
||||
|
||||
result.push({
|
||||
label: shape.label + (rootFret === 0 ? ' (Open)' : rootFret > 5 ? ` — Fret ${rootFret}` : ''),
|
||||
frets,
|
||||
fingers: shape.fingers,
|
||||
barre,
|
||||
baseFret,
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns piano techniques for a chord name.
|
||||
* Each technique has: { name, desc, tip, lh (intervals), rh (intervals) }
|
||||
*/
|
||||
export function getPianoTechniques(chordName) {
|
||||
const parsed = parseChord(chordName)
|
||||
if (!parsed) return []
|
||||
const { type } = parsed
|
||||
return PIANO_TECHNIQUES[type] ?? GENERIC_PIANO
|
||||
}
|
||||
|
||||
export { parseChord }
|
||||
@@ -78,7 +78,17 @@ export function useAudioTuner() {
|
||||
const startListening = async () => {
|
||||
if (isListening) return
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
// Read saved device selection from config (if present)
|
||||
let deviceId = null
|
||||
try {
|
||||
const cfg = JSON.parse(localStorage.getItem('wtf_config') || '{}')
|
||||
deviceId = cfg.audioDeviceId || null
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
const constraints = deviceId ? { audio: { deviceId: { exact: deviceId } } } : { audio: true }
|
||||
console.log('Tuner requesting getUserMedia with', constraints)
|
||||
const stream = await navigator.mediaDevices.getUserMedia(constraints)
|
||||
const ctx = new (window.AudioContext || window.webkitAudioContext)()
|
||||
const analyser = ctx.createAnalyser()
|
||||
analyser.fftSize = 4096
|
||||
|
||||
@@ -0,0 +1,359 @@
|
||||
import { useRef, useState, useCallback, useEffect } from 'react'
|
||||
|
||||
const INITIAL_SLOT_COUNT = 4
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function makeWaveform(audioBuffer, points = 200) {
|
||||
const data = audioBuffer.getChannelData(0)
|
||||
const step = Math.max(1, Math.floor(data.length / points))
|
||||
const out = new Float32Array(points)
|
||||
for (let i = 0; i < points; i++) {
|
||||
let max = 0
|
||||
for (let j = 0; j < step; j++) {
|
||||
const v = Math.abs(data[i * step + j] ?? 0)
|
||||
if (v > max) max = v
|
||||
}
|
||||
out[i] = max
|
||||
}
|
||||
const peak = Math.max(...out, 0.001)
|
||||
for (let i = 0; i < points; i++) out[i] /= peak
|
||||
return out
|
||||
}
|
||||
|
||||
function makeEmptySlot() {
|
||||
return {
|
||||
status: 'empty', // 'empty'|'recording'|'trimming'|'playing'|'muted'
|
||||
audioBuffer: null,
|
||||
originalBuffer: null, // always the full recording, never overwritten
|
||||
waveform: null, // Float32Array(200) for canvas display
|
||||
trimStart: 0,
|
||||
trimEnd: 1,
|
||||
volume: 0.8,
|
||||
sourceNode: null,
|
||||
gainNode: null,
|
||||
recordingDuration: 0,
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Hook ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useLoopEngine(bpm) {
|
||||
const audioCtxRef = useRef(null)
|
||||
const masterStartRef = useRef(null) // AudioContext timestamp of first loop start
|
||||
const masterLenRef = useRef(null) // master loop length in seconds
|
||||
const recorderRef = useRef(null) // { mr, chunks, slotIdx }
|
||||
const slotsRef = useRef(null)
|
||||
const streamRef = useRef(null)
|
||||
const timerRef = useRef(null)
|
||||
|
||||
const [slots, setSlots] = useState(() => {
|
||||
const s = Array.from({ length: INITIAL_SLOT_COUNT }, makeEmptySlot)
|
||||
slotsRef.current = s
|
||||
return s
|
||||
})
|
||||
const [masterLen, setMasterLen] = useState(null) // mirrors masterLenRef for display
|
||||
|
||||
const updateSlot = useCallback((idx, patch) => {
|
||||
setSlots(prev => {
|
||||
const next = prev.map((s, i) => i === idx ? { ...s, ...patch } : s)
|
||||
slotsRef.current = next
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
// ── AudioContext ────────────────────────────────────────────────────────────
|
||||
const ensureCtx = useCallback(() => {
|
||||
if (!audioCtxRef.current || audioCtxRef.current.state === 'closed') {
|
||||
audioCtxRef.current = new AudioContext()
|
||||
}
|
||||
if (audioCtxRef.current.state === 'suspended') {
|
||||
audioCtxRef.current.resume().catch(() => {})
|
||||
}
|
||||
return audioCtxRef.current
|
||||
}, [])
|
||||
|
||||
// ── Called by AudioCapture when mic stream is ready ─────────────────────────
|
||||
const setStream = useCallback((stream) => {
|
||||
streamRef.current = stream
|
||||
ensureCtx() // pre-warm so first record click has no AudioContext startup lag
|
||||
}, [ensureCtx])
|
||||
|
||||
// ── Start recording on a slot ───────────────────────────────────────────────
|
||||
const startRecord = useCallback((slotIdx) => {
|
||||
if (recorderRef.current) return // one at a time
|
||||
if (!streamRef.current) return
|
||||
|
||||
const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
|
||||
? 'audio/webm;codecs=opus'
|
||||
: 'audio/webm'
|
||||
|
||||
const mr = new MediaRecorder(streamRef.current, { mimeType })
|
||||
const chunks = []
|
||||
|
||||
mr.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data) }
|
||||
|
||||
mr.onstop = async () => {
|
||||
clearInterval(timerRef.current)
|
||||
timerRef.current = null
|
||||
// Guard: was this slot cancelled before onstop fired?
|
||||
if (slotsRef.current[slotIdx]?.status !== 'recording') return
|
||||
try {
|
||||
const ctx = ensureCtx()
|
||||
const blob = new Blob(chunks, { type: mimeType })
|
||||
const arrayBuffer = await blob.arrayBuffer()
|
||||
const audioBuffer = await ctx.decodeAudioData(arrayBuffer)
|
||||
const waveform = makeWaveform(audioBuffer)
|
||||
updateSlot(slotIdx, {
|
||||
status: 'trimming',
|
||||
audioBuffer,
|
||||
originalBuffer: audioBuffer, // preserve forever
|
||||
waveform,
|
||||
trimStart: 0,
|
||||
trimEnd: 1,
|
||||
})
|
||||
} catch (err) {
|
||||
console.warn('[LoopEngine] decode failed:', err)
|
||||
updateSlot(slotIdx, makeEmptySlot())
|
||||
}
|
||||
recorderRef.current = null
|
||||
}
|
||||
|
||||
mr.onerror = () => {
|
||||
clearInterval(timerRef.current)
|
||||
timerRef.current = null
|
||||
recorderRef.current = null
|
||||
updateSlot(slotIdx, makeEmptySlot())
|
||||
}
|
||||
|
||||
recorderRef.current = { mr, chunks, slotIdx }
|
||||
mr.start(250)
|
||||
updateSlot(slotIdx, { status: 'recording', recordingDuration: 0 })
|
||||
|
||||
const t0 = Date.now()
|
||||
timerRef.current = setInterval(() => {
|
||||
updateSlot(slotIdx, { recordingDuration: (Date.now() - t0) / 1000 })
|
||||
}, 100)
|
||||
}, [ensureCtx, updateSlot])
|
||||
|
||||
// ── Stop recording → triggers onstop → trimming state ──────────────────────
|
||||
const stopRecord = useCallback((slotIdx) => {
|
||||
const rec = recorderRef.current
|
||||
if (!rec || rec.slotIdx !== slotIdx) return
|
||||
if (rec.mr.state !== 'inactive') rec.mr.stop()
|
||||
clearInterval(timerRef.current)
|
||||
timerRef.current = null
|
||||
}, [])
|
||||
|
||||
// ── Cancel recording (discard) ──────────────────────────────────────────────
|
||||
const cancelRecord = useCallback((slotIdx) => {
|
||||
const rec = recorderRef.current
|
||||
if (rec && rec.slotIdx === slotIdx) {
|
||||
// Prevent onstop from processing by marking slot empty first
|
||||
updateSlot(slotIdx, makeEmptySlot())
|
||||
if (rec.mr.state !== 'inactive') rec.mr.stop()
|
||||
recorderRef.current = null
|
||||
} else {
|
||||
updateSlot(slotIdx, makeEmptySlot())
|
||||
}
|
||||
clearInterval(timerRef.current)
|
||||
timerRef.current = null
|
||||
}, [updateSlot])
|
||||
|
||||
// ── Commit trim and start looping ───────────────────────────────────────────
|
||||
const commitTrim = useCallback((slotIdx, trimStart, trimEnd) => {
|
||||
const ctx = ensureCtx()
|
||||
const slot = slotsRef.current[slotIdx]
|
||||
if (!slot?.audioBuffer) return
|
||||
|
||||
const fullBuf = slot.audioBuffer
|
||||
const sr = fullBuf.sampleRate
|
||||
const startSample = Math.floor(trimStart * fullBuf.length)
|
||||
const endSample = Math.ceil(trimEnd * fullBuf.length)
|
||||
const rawLen = endSample - startSample
|
||||
if (rawLen < sr * 0.2) return // reject clips shorter than 200ms
|
||||
|
||||
const rawData = fullBuf.getChannelData(0).slice(startSample, endSample)
|
||||
const rawSec = rawLen / sr
|
||||
|
||||
// Master loop length is set exactly from the first loop's trimmed region.
|
||||
// Subsequent loops are padded/trimmed to match that length.
|
||||
const isFirst = masterLenRef.current === null
|
||||
const targetSec = isFirst ? rawSec : masterLenRef.current
|
||||
const targetLen = Math.round(targetSec * sr)
|
||||
|
||||
const finalData = new Float32Array(targetLen) // zero-padded by default
|
||||
finalData.set(rawData.slice(0, Math.min(rawLen, targetLen)))
|
||||
|
||||
const finalBuf = ctx.createBuffer(1, targetLen, sr)
|
||||
finalBuf.copyToChannel(finalData, 0)
|
||||
|
||||
if (isFirst) {
|
||||
masterLenRef.current = targetSec
|
||||
setMasterLen(targetSec)
|
||||
}
|
||||
|
||||
const gainNode = ctx.createGain()
|
||||
gainNode.gain.value = slot.volume
|
||||
gainNode.connect(ctx.destination)
|
||||
|
||||
const sourceNode = ctx.createBufferSource()
|
||||
sourceNode.buffer = finalBuf
|
||||
sourceNode.loop = true
|
||||
sourceNode.loopStart = 0
|
||||
sourceNode.loopEnd = targetSec
|
||||
sourceNode.connect(gainNode)
|
||||
|
||||
// Schedule: first loop starts immediately; subsequent loops snap to the
|
||||
// next master loop boundary so they play in perfect sync.
|
||||
let startTime
|
||||
if (isFirst) {
|
||||
startTime = ctx.currentTime + 0.05
|
||||
masterStartRef.current = startTime
|
||||
} else {
|
||||
const elapsed = ctx.currentTime - masterStartRef.current
|
||||
const loopLen = masterLenRef.current
|
||||
const posInLoop = elapsed % loopLen
|
||||
const remaining = loopLen - posInLoop
|
||||
const LOOKAHEAD = 0.05
|
||||
startTime = ctx.currentTime + (remaining > LOOKAHEAD ? remaining : remaining + loopLen)
|
||||
}
|
||||
sourceNode.start(startTime)
|
||||
|
||||
updateSlot(slotIdx, {
|
||||
status: 'playing',
|
||||
audioBuffer: finalBuf,
|
||||
originalBuffer: slot.originalBuffer ?? null, // preserve original
|
||||
waveform: makeWaveform(finalBuf),
|
||||
trimStart: 0,
|
||||
trimEnd: 1,
|
||||
sourceNode,
|
||||
gainNode,
|
||||
})
|
||||
}, [ensureCtx, updateSlot])
|
||||
|
||||
// ── Re-trim: return a playing/muted slot back to the trimmer ────────────────
|
||||
const retrimSlot = useCallback((slotIdx) => {
|
||||
const slot = slotsRef.current[slotIdx]
|
||||
if (!slot?.originalBuffer) return
|
||||
|
||||
// Stop current playback
|
||||
try { slot.sourceNode?.stop() } catch {}
|
||||
try { slot.sourceNode?.disconnect() } catch {}
|
||||
try { slot.gainNode?.disconnect() } catch {}
|
||||
|
||||
// Reset master timing if no other loops remain active
|
||||
const hasOthers = slotsRef.current.some((s, i) =>
|
||||
i !== slotIdx && (s.status === 'playing' || s.status === 'muted')
|
||||
)
|
||||
if (!hasOthers) {
|
||||
masterStartRef.current = null
|
||||
masterLenRef.current = null
|
||||
setMasterLen(null)
|
||||
}
|
||||
|
||||
updateSlot(slotIdx, {
|
||||
status: 'trimming',
|
||||
audioBuffer: slot.originalBuffer,
|
||||
waveform: makeWaveform(slot.originalBuffer),
|
||||
originalBuffer: slot.originalBuffer,
|
||||
trimStart: 0,
|
||||
trimEnd: 1,
|
||||
sourceNode: null,
|
||||
gainNode: null,
|
||||
})
|
||||
}, [updateSlot])
|
||||
|
||||
// ── Toggle mute ─────────────────────────────────────────────────────────────
|
||||
const toggleMute = useCallback((slotIdx) => {
|
||||
const ctx = audioCtxRef.current
|
||||
const slot = slotsRef.current[slotIdx]
|
||||
if (!slot || !ctx) return
|
||||
if (slot.status !== 'playing' && slot.status !== 'muted') return
|
||||
const muting = slot.status === 'playing'
|
||||
slot.gainNode?.gain.setTargetAtTime(muting ? 0 : slot.volume, ctx.currentTime, 0.02)
|
||||
updateSlot(slotIdx, { status: muting ? 'muted' : 'playing' })
|
||||
}, [updateSlot])
|
||||
|
||||
// ── Delete slot ─────────────────────────────────────────────────────────────
|
||||
const deleteSlot = useCallback((slotIdx) => {
|
||||
const slot = slotsRef.current[slotIdx]
|
||||
if (!slot) return
|
||||
if (slot.status === 'recording') cancelRecord(slotIdx)
|
||||
try { slot.sourceNode?.stop() } catch {}
|
||||
try { slot.sourceNode?.disconnect() } catch {}
|
||||
try { slot.gainNode?.disconnect() } catch {}
|
||||
|
||||
// Reset master timing when no loops remain active
|
||||
const hasOthers = slotsRef.current.some((s, i) =>
|
||||
i !== slotIdx && (s.status === 'playing' || s.status === 'muted')
|
||||
)
|
||||
if (!hasOthers) {
|
||||
masterStartRef.current = null
|
||||
masterLenRef.current = null
|
||||
setMasterLen(null)
|
||||
}
|
||||
updateSlot(slotIdx, makeEmptySlot())
|
||||
}, [cancelRecord, updateSlot])
|
||||
|
||||
// ── Volume ──────────────────────────────────────────────────────────────────
|
||||
const setVolume = useCallback((slotIdx, vol) => {
|
||||
const ctx = audioCtxRef.current
|
||||
const slot = slotsRef.current[slotIdx]
|
||||
if (slot?.gainNode && ctx && slot.status === 'playing') {
|
||||
slot.gainNode.gain.setTargetAtTime(vol, ctx.currentTime, 0.02)
|
||||
}
|
||||
updateSlot(slotIdx, { volume: vol })
|
||||
}, [updateSlot])
|
||||
|
||||
// ── Main click handler (drives the state machine) ───────────────────────────
|
||||
const handleSlotClick = useCallback((slotIdx) => {
|
||||
const slot = slotsRef.current[slotIdx]
|
||||
if (!slot) return
|
||||
switch (slot.status) {
|
||||
case 'empty': startRecord(slotIdx); break
|
||||
case 'recording': stopRecord(slotIdx); break
|
||||
case 'playing':
|
||||
case 'muted': toggleMute(slotIdx); break
|
||||
// 'trimming' is handled entirely by LoopTrimmer
|
||||
}
|
||||
}, [startRecord, stopRecord, toggleMute])
|
||||
|
||||
// ── Add a new empty slot ────────────────────────────────────────────────────
|
||||
const addSlot = useCallback(() => {
|
||||
setSlots(prev => {
|
||||
const next = [...prev, makeEmptySlot()]
|
||||
slotsRef.current = next
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
// ── Cleanup ─────────────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearInterval(timerRef.current)
|
||||
slotsRef.current?.forEach(s => {
|
||||
try { s.sourceNode?.stop() } catch {}
|
||||
try { s.sourceNode?.disconnect() } catch {}
|
||||
try { s.gainNode?.disconnect() } catch {}
|
||||
})
|
||||
try { audioCtxRef.current?.close() } catch {}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return {
|
||||
slots,
|
||||
masterLen,
|
||||
setStream,
|
||||
handleSlotClick,
|
||||
commitTrim,
|
||||
cancelRecord,
|
||||
retrimSlot,
|
||||
deleteSlot,
|
||||
setVolume,
|
||||
addSlot,
|
||||
audioCtxRef,
|
||||
masterStartRef,
|
||||
masterLenRef,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user