Create a Tremolo Effect with Tone.Tremolo

This article provides a quick, step-by-step guide on how to create and apply a tremolo effect using the Tone.Tremolo class in Tone.js. You will learn how to initialize the effect, configure its frequency and depth, start the underlying Low-Frequency Oscillator (LFO), and connect it to an audio source to achieve a classic modulating volume effect in your web audio projects.

1. Initialize the Tremolo Effect

To create a tremolo effect in Tone.js, instantiate the Tone.Tremolo class. You can pass configuration options directly into the constructor to set the speed (frequency) and intensity (depth) of the effect.

const tremolo = new Tone.Tremolo({
  frequency: 9, // The speed of the modulation in Hz
  depth: 0.8    // The depth/intensity of the effect between 0 and 1
}).toDestination();

2. Start the Tremolo

Because Tone.Tremolo relies on an internal LFO to modulate the signal’s volume, the effect must be explicitly started using the .start() method. If you do not call this method, the volume will remain static.

tremolo.start();

3. Connect an Audio Source

Connect an audio source, such as a synthesizer, to the tremolo effect. The output of the synthesizer will flow through the tremolo and then to the speakers.

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

4. Trigger the Audio

Once connected, trigger a note on the synthesizer to hear the tremolo effect in action. Ensure the Web Audio context is started (usually via a user interaction like a button click) before triggering the sound.

// Start the audio context and play a note on click
document.querySelector('button').addEventListener('click', async () => {
  await Tone.start();
  synth.triggerAttackRelease("A4", "1n");
});

Adjusting Properties Dynamically

You can dynamically alter the tremolo’s properties after initialization to change the sound in real-time:

• Frequency: Adjust the speed of the volume modulation using tremolo.frequency.value.
• Depth: Adjust the intensity of the volume dip using tremolo.depth.value.
• Type: Change the modulation wave shape (e.g., “sine”, “triangle”, “square”) using tremolo.type.

// Speed up the modulation
tremolo.frequency.value = 12;

// Reduce the depth of the effect
tremolo.depth.value = 0.4;