Create Echo Effects in Tone.js with FeedbackDelay

This article explains how to use the Tone.FeedbackDelay node in Tone.js to create classic echo and delay effects in web audio applications. You will learn how the feedback loop mechanism works, how to configure key parameters like delay time and feedback amount, and how to connect the node to an audio source to generate a repeating, decaying sound.

How FeedbackDelay Works

In web audio, a basic delay simply holds an audio signal and plays it back after a specified amount of time. To create an “echo” effect, the delayed sound needs to repeat and gradually fade away.

Tone.FeedbackDelay achieves this by taking a portion of the delayed output signal and routing it back into the input of the delay node. This continuous loop creates a series of repeating echoes. Each time the sound goes through the loop, its volume decreases based on your settings, simulating how sound naturally dissipates in a physical space.

Key Parameters of Tone.FeedbackDelay

To customize your echo effect, you need to adjust three primary properties:

• delayTime: This determines the duration of time between the original sound and its first echo (and between each subsequent echo). In Tone.js, this can be set in seconds (e.g., 0.5 for half a second) or in musical notation synced to the transport tempo (e.g., "8n" for an eighth note, or "4n" for a quarter note).
• feedback: This controls the volume of the signal sent back into the loop. It is represented as a value between 0 and 1. A value of 0 means only one echo will play (no feedback). A value of 0.5 means each echo is half as loud as the previous one, creating a natural decay. Setting this to 1 (or very close to it) will cause the echoes to ring out indefinitely, potentially causing feedback distortion.
• wet: This controls the balance between the dry (unaffected) signal and the wet (effected) signal. It ranges from 0 (completely dry, no echo heard) to 1 (completely wet, only the echoes are heard). A value of 0.5 provides an even mix of both.

Code Implementation

To implement this effect, you instantiate the Tone.FeedbackDelay node, configure its parameters, and connect an audio source (like a synthesizer) to it.

Here is a straightforward example:

// 1. Create the feedback delay effect
const feedbackDelay = new Tone.FeedbackDelay({
  delayTime: "8n", // Delays the echo by an eighth note
  feedback: 0.6,   // 60% of the signal feeds back, creating multiple echoes
  wet: 0.5         // Equal mix of dry and wet signal
}).toDestination(); // Route the effect to the master output

// 2. Create a synthesizer and connect it to the delay effect
const synth = new Tone.Synth().connect(feedbackDelay);

// 3. Play a note to hear the echo effect
// The synth will trigger, and you will hear rhythmic, decaying echoes
synth.triggerAttackRelease("C4", "8n");

By tweaking the delayTime and feedback values, you can transition from a tight, metallic “slapback” echo (short delay time, low feedback) to a spacious, ambient dub delay (long delay time, high feedback).