DEV Community

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

Posted on

3 1

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.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay