Tonejs/Tone.js

6 years ago

Tone.js is a Web Audio framework for creating interactive music in the browser. The architecture of Tone.js aims to be familiar to both musicians and audio programmers looking to create web-based audio applications. On the high-level, Tone offers common DAW (digital audio workstation) features like a global transport for scheduling events and prebuilt synths and effects. For signal-processing programmers (coming from languages like Max/MSP), Tone provides a wealth of high performance, low latency building blocks and DSP modules to build your own synthesizers, effects, and complex control signals.

API

Examples

Demos

download
npm install tone
dev -> npm install tone@next

Full Installation Instruction.

//create a synth and connect it to the master output (your speakers)
var synth = new Tone.Synth().toMaster();

//play a middle 'C' for the duration of an 8th note
synth.triggerAttackRelease("C4", "8n");

Tone.Synth

Tone.Synth is a basic synthesizer with a single oscillator and an ADSR envelope.

triggerAttackRelease

triggerAttackRelease is a combination of two methods: triggerAttack when the amplitude is rising (for example from a ‘key down’ or ‘note on’ event), and triggerRelease is when the amplitude is going back to 0 (‘key up’ / ‘note off’).

The first argument to triggerAttackRelease is the frequency which can either be a number (like 440) or as “pitch-octave” notation (like "D#2"). The second argument is the duration that the note is held. This value can either be in seconds, or as a tempo-relative value. The third (optional) argument of triggerAttackRelease is when along the AudioContext time the note should play. It can be used to schedule events in the future.

Time

Tone.js abstracts away the AudioContext time. Instead of defining all values in seconds, any method which takes time as an argument can accept a number or a string. For example "4n" is a quarter-note, "8t" is an eighth-note triplet, and "1m" is one measure. These values can even be composed into expressions.

Read about Time encodings.

Most browsers will not play any audio until a user clicks something (like a play button). Execute the above example only after a users invokes resume() on Tone’s context, or simply Tone.start()

//attach a click listener to a play button
document.querySelector('button').addEventListener('click', () => Tone.start())

Transport

Tone.Transport is the master timekeeper, allowing for application-wide synchronization and scheduling of sources, signals and events along a shared timeline. Time expressions (like the ones above) are evaluated against the Transport’s BPM which can be set like this: Tone.Transport.bpm.value = 120.

Loops

Tone.js provides higher-level abstractions for scheduling events. Tone.Loop is a simple way to create a looped callback that can be scheduled to start and stop.

//play a note every quarter-note
var loop = new Tone.Loop(function(time){
	synth.triggerAttackRelease("C2", "8n", time);
}, "4n");

Since Javascript callbacks are not precisely timed, the sample-accurate time of the event is passed into the callback function. Use this time value to schedule the events.

You can then start and stop the loop along the Transport’s timeline.

//loop between the first and fourth measures of the Transport's timeline
loop.start("1m").stop("4m");

Then start the Transport to hear the loop:

Read about Tone.js’ Event classes and scheduling events with the Transport.

Tone has a number of instruments which all inherit from the same Instrument base class, giving them a common API for playing notes. Tone.Synth is composed of one oscillator and an amplitude envelope.

//pass in some initial values for the filter and filter envelope
var synth = new Tone.Synth({
	"oscillator" : {
		"type" : "pwm",
		"modulationFrequency" : 0.2
	},
	"envelope" : {
		"attack" : 0.02,
		"decay" : 0.1,
		"sustain" : 0.2,
		"release" : 0.9,
	}
}).toMaster();

//start the note "D3" one second from now
synth.triggerAttack("D3", "+1");

All instruments are monophonic (one voice) but can be made polyphonic when the constructor is passed in as the second argument to Tone.PolySynth.

//a 4 voice Synth
var polySynth = new Tone.PolySynth(4, Tone.Synth).toMaster();
//play a chord
polySynth.triggerAttackRelease(["C4", "E4", "G4", "B4"], "2n");