How to Use Tone.Reverb in Tone.js

This article provides a straightforward guide on how to apply a spatial reverb effect to an audio source using the Tone.Reverb class in Tone.js. You will learn how to instantiate the reverb node, configure its key parameters like decay and wet/dry mix, connect it to a synthesizer, and trigger the audio correctly within a web browser.

Step 1: Create and Configure the Reverb Node

In Tone.js, Tone.Reverb is an audio effect node that simulates the acoustics of a physical space. To use it, you need to instantiate the class and define its configuration parameters.

// Create a reverb effect with a 3-second decay time and 50% mix
const reverb = new Tone.Reverb({
  decay: 3,       // The duration of the reverb tail in seconds
  wet: 0.5        // The mix between clean (dry) and effected (wet) signal (0 to 1)
}).toDestination(); // Connect the output of the reverb to the master output

Step 2: Initialize the Reverb

Because Tone.Reverb uses a convolution-based algorithm to generate highly realistic reverberation, it must generate an impulse response before it can process audio. This process is asynchronous. You should wait for the reverb node to be ready before triggering sounds.

// Wait for the reverb to generate its impulse response
reverb.ready.then(() => {
  console.log("Reverb is ready to process audio!");
});

Step 3: Connect an Audio Source

Once your reverb is set up, you need to route an audio source into it. In this example, we will create a basic synthesizer and connect its output to the input of the reverb node.

// Create a synthesizer and connect it directly to the reverb node
const synth = new Tone.Synth().connect(reverb);

By connecting the synth to the reverb, and having previously connected the reverb to toDestination(), the audio signal flows as follows: Synth -> Reverb -> Speakers.

Step 4: Start the Audio Context and Play a Note

Web browsers require a user interaction (like a button click) to start the Web Audio API context. You can wrap the audio playback code in a click event listener.

document.querySelector('#play-button').addEventListener('click', async () => {
  // Start the Tone.js audio context
  await Tone.start();
  
  // Wait for the reverb to be ready (if not already)
  await reverb.ready;
  
  // Play a C4 note for the duration of an eighth note
  synth.triggerAttackRelease("C4", "8n");
});

Adjusting Reverb Parameters Dynamically

You can also change the reverb’s properties dynamically after initialization.