How vyk2rr/five-strings-guitar works
This is a browser-based music tool for choosing a root and chord, then comparing its voicing on a piano and five-string guitar. The main path runs from the app’s chord palette through chord generation and voicing into both visualizations; the piano also provides note highlighting and Tone.js playback. The README supplied no capability detail, so the map follows the sampled app and source index; some component internals and the ChordPalette component’s runtime use were not shown.
Main entry points: App.tsx Music workspace · PianoBase.tsx Piano view · PianoBase.types.ts Music types · FiveStringsGuitar.tsx Five-string guitar
Components 14
App orchestration
- React entry
src/main.tsx - Music workspace
src/App.tsx
Instrument views
- Chord palette UI
src/ChordPalette/ChordPalette.tsx - Piano view
src/PianoBase/PianoBase.tsx - Five-string guitar
src/FiveStringsGuitar/FiveStringsGuitar.tsx
Music logic
- Chord generation
src/ChordPalette/ChordPalette.utils.tsx - Voicing spread
src/FiveStringsGuitar/FiveStringsGuitar.utils.tsx - Piano geometry
src/PianoBase/PianoBase.utils.ts - Music types
src/PianoBase/PianoBase.types.ts
Interaction and audio
- Note highlighting
src/hooks/useHighlight/useHighlight.ts - Tone playback
src/hooks/useToneJs/useToneJs.tsx - Piano observer
src/PianoObserver/PianoObserver.ts
Other components
- Musician
- Tone.js engine
Connections 19
- Musician → Music workspace: selects chords
src/App.tsx - React entry → Music workspace: renders
src/main.tsx - Music workspace → Chord generation: generates chords
src/App.tsx - Music workspace → Voicing spread: spreads voicing
src/App.tsx - Music workspace → Piano view: renders highlights
src/App.tsx - Music workspace → Five-string guitar: renders voicing
src/App.tsx - Five-string guitar → Music workspace: reports unassigned
src/FiveStringsGuitar/FiveStringsGuitar.tsx - Music workspace → Chord palette UI: not shown
- Chord palette UI → Chord generation: uses utilities
src/ChordPalette/ChordPalette.tsx - Piano view → Piano geometry: uses geometry
src/PianoBase/PianoBase.tsx - Piano view → Note highlighting: tracks highlights
src/PianoBase/PianoBase.tsx - Piano view → Tone playback: delegates playback
src/PianoBase/PianoBase.tsx - Tone playback → Tone.js engine: plays audio
src/hooks/useToneJs/useToneJs.tsx - Piano view → Piano observer: accepts observer
src/PianoBase/PianoBase.tsx - Music workspace → Music types: uses chord types
src/App.tsx - Piano view → Music types: uses piano types
src/PianoBase/PianoBase.tsx - Five-string guitar → Music types: uses chord types
src/FiveStringsGuitar/FiveStringsGuitar.tsx - Chord generation → Music types: uses chord intervals
src/ChordPalette/ChordPalette.utils.tsx - Voicing spread → Music types: uses chord types
src/FiveStringsGuitar/FiveStringsGuitar.utils.tsx