DEV Community

loading...
Cover image for Playing with rhythm in Tone.js

Playing with rhythm in Tone.js

Ash Freels
Software developer. Musician and music technology nerd. Favorite music genre is rock.
・1 min read

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

Discussion (0)

Forem Open with the Forem app