A little audio groovebox using Svelte 5 and Tone.js.
Have fun, make beats!
src/
├── routes/
│ └── +page.svelte # Main app entry
├── lib/
│ ├── audio-classes/ # Audio engine, sample & sequencer logic
│ │ ├── audio-context.svelte.ts
│ │ ├── audio-sequencer.svelte.ts
│ │ ├── main-audio-bus.svelte.ts
│ │ ├── audio-loader.svelte.ts
│ │ └── sample.svelte.ts
│ ├── components/ # UI components
│ │ ├── sequencer.svelte
│ │ ├── samples.svelte
│ │ ├── display.svelte
│ │ └── ...
│ ├── data/ # Audio packs & config
│ ├── types/ # TypeScript definitions
│ ├── utils/ # Pattern sharing, colour storage
│ └── actions/ # Touch gestures
└── app.css # Global styles
- Matt DesLauriers made a page of elegant, simple, progressive Tone.js demos which were extremely helpful while I was learning about Tone, especially in relation to implementing effects and the visual analyser.
- Max Fung's drumhaus is a gorgeous, sophisticated implementation of a drum sequencer (those knobs!). His code is neat and easy to grasp. I'm particularly indebted to his approach to structuring and processing samples and packs.
- Beatjie's design is inspired by, but obviously doesn't compare to, fors' apps, specifically Opal.
- I used Anthropic's Claude 3.5, 4 and 4.5 models extensively while making Beatjie and learning more about creative development for the web.