Tone.js/README.md

205 lines
9.3 KiB
Markdown
Raw Normal View History

2014-03-19 21:26:22 +00:00
Tone.js
2014-03-15 02:56:44 +00:00
=========
2019-02-01 15:36:24 +00:00
[![Build Status](https://travis-ci.org/Tonejs/Tone.js.svg?branch=dev)](https://travis-ci.org/Tonejs/Tone.js) [![codecov](https://codecov.io/gh/Tonejs/Tone.js/branch/dev/graph/badge.svg)](https://codecov.io/gh/Tonejs/Tone.js)
2017-04-30 17:28:58 +00:00
2019-12-31 00:10:59 +00:00
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 building blocks to create your own synthesizers, effects, and complex control signals.
2014-09-09 04:40:33 +00:00
[API](https://tonejs.github.io/docs/)
2014-09-09 04:40:33 +00:00
[Examples](https://tonejs.github.io/examples/)
2015-02-26 17:25:27 +00:00
[Demos](https://tonejs.github.io/demos)
2014-04-16 16:17:17 +00:00
# Installation
2019-01-10 16:51:50 +00:00
* [download](https://unpkg.com/tone)
* `npm install tone`
2017-09-13 23:06:12 +00:00
* dev -> `npm install tone@next`
2014-04-06 21:05:58 +00:00
2019-11-16 22:10:52 +00:00
## importing
You can import the entire library:
```typescript
import * as Tone from "tone";
```
or individual modules:
```typescript
import { Synth } from "tone";
```
2015-11-11 04:32:01 +00:00
# Hello Tone
2014-09-11 18:12:25 +00:00
2014-12-04 03:30:46 +00:00
```javascript
2016-07-07 15:44:02 +00:00
//create a synth and connect it to the master output (your speakers)
2020-02-28 17:13:10 +00:00
const synth = new Tone.Synth().toMaster();
2014-04-06 21:05:58 +00:00
2016-06-07 21:53:14 +00:00
//play a middle 'C' for the duration of an 8th note
2015-06-26 05:22:16 +00:00
synth.triggerAttackRelease("C4", "8n");
2014-04-06 21:05:58 +00:00
```
2014-04-16 16:17:17 +00:00
2016-07-07 15:44:02 +00:00
#### Tone.Synth
2014-09-04 18:04:02 +00:00
[Tone.Synth](https://tonejs.github.io/docs/Synth) is a basic synthesizer with a single [oscillator](https://tonejs.github.io/docs/OmniOscillator) and an [ADSR envelope](https://tonejs.github.io/docs/Envelope).
2014-09-04 18:04:02 +00:00
2016-07-07 15:44:02 +00:00
#### triggerAttackRelease
2014-09-04 18:04:02 +00:00
`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](https://github.com/Tonejs/Tone.js/wiki/Time). 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.
2016-07-07 15:44:02 +00:00
#### Time
2019-12-31 00:10:59 +00:00
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.
2014-04-16 16:53:51 +00:00
[Read about Time encodings](https://github.com/Tonejs/Tone.js/wiki/Time).
2014-04-16 16:53:51 +00:00
2019-01-10 03:30:37 +00:00
# Starting Audio
2019-12-31 00:10:59 +00:00
Browsers will not play _any_ audio until a user clicks something (like a play button) and the AudioContext has had a chance to start. Run your Tone.js code only after calling `Tone.start()` from a event listener which is triggered by a user action such as "click" or "keydown".
`Tone.start` returns a promise, the audio will be ready only after that promise is resolved. Scheduling or playing audio before the AudioContext is running will result in silence or wrong scheduling.
2019-01-10 03:30:37 +00:00
```javascript
//attach a click listener to a play button
document.querySelector('button').addEventListener('click', async () => {
await Tone.start()
console.log('audio is ready')
})
2019-01-10 03:30:37 +00:00
```
2016-07-07 15:44:02 +00:00
# Scheduling
2015-11-11 04:32:01 +00:00
### Transport
[Tone.Transport](https://tonejs.github.io/docs/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`.
2015-11-11 04:32:01 +00:00
### Loops
Tone.js provides higher-level abstractions for scheduling events. [Tone.Loop](https://tonejs.github.io/docs/Loop) is a simple way to create a looped callback that can be scheduled to start and stop.
2015-11-11 04:32:01 +00:00
```typescript
const synth = new Tone.Synth().toDestination();
2015-11-11 04:32:01 +00:00
//play a note every quarter-note
const loop = new Tone.Loop(time => {
2015-11-11 04:32:01 +00:00
synth.triggerAttackRelease("C2", "8n", time);
}, "4n");
2016-07-07 15:44:02 +00:00
```
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**.
2014-04-16 16:53:51 +00:00
2016-07-07 15:44:02 +00:00
You can then start and stop the loop along the Transport's timeline.
```javascript
2015-11-11 04:32:01 +00:00
//loop between the first and fourth measures of the Transport's timeline
loop.start("1m").stop("4m");
```
2016-07-07 15:44:02 +00:00
Then start the Transport to hear the loop:
2015-11-11 04:32:01 +00:00
```javascript
2016-07-13 00:30:32 +00:00
Tone.Transport.start();
2015-11-11 04:32:01 +00:00
```
2014-04-16 16:53:51 +00:00
2016-07-07 15:44:02 +00:00
[Read about Tone.js' Event classes](https://github.com/Tonejs/Tone.js/wiki/Events) and [scheduling events with the Transport.](https://github.com/Tonejs/Tone.js/wiki/Transport)
2014-04-16 16:53:51 +00:00
2015-02-26 17:26:37 +00:00
# Instruments
2014-04-16 16:53:51 +00:00
2015-11-11 04:32:01 +00:00
```javascript
//pass in some initial values for the filter and filter envelope
const synth = new Tone.Synth({
oscillator : {
type : "pwm",
modulationFrequency : 0.2
2015-11-11 04:32:01 +00:00
},
envelope : {
attack : 0.02,
decay : 0.1,
sustain : 0.2,
release : 0.9,
2015-11-11 04:32:01 +00:00
}
}).toDestination();
2015-11-11 04:32:01 +00:00
//start the note "D3" one second from now
2016-07-07 15:44:02 +00:00
synth.triggerAttack("D3", "+1");
2015-11-11 04:32:01 +00:00
```
All instruments are monophonic (one voice) but can be made polyphonic when the constructor is passed in as the first argument to [Tone.PolySynth](https://tonejs.github.io/docs/PolySynth).
2015-11-11 04:32:01 +00:00
```javascript
2016-07-07 15:44:02 +00:00
//a 4 voice Synth
const polySynth = new Tone.PolySynth(Tone.Synth).toDestination();
2015-11-11 04:32:01 +00:00
//play a chord
2016-06-07 21:53:14 +00:00
polySynth.triggerAttackRelease(["C4", "E4", "G4", "B4"], "2n");
2015-11-11 04:32:01 +00:00
```
[Read more about Instruments.](https://github.com/Tonejs/Tone.js/wiki/Instruments)
2014-09-04 18:04:02 +00:00
2015-02-26 17:26:37 +00:00
# Effects
2014-04-16 16:53:51 +00:00
In the above examples, the synthesizer was always connected directly to the [speakers](https://tonejs.github.io/docs/Destination), but the output of the synth could also be routed through one (or more) effects before going to the speakers.
2015-11-11 04:32:01 +00:00
```javascript
//create a distortion effect
const distortion = new Tone.Distortion(0.4).toDestination();
2015-11-11 04:32:01 +00:00
//connect a synth to the distortion
synth.connect(distortion);
```
[Read more about Effects](https://github.com/Tonejs/Tone.js/wiki/Effects)
# Sources
Tone has a few basic audio sources like [Tone.Oscillator](https://tonejs.github.io/docs/Oscillator) which has sine, square, triangle, and sawtooth waveforms, a buffer player ([Tone.Player](https://tonejs.github.io/docs/Player)), a noise generator ([Tone.Noise](https://tonejs.github.io/docs/Noise)), a few additional oscillator types ([pwm](https://tonejs.github.io/docs/PWMOscillator), [pulse](https://tonejs.github.io/docs/PulseOscillator), [fat](https://tonejs.github.io/docs/FatOscillator), [fm](https://tonejs.github.io/docs/FMOscillator)) and [external audio input](https://tonejs.github.io/docs/UserMedia) (when [WebRTC is supported](http://caniuse.com/#feat=stream)).
2015-11-11 04:32:01 +00:00
```javascript
//a pwm oscillator which is connected to the speaker and started right away
const pwm = new Tone.PWMOscillator("Bb3").toDestination().start();
2015-11-11 04:32:01 +00:00
```
2015-09-30 17:29:30 +00:00
2015-11-11 04:32:01 +00:00
[Read more](https://github.com/Tonejs/Tone.js/wiki/Sources)
2014-04-16 17:13:42 +00:00
2015-02-26 17:26:37 +00:00
# Signals
2014-04-16 17:13:42 +00:00
2017-09-13 23:06:12 +00:00
Like the underlying Web Audio API, Tone.js is built with audio-rate signal control over nearly everything. This is a powerful feature which allows for sample-accurate synchronization and scheduling of parameters.
2014-04-16 17:13:42 +00:00
[Read more](https://github.com/Tonejs/Tone.js/wiki/Signals).
2014-04-16 17:13:42 +00:00
2015-02-26 17:25:27 +00:00
# AudioContext
2014-09-04 18:04:02 +00:00
2019-12-31 00:10:59 +00:00
Tone.js creates an AudioContext when it loads and shims it for maximum browser compatibility using [standardized-audio-context](https://github.com/chrisguttandin/standardized-audio-context). The AudioContext can be accessed at `Tone.context`. Or set your own AudioContext using `Tone.setContext(audioContext)`.
2014-09-04 18:04:02 +00:00
2015-09-30 17:29:30 +00:00
# MIDI
To use MIDI files, you'll first need to convert them into a JSON format which Tone.js can understand using [Midi](https://tonejs.github.io/Midi/).
2015-09-30 17:29:30 +00:00
2014-07-04 03:00:51 +00:00
# Performance
Tone.js makes extensive use of the native Web Audio Nodes such as the GainNode and WaveShaperNode for all signal processing, which enables Tone.js to work well on both desktop and mobile browsers.
2015-11-11 04:32:01 +00:00
[This wiki](https://github.com/Tonejs/Tone.js/wiki/Performance) article has some suggestions related to performance for best practices.
2018-01-02 17:02:15 +00:00
# Testing
Tone.js runs an extensive test suite using [mocha](https://mochajs.org/) and [chai](http://chaijs.com/) with nearly 100% coverage. Each commit and pull request is run on [Travis-CI](https://travis-ci.org/Tonejs/Tone.js/) across browsers and versions. Passing builds on the 'dev' branch are published on npm as `tone@next`.
2018-01-02 17:02:15 +00:00
2015-11-11 04:32:01 +00:00
# Contributing
2017-09-13 23:06:12 +00:00
There are many ways to contribute to Tone.js. Check out [this wiki](https://github.com/Tonejs/Tone.js/wiki/Contributing) if you're interested.
2014-04-16 16:53:51 +00:00
2016-07-07 15:44:02 +00:00
If you have questions (or answers) that are not necessarily bugs/issues, please post them to the [forum](https://groups.google.com/forum/#!forum/tonejs).
2014-09-04 18:04:02 +00:00
# References and Inspiration
2014-09-05 05:38:11 +00:00
* [Tuna.js](https://github.com/Dinahmoe/tuna)
2014-09-04 18:04:02 +00:00
* [Many of Chris Wilson's Repositories](https://github.com/cwilso)
2017-10-26 17:15:02 +00:00
* [Many of Mohayonao's Repositories](https://github.com/mohayonao)
2014-09-05 05:38:11 +00:00
* [The Spec](http://webaudio.github.io/web-audio-api/)
2015-08-15 21:26:32 +00:00
* [Sound on Sound - Synth Secrets](http://www.soundonsound.com/sos/may99/articles/synthsec.htm)
2015-12-02 17:31:04 +00:00
* [Miller Puckette - Theory and Techniques of Electronic Music](http://msp.ucsd.edu/techniques.htm)
2019-12-31 00:10:59 +00:00
* [standardized-audio-context](https://github.com/chrisguttandin/standardized-audio-context)