#tone js

Process + Resources

This sketch started from a Tone.js mixer example we used in class, where multiple audio players are controlled by sliders. I adapted that structure to build a three-stem mixer for my own track, routing each stem through its own signal chain: ping-pong delay for the instrumental, distortion for drums, and a parallel dry/wet reverb bus for vocals.

A key design decision was building the vocal reverb as a split dry/wet path instead of a simple wet knob. I used a constant-power crossfade so the perceived loudness stays stable as the reverb increases, then added a limiter on the vocal bus to prevent spikes. That workflow is inspired by how I’ve handled reverb makeup gain in Reaper and bus limiting in Max/MSP.

Resources that informed this process included:

Class Tone.js player + slider examples

Tone.js documentation (Player, Gain, Reverb, PingPongDelay, Limiter)

Discussion with a friend about routing, gain staging, and fx help

ChatGPT as a troubleshooting/debugging tool when connections or loading behavior broke

The final sketch loads three looping audio stems and treats them like mini mixer channels. Each stem has its own volume slider that controls a gain stage, so you’re basically adjusting channel faders in dB. From there, each stem is routed through a different effect chain: the instrumental goes into a ping-pong delay, the drums go through distortion, and the vocals are split into dry and reverb paths that get blended back together.

The vocal reverb uses a constant-power crossfade instead of a simple wet knob, which keeps the perceived loudness stable as you add more reverb. That blended vocal signal then passes through a limiter so peaks don’t jump unexpectedly. All the sliders simply read their values and smoothly ramp effect parameters, so the system behaves like a small interactive mixer rather than abruptly switching states.