How kristinnroach/hljod-smali works
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: App.tsx App orchestration · instrumentLibrary.ts Instrument library · AudioPipeClient.ts AudioPipe client · sender.worker.ts Packet sender
Components 22
Sampler app
- App orchestration
src/App.tsx
Audio and controls
- Sample player
- Web Audio library
- Sample controls
src/components/sampler/LoadButton.tsx - Recording controls
src/components/sampler/RecordButton.tsx - Waveform display
src/components/sampler/AudioWaveform.tsx - Sound parameters
src/components/knobs/ParamKnob.tsx - Envelope editing
src/components/envelopes/EnvelopeEditor.tsx
Instrument library
- Instrument browser
src/components/InstrumentListSection.tsx - Instrument library
src/instruments/instrumentLibrary.ts - Local instrument store
src/instruments/instrumentDb.ts
Playback inputs
- Computer keyboard
src/hooks/useComputerKeyboard.ts - On-screen keys
src/components/keyboard/PianoKeyboard.tsx - MIDI routing
src/io/MidiMan.ts
AudioPipe
- AudioPipe panel
src/components/AudioPipePanel.tsx - AudioPipe client
src/audio-pipe/AudioPipeClient.ts - Packet sender
src/audio-pipe/sender.worker.ts - Audio worklet
src/audio-pipe/sender.worklet.js
Other components
- Sampler user
- MIDI controller
- Local AudioPipe receiver
- Browser audio output
Connections 26
- 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