poof

Audio synthesis web application for generating random sound samples. Users generate sounds via different synthesis engines, mutate parameters, apply audio processors in multiple passes, and export as WAV. Built for musicians seeking unexpected textures and one-shots.

Technologies

• Svelte 5 + TypeScript
• Web Audio API
• Vite (rolldown-vite)
• pnpm

Structure

src/
├── main.ts              # Entry point
├── App.svelte           # Main UI
└── lib/
    ├── components/      # UI components (waveform, VU meter, modals)
    ├── audio/
    │   ├── engines/     # synthesis engines + registry
    │   ├── processors/  # audio processors + registry
    │   ├── services/    # AudioService (Web Audio API wrapper)
    │   └── utils/       # WAVEncoder, AudioEdit
    └── utils/           # Colors, keyboard, pitch, settings
public/
├── fonts/               # DepartureMono
└── wavetables/          # 1000+ AKWF wavetables

Development

pnpm install
pnpm dev
pnpm build

Docker

docker build -t poof .
docker run -p 8080:80 poof

Opens on http://localhost:8080

Extending

Adding Synthesis Engines

1. Create a single file in src/lib/audio/engines/ implementing the SynthEngine interface
2. Implement getName(), getDescription(), generate(), randomParams(), and mutateParams()
3. Must return stereo output: [Float32Array, Float32Array]
4. Keep all DSP code, helpers, and types in the same file
5. Register in src/lib/audio/engines/registry.ts

Adding Audio Processors

1. Create a single file in src/lib/audio/processors/ implementing the AudioProcessor interface
2. Implement getName(), getDescription(), and process()
3. Must take and return stereo: [Float32Array, Float32Array]
4. Keep all processing logic, helpers, and types in the same file
5. Register in src/lib/audio/processors/registry.ts

Credits

• Wavetables from Adventure Kid Waveforms by Kristoffer Ekstrand
• Garten Salat by Felix Roos for drum synthesis inspiration.