Tone.js/README.md

175 lines
5.4 KiB
Markdown
Raw Normal View History

2014-03-19 21:26:22 +00:00
Tone.js
2014-03-15 02:56:44 +00:00
=========
2014-04-16 16:17:17 +00:00
A collection of building blocks extending and wrapping the Web Audio API.
2014-04-16 16:17:17 +00:00
# Installation
2014-06-23 17:28:55 +00:00
Tone.js can be used with or without RequireJS
2014-04-06 21:05:58 +00:00
2014-06-23 17:28:55 +00:00
### RequireJS
2014-04-06 21:05:58 +00:00
2014-06-23 17:28:55 +00:00
[RequireJS](http://requirejs.org/) is a JavaScript module loader which Tone.js uses internally
for dependency management. It is a powerful tool for development and deploying. Using r.js (RequireJS's optimizer)
can bring package size down significantly since it will only load the modules used in your code.
2014-04-06 21:05:58 +00:00
2014-06-23 17:28:55 +00:00
There are a couple ways to use the tone library with require.js and r.js.
2014-04-06 21:05:58 +00:00
2014-06-23 17:28:55 +00:00
The best way to use with Tone.js is to make a path to the base directory:
2014-04-06 21:05:58 +00:00
```javascript
require.config({
baseUrl: './base',
paths: {
2014-06-23 17:28:55 +00:00
"Tone" : "pathto/Tone.js/Tone"
2014-04-06 21:05:58 +00:00
}
});
```
2014-04-16 16:17:17 +00:00
2014-06-23 17:28:55 +00:00
### without RequireJS
Tone.js can also be used without RequireJS. If you include the [Tone.js Build](https://raw.githubusercontent.com/TONEnoTONE/Tone.js/master/Tone.js)
as a script tag at the top of your page, a global called ```Tone``` will be added to the window.
2014-04-16 16:17:17 +00:00
```html
2014-06-23 17:28:55 +00:00
<script type="text/javascript" src="pathto/Tone.js"></script>
2014-04-16 16:17:17 +00:00
```
2014-04-06 21:05:58 +00:00
2014-06-23 17:28:55 +00:00
# AudioContext
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
Tone.js creates an AudioContext when it loads and shims it for maximum browser compatibility. The AudioContext can be found at
```Tone.context``` or from within any Node in the Tone library as ```this.context```. For AudioNodes
to be able to connect together, they need to be created from the same AudioContext.
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
# Audio Sources
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
Tone.js simplifies the creation of oscillators and buffer players.
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
```javascript
//a square wave at 440hz:
var osc = new Tone.Oscillator(440, "square");
//connect it to the master output
osc.toMaster();
osc.start();
```
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
```javascript
//a buffer player which plays as soon as it's loaded
//the second argument is an onload callback
var player = new Tone.Player("./sound.mp3", function(){
player.start();
});
player.toMaster();
```
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
# Transport and Timing
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
A unique feature of the library is the oscillator-based Transport which allows for simple synchronization of
sources and signals. The Transport allows you to register callbacks at precise moments along and get a callback
with the exact time requested. Pass the time to the Node you'd like to start or automate.
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
```javascript
//this will start the player on every quarter note
Tone.Transport.setInterval(function(time){
player.start(time);
}, "4n");
//start the Transport for the events to start
Tone.Transport.start();
```
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
The Transport also allows single events to occur in the future using setTimeout
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
```javascript
//this will start an oscillator 5 seconds from now
Tone.Transport.setTimeout(function(time){
osc.start(time);
}, 5);
Tone.Transport.start();
```
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
Events can also be arranged on a timeline. Callbacks registered with ```setTimeline``` will
repeat even after the Transport is started, stopped or looped.
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
```javascript
//this will start an oscillator 5 seconds from now
Tone.Transport.setTimeline(function(time){
console.log("first measure")
}, "1:0:0");
Tone.Transport.setLoopEnd("4:0:0");
Tone.Transport.start();
```
### Time
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
In the Tone library, time can be described in a number of ways. Any method
which takes a time as a parameter will accept any of these forms:
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
__Number__: these will be taken literally as the time (in seconds).
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
__Notation__: describes time in BPM and time signature relative values.
2014-04-16 16:53:51 +00:00
2014-06-23 17:53:01 +00:00
* "4n" = quarter note
* "8t" = eighth note triplet
* "2m" = two measures
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
__Transport Time__: will also provide tempo and time signature relative times in the form BARS:QUARTERS:SIXTEENTHS.
2014-04-16 16:53:51 +00:00
2014-06-23 17:53:01 +00:00
* "32:0:0" = start of the 32nd measure.
* "4:3:2" = 4 bars + 3 quarter notes + 2 sixteenth notes.
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
__Frequency__: seconds can also be described in Hz.
2014-04-16 16:53:51 +00:00
2014-06-23 17:53:01 +00:00
* "1hz" = 1 second
* "5hz" = 0.2 seconds
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
__Now-Relative__: prefix any of the above with "+" and it will be interpreted as "the current time + "
2014-04-16 16:53:51 +00:00
2014-06-23 17:53:01 +00:00
* "+1m" = 1 measure from now
* "+0.5" = half a second from now
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
# Components
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
Tone.js provides a number number of useful components for building synthesizers and audio applications.
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
* [Tone.Envelope](http://tonenotone.github.io/Tone.js/doc/Tone.Envelope.html)
* [Tone.LFO](http://tonenotone.github.io/Tone.js/doc/Tone.LFO.html)
* [Tone.Panner](http://tonenotone.github.io/Tone.js/doc/Tone.Panner.html)
* [Tone.DryWet](http://tonenotone.github.io/Tone.js/doc/Tone.DryWet.html)
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
# Control Signals
2014-04-16 16:53:51 +00:00
2014-06-23 17:28:55 +00:00
Like the underlying Web Audio API, Tone.js is built to work with audio-rate signal control of many parameters.
This is a powerful feature which allows for sample-accurate synchronization of multiple parameters with a single
signal and also lets you connect an LFO to nearly anything.
2014-04-16 16:53:51 +00:00
```javascript
2014-06-23 17:28:55 +00:00
//use the same LFO to create a vibrato on a oscillator and pan the audio L/R
var lfo = new Tone.LFO(3, 0, 1); //3hz signal between 0-1
2014-04-16 17:13:42 +00:00
2014-06-23 17:28:55 +00:00
var panner = new Tone.Panner();
lfo.connect(panner.pan); //connect the lfo to the signal which controls panning
2014-04-16 17:13:42 +00:00
2014-06-23 17:28:55 +00:00
var scaler = new Tone.Scale(420, 460); //scale the lfo signal from 0-1 to 420-460
var osc = new Tone.Oscillator(440, "sine"); //create an oscillator
2014-04-16 17:13:42 +00:00
2014-06-23 17:28:55 +00:00
//route the lfo through the scaler to the oscillator frequency
lfo.connect(scaler);
scaler.connect(osc.frequency);
2014-04-16 17:13:42 +00:00
2014-06-23 17:28:55 +00:00
//connect the oscillator to the panner and the panner to master
osc.connect(panner);
panner.toMaster();
2014-04-16 17:13:42 +00:00
2014-06-23 17:28:55 +00:00
//start the oscillator and the lfo
lfo.start();
osc.start();
2014-04-16 17:13:42 +00:00
```
2014-06-23 17:28:55 +00:00
# Examples
2014-04-16 17:13:42 +00:00
2014-06-25 16:47:47 +00:00
Examples can be found [here](http://tonenotone.github.io/Tone.js/examples/).
2014-04-16 17:13:42 +00:00
2014-06-23 17:28:55 +00:00
# Documentation
2014-04-16 16:53:51 +00:00
2014-06-23 17:53:01 +00:00
JSDocs are [here](http://tonenotone.github.io/Tone.js/doc/).