How to Control Synth Envelopes in Tone.js

In web audio development, shaping the character of a synthesizer’s sound is crucial for creating dynamic, expressive instruments. This article explores the specific parameters Tone.js provides to control a synthesizer’s amplitude envelope, focusing on the classic ADSR (Attack, Decay, Sustain, Release) model and the curve shaping options that allow developers to programmatically customize how a sound evolves over time.

The Core ADSR Parameters

Tone.js synthesizers, such as Tone.Synth and Tone.MonoSynth, utilize an internal Tone.Envelope to shape the volume of a sound from the moment a note is triggered to the moment it decays to silence. The envelope is defined by four primary temporal and level parameters:

• Attack (attack): This parameter defines the duration (in seconds) it takes for the sound to transition from silence (0) to its peak level (1) once a note is triggered. A short attack (e.g., 0.005 seconds) creates a sharp, percussive sound, while a long attack (e.g., 1.5 seconds) creates a gradual pad effect.
• Decay (decay): This is the time (in seconds) the sound takes to drop from its peak level down to the sustain level.
• Sustain (sustain): Unlike the other three parameters, sustain is a level (a value between 0 and 1), not a duration. It represents the volume percentage at which the sound will remain as long as the note is held down.
• Release (release): This parameter defines the time (in seconds) it takes for the sound to fade from the sustain level back to silence once the note is released (triggerRelease).

Envelope Curve Parameters

To provide more organic and natural-sounding instruments, Tone.js allows you to adjust the interpolation mathematical curves of the attack, decay, and release phases.

• attackCurve: Defines the shape of the attack curve. Available options include "linear", "exponential", "sine", "cosine", "bounce", "ripple", and custom arrays of values.
• decayCurve: Defines the shape of the decay curve. This typically accepts "linear" or "exponential".
• releaseCurve: Defines the shape of the release curve. It supports the same curve types as the attack phase (e.g., "linear", "exponential", "sine").

Configuring Envelopes in Code

In Tone.js, you can define these parameters directly inside the constructor options when instantiating a synthesizer, or update them dynamically after instantiation.

Inline Configuration

const synth = new Tone.Synth({
  envelope: {
    attack: 0.1,
    decay: 0.2,
    sustain: 0.5,
    release: 0.8,
    attackCurve: "exponential",
    releaseCurve: "linear"
  }
}).toDestination();

Dynamic Updating

You can also modify these parameters on the fly, allowing for interactive user interfaces like sliders or knobs to control the synthesizer in real-time.

// Change the attack time to 0.5 seconds
synth.envelope.attack = 0.5;

// Change the release curve type
synth.envelope.releaseCurve = "exponential";