Web Audio framework – make interactive music in the browser with Tone.js
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.
npm install tone
// create a synth and connect it to the master output (speakers)
var synth = new Tone.Synth().toMaster();
// play a middle 'C' for the duration of an 8th note
We can do really a lot with this solution.
Tone.Synth is a basic synthesizer with a single oscillator and an ADSR envelope.
It 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’).
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.
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
.addEventListener('click', () => Tone.start())
Strictly Necessary Cookies
Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.