How to Connect an Instrument to an Effect in Tone.js

Connecting an instrument to an effect node in Tone.js is a fundamental step in shaping your web audio synthesizer sounds. This guide explains how to use the .connect() method and the .chain() method to route audio from sources like Tone.Synth through effects like Tone.Delay or Tone.Reverb before reaching your speakers.

Method 1: Using the .connect() Method

The simplest way to route an instrument through an effect is by using the .connect() method. This method takes the audio output of your instrument and plugs it into the input of the effect node. To hear the result, you must also connect the effect to the main output (Tone.Destination).

Here is a basic code example connecting a synthesizer to a distortion effect:

// 1. Create the effect and connect it to the main output
const distortion = new Tone.Distortion(0.4).toDestination();

// 2. Create the instrument and connect it to the effect
const synth = new Tone.Synth().connect(distortion);

// 3. Play a note
synth.triggerAttackRelease("C4", "8n");

In this setup, the audio flow is: Synth -> Distortion -> Destination (Speakers).

Method 2: Sequencing Multiple Effects with .chain()

If you want to route an instrument through multiple effects in a specific order (serial routing), Tone.js provides a convenient .chain() method. This connects the nodes together sequentially from left to right.

Here is how to chain a synth through a delay, then a reverb, and finally to the speakers:

// 1. Create the instrument and effects
const synth = new Tone.Synth();
const delay = new Tone.FeedbackDelay("8n", 0.5);
const reverb = new Tone.Reverb(3);

// 2. Chain them together in order, ending at the destination
synth.chain(delay, reverb, Tone.Destination);

// 3. Play a note
synth.triggerAttackRelease("E4", "8n");

In this example, the audio flow is: Synth -> Delay -> Reverb -> Destination.

Disconnecting Nodes

If you need to change your signal path dynamically during performance, you can use the .disconnect() method. Calling .disconnect() on an instrument stops all of its current connections, allowing you to route it to a different effect.

// Disconnect the synth from all current effects
synth.disconnect();

// Reconnect the synth directly to the speakers
synth.toDestination();