# tboi0602/musical_instrument architecture > Architecture diagram of the GitHub repository tboi0602/musical_instrument, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/tboi0602/musical_instrument - Repository: https://github.com/tboi0602/musical_instrument ## Overview Chordroom is a browser-based Vietnamese guitar and piano practice studio. The main workflow turns a keyboard or on-screen chord action into a scale-degree chord and one chosen playing technique, then renders instrument notes through modeled audio sources that ring naturally. Separate capabilities cover metronome timing, song progression editing, and configurable instrument techniques; the README explicitly says patterns are compatibility data, not an automatic accompaniment path. The graph follows documented behavior and sampled calls; unsampled component wiring is omitted where uncertain. Main entry points: [`src/audio/core/AudioEngine.ts`](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/core/AudioEngine.ts) (Audio engine), [`src/components/Studio.tsx`](https://github.com/tboi0602/musical_instrument/blob/main/src/components/Studio.tsx) (Studio shell), [`src/store/studio.ts`](https://github.com/tboi0602/musical_instrument/blob/main/src/store/studio.ts) (Studio settings), [`src/musicTheory/chords.ts`](https://github.com/tboi0602/musical_instrument/blob/main/src/musicTheory/chords.ts) (Chord and scale theory) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_experience["Studio experience"] node_studio["Studio shell
[Studio.tsx]"] node_controls["Sound controls
[ControlBar.tsx]"] node_keyboard["Chord keyboard
[ChordKeyboard.tsx]"] node_performance["Performance view
[Performance.tsx]"] node_manualpanel["Manual play"] end subgraph group_music["Music and songs"] node_songpanel["Song editor
[SongPanel.tsx]"] node_patterneditor["Pattern editor
[PatternEditor.tsx]"] node_theory["Chord and scale theory
[chords.ts]"] node_progressions["Song progressions
[progressions.ts]"] node_notes["Note utilities
[notes.ts]"] end subgraph group_audio["Audio runtime"] node_engine["Audio engine
[AudioEngine.ts]"] node_manual["Technique selection
[manual.ts]"] node_instrument["Instrument contract
[Instrument.ts]"] node_guitar["Guitar engine
[GuitarEngine.ts]"] node_piano["Piano engine
[PianoEngine.ts]"] node_voicing["Guitar voicing
[GuitarVoicing.ts]"] node_source["Modeled sound source
[SoundSource.ts]"] node_scheduler["Metronome scheduler
[Scheduler.ts]"] node_rhythm["Meter utilities
[PatternEngine.ts]"] node_patterns["Pattern presets
[patterns.ts]"] end subgraph group_state["Settings and state"] node_store["Studio settings
[studio.ts]"] node_browserstore[("Device storage")] end node_player(("Player")) node_browseraudio(("Web Audio")) node_player -->|"uses"| node_studio node_studio -->|"hydrates state"| node_store node_studio -->|"handles transport"| node_engine node_studio -->|"hosts"| node_keyboard node_studio -->|"hosts"| node_controls node_studio -->|"hosts"| node_performance node_studio -->|"hosts"| node_manualpanel node_keyboard -->|"builds chords"| node_theory node_keyboard -->|"triggers chord"| node_engine node_manualpanel -->|"triggers chord"| node_engine node_controls -->|"updates settings"| node_store node_performance -->|"reads playback state"| node_engine node_performance -->|"builds display chord"| node_theory node_songpanel -->|"parses and resolves"| node_progressions node_songpanel -->|"saves song"| node_store node_songpanel -->|"plays selected chord"| node_engine node_patterneditor -->|"edits patterns"| node_store node_patterneditor -->|"previews chord"| node_engine node_store -->|"reads and writes"| node_browserstore node_store -->|"loads presets"| node_patterns node_store -->|"adapts and validates"| node_rhythm node_engine -->|"builds scale chords"| node_theory node_engine -->|"selects technique"| node_manual node_engine -->|"dispatches performance"| node_guitar node_engine -->|"dispatches performance"| node_piano node_engine -->|"runs metronome"| node_scheduler node_engine -->|"gets meter timing"| node_rhythm node_guitar -->|"implements"| node_instrument node_piano -->|"implements"| node_instrument node_guitar -->|"gets string voicing"| node_voicing node_piano -->|"inverts and voice-leads"| node_theory node_guitar -->|"plays modeled notes"| node_source node_piano -->|"plays modeled notes"| node_source node_engine -->|"creates audio graph"| node_browseraudio node_source -->|"outputs sound"| node_browseraudio node_scheduler -->|"schedules clicks"| node_browseraudio node_progressions -->|"resolves chord data"| node_theory node_theory -->|"uses note utilities"| node_notes click node_studio "https://github.com/tboi0602/musical_instrument/blob/main/src/components/Studio.tsx" click node_controls "https://github.com/tboi0602/musical_instrument/blob/main/src/components/controls/ControlBar.tsx" click node_keyboard "https://github.com/tboi0602/musical_instrument/blob/main/src/components/keyboard/ChordKeyboard.tsx" click node_performance "https://github.com/tboi0602/musical_instrument/blob/main/src/components/music/Performance.tsx" click node_manualpanel "https://github.com/tboi0602/musical_instrument/blob/main/src/components/music/ManualPlayPanel.tsx" click node_songpanel "https://github.com/tboi0602/musical_instrument/blob/main/src/components/song/SongPanel.tsx" click node_patterneditor "https://github.com/tboi0602/musical_instrument/blob/main/src/components/pattern/PatternEditor.tsx" click node_theory "https://github.com/tboi0602/musical_instrument/blob/main/src/musicTheory/chords.ts" click node_progressions "https://github.com/tboi0602/musical_instrument/blob/main/src/musicTheory/progressions.ts" click node_notes "https://github.com/tboi0602/musical_instrument/blob/main/src/musicTheory/notes.ts" click node_store "https://github.com/tboi0602/musical_instrument/blob/main/src/store/studio.ts" click node_engine "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/core/AudioEngine.ts" click node_manual "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/manual.ts" click node_instrument "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/Instrument.ts" click node_guitar "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/guitar/GuitarEngine.ts" click node_piano "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/piano/PianoEngine.ts" click node_voicing "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/guitar/GuitarVoicing.ts" click node_source "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/core/SoundSource.ts" click node_scheduler "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/core/Scheduler.ts" click node_rhythm "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/rhythm/PatternEngine.ts" click node_patterns "https://github.com/tboi0602/musical_instrument/blob/main/src/audio/rhythm/patterns.ts" classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554 classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337 classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81 classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a class node_studio,node_controls,node_keyboard,node_performance,node_manualpanel toneBlue class node_songpanel,node_patterneditor,node_theory,node_progressions,node_notes toneAmber class node_engine,node_manual,node_instrument,node_guitar,node_piano,node_voicing,node_source,node_scheduler,node_rhythm,node_patterns toneMint class node_store,node_browserstore toneRose class node_player,node_browseraudio toneIndigo ``` ## Components ### Studio experience - [Studio shell](https://github.com/tboi0602/musical_instrument/blob/main/src/components/Studio.tsx): `src/components/Studio.tsx` - [Sound controls](https://github.com/tboi0602/musical_instrument/blob/main/src/components/controls/ControlBar.tsx): `src/components/controls/ControlBar.tsx` - [Chord keyboard](https://github.com/tboi0602/musical_instrument/blob/main/src/components/keyboard/ChordKeyboard.tsx): `src/components/keyboard/ChordKeyboard.tsx` - [Performance view](https://github.com/tboi0602/musical_instrument/blob/main/src/components/music/Performance.tsx): `src/components/music/Performance.tsx` - [Manual play](https://github.com/tboi0602/musical_instrument/blob/main/src/components/music/ManualPlayPanel.tsx): `src/components/music/ManualPlayPanel.tsx` ### Music and songs - [Song editor](https://github.com/tboi0602/musical_instrument/blob/main/src/components/song/SongPanel.tsx): `src/components/song/SongPanel.tsx` - [Pattern editor](https://github.com/tboi0602/musical_instrument/blob/main/src/components/pattern/PatternEditor.tsx): `src/components/pattern/PatternEditor.tsx` - [Chord and scale theory](https://github.com/tboi0602/musical_instrument/blob/main/src/musicTheory/chords.ts): `src/musicTheory/chords.ts` - [Song progressions](https://github.com/tboi0602/musical_instrument/blob/main/src/musicTheory/progressions.ts): `src/musicTheory/progressions.ts` - [Note utilities](https://github.com/tboi0602/musical_instrument/blob/main/src/musicTheory/notes.ts): `src/musicTheory/notes.ts` ### Audio runtime - [Audio engine](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/core/AudioEngine.ts): `src/audio/core/AudioEngine.ts` - [Technique selection](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/manual.ts): `src/audio/manual.ts` - [Instrument contract](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/Instrument.ts): `src/audio/instruments/Instrument.ts` - [Guitar engine](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/guitar/GuitarEngine.ts): `src/audio/instruments/guitar/GuitarEngine.ts` - [Piano engine](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/piano/PianoEngine.ts): `src/audio/instruments/piano/PianoEngine.ts` - [Guitar voicing](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/instruments/guitar/GuitarVoicing.ts): `src/audio/instruments/guitar/GuitarVoicing.ts` - [Modeled sound source](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/core/SoundSource.ts): `src/audio/core/SoundSource.ts` - [Metronome scheduler](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/core/Scheduler.ts): `src/audio/core/Scheduler.ts` - [Meter utilities](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/rhythm/PatternEngine.ts): `src/audio/rhythm/PatternEngine.ts` - [Pattern presets](https://github.com/tboi0602/musical_instrument/blob/main/src/audio/rhythm/patterns.ts): `src/audio/rhythm/patterns.ts` ### Settings and state - [Studio settings](https://github.com/tboi0602/musical_instrument/blob/main/src/store/studio.ts): `src/store/studio.ts` - **Device storage** ### Other components - **Player** - **Web Audio** ## Connections - Player → Studio shell: uses - Studio shell → Studio settings: hydrates state - Studio shell → Audio engine: handles transport - Studio shell → Chord keyboard: hosts - Studio shell → Sound controls: hosts - Studio shell → Performance view: hosts - Studio shell → Manual play: hosts - Chord keyboard → Chord and scale theory: builds chords - Chord keyboard → Audio engine: triggers chord - Manual play → Audio engine: triggers chord - Sound controls → Studio settings: updates settings - Performance view → Audio engine: reads playback state - Performance view → Chord and scale theory: builds display chord - Song editor → Song progressions: parses and resolves - Song editor → Studio settings: saves song - Song editor → Audio engine: plays selected chord - Pattern editor → Studio settings: edits patterns - Pattern editor → Audio engine: previews chord - Studio settings → Device storage: reads and writes - Studio settings → Pattern presets: loads presets - Studio settings → Meter utilities: adapts and validates - Audio engine → Chord and scale theory: builds scale chords - Audio engine → Technique selection: selects technique - Audio engine → Guitar engine: dispatches performance - Audio engine → Piano engine: dispatches performance - Audio engine → Metronome scheduler: runs metronome - Audio engine → Meter utilities: gets meter timing - Guitar engine → Instrument contract: implements - Piano engine → Instrument contract: implements - Guitar engine → Guitar voicing: gets string voicing - Piano engine → Chord and scale theory: inverts and voice-leads - Guitar engine → Modeled sound source: plays modeled notes - Piano engine → Modeled sound source: plays modeled notes - Audio engine → Web Audio: creates audio graph - Modeled sound source → Web Audio: outputs sound - Metronome scheduler → Web Audio: schedules clicks - Song progressions → Chord and scale theory: resolves chord data - Chord and scale theory → Note utilities: uses note utilities