Skip to content

Instantly share code, notes, and snippets.

@tambien
Last active December 9, 2019 18:41
Show Gist options
  • Save tambien/884cee211812c5da94d5 to your computer and use it in GitHub Desktop.
Save tambien/884cee211812c5da94d5 to your computer and use it in GitHub Desktop.

Tone.js

What is it?

Tone.js is a Web Audio library which wraps and (hopefully) simplifies some of the Web Audio API.

The focus of Tone is on making interactive music:

* Musical timing - `"4n"`, `"8n"`, `"1:4:2"`, `"2m + 4t"`
* Musical notation - `"C4"`, `"Db4"`, `440`, `"440hz"`
* Precise scheduling with just in time callbacks
* Synths and effects
* Modular components to build your own

Basics

You create an audio processing graph by connecting nodes like oscillators or filters (think patch cables). Connections allow audio to flow from one node to the next.

The signal can be either audio signal or control signal (think modular synth). One example would be modulating the detune of one Oscillator with another oscillator to create vibrato.

Vibrato Example

AudioParam / Signal

Not all values are modulate-able with audio-rate signals. For example, you can modulate the frequency or detune of an Oscillator because these are Signals, but you can't modulate the type of an oscillator in the same way.

(In the docs, AudioParams/Signals are documented with a [~])

Signals (unlike normal parameters) are set with .value.

//NOPE
osc.frequency = 440;
//YEP
osc.frequency.value = 440;

But they also offer a bunch of scheduling methods. For example ramping the frequency of an oscillator or scheduling the frequency value to change at a specific time.

Probability...

Play (or don't) with some probability

Generating a melody

Walking through a melody array

Randomly walking through a melody

Markov

Markov chains define states and probability of moving from one state to another. We'll use chords as our states and define a way of moving from one state to another.

Basic Markov Chain

Choose the next chord

Probability tables

Each element in the array represents the probability of that event happening on that page.

Kick/Snare Probability Tables

Interpolation

Tone.CtrlInterpolate with interpolate between arrays, objects, or arrays of arrays.

Interpolating probabilities

Just in time!

As shown above, Tone.js and Web Audio can do all this scheduling ahead of time and preschedule an entire song or composition (like CSound, RTCMix and many others), but a lot of the strength of the library comes from just-in-time scheduling within callbacks. This opens things up to interaction...

Change synths envelope with mouse move

Time

Time in Web Audio starts at 0 when the page loads and is counted in seconds. Tone offers conversions from musical timing to seconds based on the current bpm of Tone.Transport.bpm.

Ramp Tempo

Resources

github

API

Examples

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment