Creating a remix using Tone.js

I took a break from making music for a few years and wanted to return to composing music. This is a great time to return to my passion after a long hiatus. In the first step of creating music with code. I have decided to jump in and learn Tone.js.

What is Tone.js

Tone.js is a web audio framework used to create music in a browser. It is flexible and can be used to create various music web applications. Tone.js documentation has examples, documentation and demos on their GitHub page. The Chrome Music Lab uses Tone.js.

Creating Mary had a little lamb

To start off we have to create a javascript file and create a synth. We have the exported Tone object and for the instrument, MembraneSynth is used to make the sounds with.

const synth = new Tone.MembraneSynth().toDestination();

We have to add the notes to Mary had a little lamb. This is done by creating an array for the notes. Use null to create a rest or a pause.

const notes = [
 "A3",
 "G2",
 "F1",
 "G2", 
 "A3",
 "A3", 
 "A3", 
 null,
 "G2",
 "G2",
 "G2",
 null,
 "A3",
 "C5",
 "C5",
 null
];

We have to set the bpm. In this example I set it to 130.

Tone.Transport.bpm.value = 130

Create a sequence with the synth and notes. For the last part we have to setup starting the audio so it can play in the browser.

const seq = new Tone.Sequence((time, note) => {
    synth.triggerAttackRelease(note, 1.0 , time);
  },
  notes,
  "4n"
);

seq.start();
Tone.Transport.start();

In the browser the audio will loop a segment of Mary had a little lamb. This was my first experiment with Tone.js. The framework can be used to create more complex web applications.

Tone.js resources for beginners

Tone.js page
Tone.js tutorial