ToneKit
A tool for developing procedural audio with code, built on top of Tone.js. Design instruments, write patterns, and layer them into an arrangement — then export the result to run elsewhere, such as orchestrating events in a Three.js scene.
- Instruments — build a sound from scratch: oscillator type, envelope, effects and filters.
- Noise — design a continuous, modulated noise layer (not triggered by notes) to use as an ambient texture.
- Patterns — sequence an instrument on a piano roll, with per-note velocity and probability.
- Arrange — place patterns on a timeline across tracks to build a full arrangement, and save the whole thing as a composition.
- Export — grab the arrangement as JSON to play elsewhere with
soundtrack.js.
Try an example
Loads the example into Arrange and starts playing.
Instrument type
Settings
Effects and filters
No effects or filters yet. Add one above; they run in the order shown and can be reordered.
Instrument code
Noise
A continuous, modulated layer — not triggered by notes. Shape a noise colour with a filter, optionally sweep it with a slow LFO, and/or randomly re-target it every so often. Add it to a composition as a layer in Arrange.
Settings
Effects and filters
No effects or filters yet. Add one above; they run in the order shown and can be reordered.
Composition
Noise layers
Always-on textures that run for the whole piece, independent of the timeline and not tied to any pattern.
No noise layers yet.
Arrangement
Click an empty bar in a track to place the chosen pattern there. Drag a block to move it by beats; click it to edit or remove it. Patterns of different lengths loop independently, so a 3-beat pattern drifts against a 4-beat one. Tracks use saved instruments and patterns, so save yours first.
This is an example arrangement. Change or remove anything.
No tracks yet. Add a track, pick its instrument, then click in its lane to place a pattern.
Export
The whole arrangement as JSON for the soundtrack.js player: tracks,
instrument settings, effects, positions and notes (840 ticks per beat). Position only
affects this data; the bench itself does not spatialise — that happens in
soundtrack.js with { spatial: true }.
Project data
Use it in your project
Not Three.js-specific — the player only assumes Three.js for
updateListener(camera); everything else (events, levels, play/pause) works in
any browser JS project. Download both files below, keep them next to each other, then: