DEV Community

Cover image for Adding effects in Tone.js
Coding Fatale
Coding Fatale

Posted on

Adding effects in Tone.js

Tone.js has a wide selection of filters and effects. In this article we are going over a few effects.

Distortion

To start off we create a simple distortion effect that will play in the beginning.

const dist = new Tone.Distortion(0.8).toDestination();
const fm = new Tone.FMSynth().connect(dist);
fm.triggerAttackRelease("G1", "8n");
Enter fullscreen mode Exit fullscreen mode

FeedbackDelay

FeedbackDelay is a DelayNode in which part of output signal is fed back into the delay.

const feedbackDelay = new Tone.FeedbackDelay("8n", 0.5).toDestination();
const tom = new Tone.MembraneSynth({
    octaves: 4,
    pitchDecay: 0.1
}).connect(feedbackDelay);
tom.triggerAttackRelease("A3", "32n");
Enter fullscreen mode Exit fullscreen mode

PingPongDelay

Just as the name suggests it sounds like a ping pong. PingPongDelay is feedback delay effect where the effect is echoed in one channel and is play next in the opposite channel. This is a PingPongDelay effect.

const pingPong = new Tone.PingPongDelay("4n", 0.2).toDestination();
const drum = new Tone.MembraneSynth().connect(pingPong);
drum.triggerAttackRelease("C4", "32n");
Enter fullscreen mode Exit fullscreen mode

Note that each delay is routed to a different channel. Effects can also be looped.

const pingPong = new Tone.PingPongDelay("4n", 0.2).toDestination();
const drum = new Tone.MembraneSynth().connect(pingPong);

const loop = new Tone.Loop(time => {
    drum.triggerAttackRelease("C4", "32n");
}, "2n").start(0);
Enter fullscreen mode Exit fullscreen mode

Resources

More effects are in the Tone.js documentation.

Top comments (0)