# herbit2004/keys-midi architecture

> Architecture diagram of the GitHub repository herbit2004/keys-midi, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/herbit2004/keys-midi
- Repository: https://github.com/herbit2004/keys-midi

## Overview

KEYS-MIDI is a browser-based virtual piano and multitrack MIDI workstation. Users play through computer-keyboard or on-screen keys; the controller maps notes to audio and updates the keyboard display. In the editor, recorded or imported notes can be organized and edited across instrument tracks, played back, and exported as a MIDI file. The README also documents undo/redo, percussion, and configurable sampled or synthesized instruments. Some editor and import/export wiring is described only in the README, so those links reflect documented capabilities rather than inspected call sites.

Main entry points: [`js/MainController.js`](https://github.com/herbit2004/keys-midi/blob/main/js/MainController.js) (App controller), [`js/AudioEngine.js`](https://github.com/herbit2004/keys-midi/blob/main/js/AudioEngine.js) (Audio engine), [`js/MidiEditor.js`](https://github.com/herbit2004/keys-midi/blob/main/js/MidiEditor.js) (MIDI editor), [`js/main.js`](https://github.com/herbit2004/keys-midi/blob/main/js/main.js) (Page entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and input"]
  node_main["App controller<br/>[MainController.js]"]
  node_entrypoint["Page entry<br/>[main.js]"]
  node_mapper["Key mapping<br/>[KeyMapper.js]"]
end

subgraph group_sound["Audio and instruments"]
  node_audio["Audio engine<br/>[AudioEngine.js]"]
  node_config["Instrument config"]
  node_loading["Lazy loading<br/>[LoadingManager.js]"]
  node_tone["Tone.js audio<br/>[Tone.js]"]
  node_samples["Instrument samples"]
end

subgraph group_editing["MIDI workflow"]
  node_editor["MIDI editor<br/>[MidiEditor.js]"]
  node_exporter["MIDI exporter<br/>[MidiExporter.js]"]
end

subgraph group_display["Visual interface"]
  node_visual["Piano display<br/>[VisualManager.js]"]
end

node_user(("Musician"))
node_browser(("Browser audio"))
node_midi_file["MIDI file"]

node_user -->|"opens app"| node_entrypoint
node_entrypoint -->|"creates"| node_main
node_user -->|"plays keys"| node_main
node_main -->|"maps keys"| node_mapper
node_main -->|"plays notes"| node_audio
node_main -->|"loads config"| node_config
node_main -->|"updates display"| node_visual
node_visual -->|"dispatches input"| node_main
node_main -->|"coordinates editing"| node_editor
node_editor -->|"plays notes"| node_audio
node_editor -->|"exports tracks"| node_exporter
node_midi_file -.->|"imports notes"| node_editor
node_exporter -->|"downloads file"| node_midi_file
node_audio -->|"tracks loading"| node_loading
node_audio -->|"uses audio API"| node_tone
node_audio -->|"loads samples"| node_samples
node_audio -->|"outputs sound"| node_browser
node_config -->|"configures samples"| node_samples

click node_main "https://github.com/herbit2004/keys-midi/blob/main/js/MainController.js"
click node_entrypoint "https://github.com/herbit2004/keys-midi/blob/main/js/main.js"
click node_mapper "https://github.com/herbit2004/keys-midi/blob/main/js/KeyMapper.js"
click node_audio "https://github.com/herbit2004/keys-midi/blob/main/js/AudioEngine.js"
click node_config "https://github.com/herbit2004/keys-midi/blob/main/js/InstrumentConfig.js"
click node_loading "https://github.com/herbit2004/keys-midi/blob/main/js/LoadingManager.js"
click node_tone "https://github.com/herbit2004/keys-midi/blob/main/js/Tone.js"
click node_samples "https://github.com/herbit2004/keys-midi/tree/main/samples"
click node_editor "https://github.com/herbit2004/keys-midi/blob/main/js/MidiEditor.js"
click node_exporter "https://github.com/herbit2004/keys-midi/blob/main/js/MidiExporter.js"
click node_visual "https://github.com/herbit2004/keys-midi/blob/main/js/VisualManager.js"

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_main,node_entrypoint,node_mapper,node_browser toneBlue
class node_audio,node_config,node_loading,node_tone,node_samples toneAmber
class node_editor,node_exporter toneMint
class node_visual toneRose
class node_user,node_midi_file toneIndigo
```

## Components

### App and input

- [App controller](https://github.com/herbit2004/keys-midi/blob/main/js/MainController.js): `js/MainController.js`
- [Page entry](https://github.com/herbit2004/keys-midi/blob/main/js/main.js): `js/main.js`
- [Key mapping](https://github.com/herbit2004/keys-midi/blob/main/js/KeyMapper.js): `js/KeyMapper.js`

### Audio and instruments

- [Audio engine](https://github.com/herbit2004/keys-midi/blob/main/js/AudioEngine.js): `js/AudioEngine.js`
- [Instrument config](https://github.com/herbit2004/keys-midi/blob/main/js/InstrumentConfig.js): `js/InstrumentConfig.js`
- [Lazy loading](https://github.com/herbit2004/keys-midi/blob/main/js/LoadingManager.js): `js/LoadingManager.js`
- [Tone.js audio](https://github.com/herbit2004/keys-midi/blob/main/js/Tone.js): `js/Tone.js`
- [Instrument samples](https://github.com/herbit2004/keys-midi/tree/main/samples): `samples`

### MIDI workflow

- [MIDI editor](https://github.com/herbit2004/keys-midi/blob/main/js/MidiEditor.js): `js/MidiEditor.js`
- [MIDI exporter](https://github.com/herbit2004/keys-midi/blob/main/js/MidiExporter.js): `js/MidiExporter.js`

### Visual interface

- [Piano display](https://github.com/herbit2004/keys-midi/blob/main/js/VisualManager.js): `js/VisualManager.js`

### Other components

- **Musician**
- **Browser audio**
- **MIDI file**

## Connections

- Musician → Page entry: opens app
- Page entry → App controller: creates
- Musician → App controller: plays keys
- App controller → Key mapping: maps keys
- App controller → Audio engine: plays notes
- App controller → Instrument config: loads config
- App controller → Piano display: updates display
- Piano display → App controller: dispatches input
- App controller → MIDI editor: coordinates editing
- MIDI editor → Audio engine: plays notes
- MIDI editor → MIDI exporter: exports tracks
- MIDI file → MIDI editor: imports notes
- MIDI exporter → MIDI file: downloads file
- Audio engine → Lazy loading: tracks loading
- Audio engine → Tone.js audio: uses audio API
- Audio engine → Instrument samples: loads samples
- Audio engine → Browser audio: outputs sound
- Instrument config → Instrument samples: configures samples