# kristinnroach/hljod-smali architecture

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

- Interactive diagram: https://gitdiagram.com/kristinnroach/hljod-smali
- Repository: https://github.com/kristinnroach/hljod-smali

## Overview

Hljóð-Smali is a browser-based polyphonic sampler. The main workflow is to record or load audio, use the sample player to play and shape it, then save layered instruments locally. Playback can be initiated from computer keys, on-screen keys, or MIDI; the README also describes pitch detection and tuning, looping, trimming, modulation, filters, and effects, much of which is implemented by the external audio library. The graph shows only wiring supported by the sampled source or README; several detailed UI and engine interactions are not visible in the excerpts.

Main entry points: [`src/App.tsx`](https://github.com/kristinnroach/hljod-smali/blob/main/src/App.tsx) (App orchestration), [`src/instruments/instrumentLibrary.ts`](https://github.com/kristinnroach/hljod-smali/blob/main/src/instruments/instrumentLibrary.ts) (Instrument library), [`src/audio-pipe/AudioPipeClient.ts`](https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/AudioPipeClient.ts) (AudioPipe client), [`src/audio-pipe/sender.worker.ts`](https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/sender.worker.ts) (Packet sender)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Sampler app"]
  node_app["App orchestration<br/>[App.tsx]"]
end

subgraph group_audio["Audio and controls"]
  node_player["Sample player"]
  node_engine["Web Audio library"]
  node_sample_controls["Sample controls<br/>[LoadButton.tsx]"]
  node_record_controls["Recording controls<br/>[RecordButton.tsx]"]
  node_waveform["Waveform display<br/>[AudioWaveform.tsx]"]
  node_params["Sound parameters<br/>[ParamKnob.tsx]"]
  node_envelopes["Envelope editing<br/>[EnvelopeEditor.tsx]"]
end

subgraph group_instruments["Instrument library"]
  node_instrument_list["Instrument browser"]
  node_library["Instrument library"]
  node_db[("Local instrument store<br/>[instrumentDb.ts]")]
end

subgraph group_inputs["Playback inputs"]
  node_keyboard["Computer keyboard"]
  node_onscreen["On-screen keys<br/>[PianoKeyboard.tsx]"]
  node_midi["MIDI routing<br/>[MidiMan.ts]"]
end

subgraph group_pipe["AudioPipe"]
  node_audio_pipe_panel["AudioPipe panel<br/>[AudioPipePanel.tsx]"]
  node_pipe_client["AudioPipe client<br/>[AudioPipeClient.ts]"]
  node_sender_worker["Packet sender<br/>[sender.worker.ts]"]
  node_sender_worklet["Audio worklet<br/>[sender.worklet.js]"]
end

node_user(("Sampler user"))
node_midi_device(("MIDI controller"))
node_receiver["Local AudioPipe receiver"]
node_audio_output["Browser audio output"]

node_user -->|"uses"| node_app
node_app -->|"loads samples"| node_library
node_app -->|"creates"| node_player
node_player -->|"uses"| node_engine
node_app -->|"renders"| node_sample_controls
node_app -->|"renders"| node_record_controls
node_app -->|"renders"| node_waveform
node_app -->|"renders"| node_params
node_app -->|"renders"| node_envelopes
node_app -->|"renders"| node_instrument_list
node_instrument_list -->|"lists and deletes"| node_library
node_app -->|"loads and saves"| node_library
node_library -->|"reads and writes"| node_db
node_app -->|"sets up"| node_keyboard
node_keyboard -->|"plays notes"| node_player
node_app -->|"renders"| node_onscreen
node_onscreen -->|"plays notes"| node_player
node_midi_device -->|"sends events"| node_midi
node_midi -->|"dispatches notes"| node_player
node_app -.->|"renders in development"| node_audio_pipe_panel
node_audio_pipe_panel -.->|"connects"| node_pipe_client
node_pipe_client -.->|"routes audio"| node_sender_worklet
node_pipe_client -.->|"starts worker"| node_sender_worker
node_sender_worklet -.->|"transfers packets"| node_sender_worker
node_sender_worker -.->|"sends audio"| node_receiver
node_player -->|"outputs audio"| node_audio_output

click node_app "https://github.com/kristinnroach/hljod-smali/blob/main/src/App.tsx"
click node_sample_controls "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/sampler/LoadButton.tsx"
click node_record_controls "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/sampler/RecordButton.tsx"
click node_waveform "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/sampler/AudioWaveform.tsx"
click node_params "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/knobs/ParamKnob.tsx"
click node_envelopes "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/envelopes/EnvelopeEditor.tsx"
click node_instrument_list "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/InstrumentListSection.tsx"
click node_library "https://github.com/kristinnroach/hljod-smali/blob/main/src/instruments/instrumentLibrary.ts"
click node_db "https://github.com/kristinnroach/hljod-smali/blob/main/src/instruments/instrumentDb.ts"
click node_keyboard "https://github.com/kristinnroach/hljod-smali/blob/main/src/hooks/useComputerKeyboard.ts"
click node_onscreen "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/keyboard/PianoKeyboard.tsx"
click node_midi "https://github.com/kristinnroach/hljod-smali/blob/main/src/io/MidiMan.ts"
click node_audio_pipe_panel "https://github.com/kristinnroach/hljod-smali/blob/main/src/components/AudioPipePanel.tsx"
click node_pipe_client "https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/AudioPipeClient.ts"
click node_sender_worker "https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/sender.worker.ts"
click node_sender_worklet "https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/sender.worklet.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_app,node_user,node_audio_output toneBlue
class node_player,node_engine,node_sample_controls,node_record_controls,node_waveform,node_params,node_envelopes toneAmber
class node_instrument_list,node_library,node_db toneMint
class node_keyboard,node_onscreen,node_midi toneRose
class node_audio_pipe_panel,node_pipe_client,node_sender_worker,node_sender_worklet,node_midi_device,node_receiver toneIndigo
```

## Components

### Sampler app

- [App orchestration](https://github.com/kristinnroach/hljod-smali/blob/main/src/App.tsx): `src/App.tsx`

### Audio and controls

- **Sample player**
- **Web Audio library**
- [Sample controls](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/sampler/LoadButton.tsx): `src/components/sampler/LoadButton.tsx`
- [Recording controls](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/sampler/RecordButton.tsx): `src/components/sampler/RecordButton.tsx`
- [Waveform display](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/sampler/AudioWaveform.tsx): `src/components/sampler/AudioWaveform.tsx`
- [Sound parameters](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/knobs/ParamKnob.tsx): `src/components/knobs/ParamKnob.tsx`
- [Envelope editing](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/envelopes/EnvelopeEditor.tsx): `src/components/envelopes/EnvelopeEditor.tsx`

### Instrument library

- [Instrument browser](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/InstrumentListSection.tsx): `src/components/InstrumentListSection.tsx`
- [Instrument library](https://github.com/kristinnroach/hljod-smali/blob/main/src/instruments/instrumentLibrary.ts): `src/instruments/instrumentLibrary.ts`
- [Local instrument store](https://github.com/kristinnroach/hljod-smali/blob/main/src/instruments/instrumentDb.ts): `src/instruments/instrumentDb.ts`

### Playback inputs

- [Computer keyboard](https://github.com/kristinnroach/hljod-smali/blob/main/src/hooks/useComputerKeyboard.ts): `src/hooks/useComputerKeyboard.ts`
- [On-screen keys](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/keyboard/PianoKeyboard.tsx): `src/components/keyboard/PianoKeyboard.tsx`
- [MIDI routing](https://github.com/kristinnroach/hljod-smali/blob/main/src/io/MidiMan.ts): `src/io/MidiMan.ts`

### AudioPipe

- [AudioPipe panel](https://github.com/kristinnroach/hljod-smali/blob/main/src/components/AudioPipePanel.tsx): `src/components/AudioPipePanel.tsx`
- [AudioPipe client](https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/AudioPipeClient.ts): `src/audio-pipe/AudioPipeClient.ts`
- [Packet sender](https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/sender.worker.ts): `src/audio-pipe/sender.worker.ts`
- [Audio worklet](https://github.com/kristinnroach/hljod-smali/blob/main/src/audio-pipe/sender.worklet.js): `src/audio-pipe/sender.worklet.js`

### Other components

- **Sampler user**
- **MIDI controller**
- **Local AudioPipe receiver**
- **Browser audio output**

## Connections

- Sampler user → App orchestration: uses
- App orchestration → Instrument library: loads samples
- App orchestration → Sample player: creates
- Sample player → Web Audio library: uses
- App orchestration → Sample controls: renders
- App orchestration → Recording controls: renders
- App orchestration → Waveform display: renders
- App orchestration → Sound parameters: renders
- App orchestration → Envelope editing: renders
- App orchestration → Instrument browser: renders
- Instrument browser → Instrument library: lists and deletes
- App orchestration → Instrument library: loads and saves
- Instrument library → Local instrument store: reads and writes
- App orchestration → Computer keyboard: sets up
- Computer keyboard → Sample player: plays notes
- App orchestration → On-screen keys: renders
- On-screen keys → Sample player: plays notes
- MIDI controller → MIDI routing: sends events
- MIDI routing → Sample player: dispatches notes
- App orchestration → AudioPipe panel: renders in development
- AudioPipe panel → AudioPipe client: connects
- AudioPipe client → Audio worklet: routes audio
- AudioPipe client → Packet sender: starts worker
- Audio worklet → Packet sender: transfers packets
- Packet sender → Local AudioPipe receiver: sends audio
- Sample player → Browser audio output: outputs audio