Create Live Music With Tone.js

Music and coding are so similar that is why coding JavaScript to make live music is a great way to learn JavaScript. I have built this live sandbox with Tone.js that is JavaScript library for coding music in the browser. I have tone.js setup in this editor and listening on the play button so all we have to do is start coding some music!

Follow along at Tone.js documention where you can find endless ways to make music with JavaScript.

First we are going to create a synth by instantiating a new synth. This gives us a virtual keyboard to start making noise with.

const synth = new Tone.Synth();

Now we need to plugin the keyboard. The way we do that is:
toMaster();

synth.toMaster();

Now we can give the synth some sound options. They have a couple different methods for how we can play the notes. They have triggerAttack, triggerRelease and triggerAttackRelease. The first parameter is the note you want to play and the second is how long it plays.

synth.triggerAttackRelease('C4', '8n');

Here we used the C4 which is the fourth octive and middle C on the piano. We will have it play for an eight note compared to a beat that is a quarter note. As soon as you finish the code to this point you will hear the C4 for a 8th note!

Now lets build an array of notes to loop through.

// C major cord
const notes = [
"C4", "E4", "G4",
"C5", "E5", "G5"
];

Now we can create a loop for the notes. We will use an index to keep track of which note we are on. We want to make a loop that plays each one of the notes and then starts over.

We could use a for loop, while loop, set interval or a request animation frame, but tone gives us the Transport object that allows use to schedule thing base on musical time.

Transport handles everything related to time like tempo and type of tempo. Then we are going to call a function called repeat and pass intime which is tones mark of time that keeps our notes on beat. The we create a repeat function and find our notes and call it note.

Index will start at zero which is the C4. Now we can copy our triggerAttackRelease and pass in note and time. We use index++ to increment through each note. Then we add modulo length % notes.length to the index to loop back over the array after it get to the end.

var index = 0;

Tone.Transport.scheduleRepeat((time) => {
    repeat(time);
}, '8n');

function repeat(time) {
    let note = notes[index % notes.length];
    synth.triggerAttackRelease(note, '8n', time);
    index++;
}

Now we just need to start and stop the Transport at the bottom of our code but for this tutorial I have already added them to the Play and Stop buttons.

Tone.Transport.start();
Tone.Transport.stop();

Final code.

const synth = new Tone.Synth();
synth.toMaster();
// C major cord
const notes = [
"C4", "E4", "G4",
"C5", "E5", "G5"
];
var index = 0;

Tone.Transport.scheduleRepeat((time) => {
    repeat(time);
}, '8n');

function repeat(time) {
    let note = notes[index % notes.length];
    synth.triggerAttackRelease(note, '8n', time);
    index++;
}

Here is an example of some advanced tone.js where we add some bass to our notes. Give it a try to see what is possible. You may have to stop and play again or refresh your browser if your are getting distortion.

const synth = new Tone.Synth({
    'volume' : -10,
    });
synth.toMaster();
// C major cord
const notes = [
"C4", "E4", "G4",
"C5", "E5", "G5"
];
var index = 0;

Tone.Transport.scheduleRepeat((time) => {
    repeat(time);
}, '8n');

function repeat(time) {
    let note = notes[index % notes.length];
    synth.triggerAttackRelease(note, '8n', time);
    index++;
}

//Bass
var bass = new Tone.MonoSynth({
    'volume' : -10,
    'envelope' : {
        'attack' : 0.1,
        'decay' : 0.3,
        'release' : 2,
    },
    'filterEnvelope' : {
        'attack' : 0.001,
        'decay' : 0.01,
        'sustain' : 0.5,
        'baseFrequency' : 200,
        'octaves' : 2.6
    }
}).toMaster();

var bassPart = new Tone.Sequence(function(time, note){
    bass.triggerAttackRelease(note, '16n', time);
}, ['C2']).start(0);

bassPart.probability = 0.9;

//set the transport
Tone.Transport.bpm.value = 120;

Conclusion

This is a good starting block for build JavaScipt skills and making music with Tone.js.