DEV Community

Cover image for Playing with rhythm in Tone.js
Coding Fatale
Coding Fatale

Posted on • Edited on

Playing with rhythm in Tone.js

In the previous article, we learned how to add and play notes in Tone.js. In this example, we are doing scheduling in Tone.js. This allows us to add multiple parts to the arrangement.

Synths

As always, we create the synth. This time, we are using 3 synths for triple the fun. As a side note, toMaster is deprecated and toDestination connects the output to the context's destination node.

const synthA = new Tone.PolySynth().toDestination();
const synthB = new Tone.FMSynth().toDestination();
const synthC = new Tone.AMSynth().toDestination();
Enter fullscreen mode Exit fullscreen mode

Loops and Callbacks

To create loops and callbacks at a specfic interval use Tone.Loop. Below we have three loops for each of the synths above.

//play a note every sixteenth-note
const loopA = new Tone.Loop(time => {
    synthA.triggerAttackRelease("C2", "8n", time);
}, "16n").start(0);

//play another note every off quarter-note, starting it "2n"
const loopB = new Tone.Loop(time => {
    synthB.triggerAttackRelease("D2", "8n", time);
}, "4n").start("2n");

//play another note every off half-note,by starting it "2n"
const loopC = new Tone.Loop(time => {
    synthC.triggerAttackRelease("E2", "8n", time);
}, "2n").start("2n");
Enter fullscreen mode Exit fullscreen mode

Don't forget to start the sound.

Tone.Transport.start()
Enter fullscreen mode Exit fullscreen mode

Bpm

For the bpm , we are ramping it up to 135 over 10 seconds.

Tone.Transport.bpm.rampTo(135, 10);
Enter fullscreen mode Exit fullscreen mode

The end result is that the audio plays the synths and their respective loops. Also its a quick way to create a bassline.

Resources

Tone.js

Top comments (0)