2014-06-22 02:56:51 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Tone.js Index< / title >
<!-- [if lt IE 9]>
< script src = "//html5shiv.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
< link type = "text/css" rel = "stylesheet" href = "styles/sunlight.default.css" >
< link type = "text/css" rel = "stylesheet" href = "styles/site.flatly.css" >
< / head >
< body >
< div class = "container-fluid" >
< div class = "navbar navbar-fixed-top navbar-inverse" >
< div class = "navbar-inner" >
< a class = "brand" href = "index.html" > Tone.js< / a >
< ul class = "nav" >
< li class = "dropdown" >
< a href = "classes.list.html" class = "dropdown-toggle" data-toggle = "dropdown" > Classes< b
class="caret">< / b > < / a >
2014-06-22 03:16:17 +00:00
< ul class = "dropdown-menu " >
2014-06-22 02:56:51 +00:00
< li >
< a href = "Tone.html" > Tone< / a >
< / li >
< li >
< a href = "Tone.Add.html" > Add< / a >
< / li >
< li >
< a href = "Tone.AutoPanner.html" > AutoPanner< / a >
< / li >
< li >
< a href = "Tone.BitCrusher.html" > BitCrusher< / a >
< / li >
< li >
< a href = "Tone.DryWet.html" > DryWet< / a >
< / li >
< li >
< a href = "Tone.Effect.html" > Effect< / a >
< / li >
< li >
< a href = "Tone.Envelope.html" > Envelope< / a >
< / li >
< li >
< a href = "Tone.FeedbackDelay.html" > FeedbackDelay< / a >
< / li >
< li >
< a href = "Tone.FeedbackEffect.html" > FeedbackEffect< / a >
< / li >
< li >
< a href = "Tone.LFO.html" > LFO< / a >
< / li >
< li >
< a href = "Tone.Merge.html" > Merge< / a >
< / li >
< li >
< a href = "Tone.Meter.html" > Meter< / a >
< / li >
< li >
< a href = "Tone.Microphone.html" > Microphone< / a >
< / li >
< li >
< a href = "Tone.Multiply.html" > Multiply< / a >
< / li >
< li >
< a href = "Tone.Noise.html" > Noise< / a >
< / li >
< li >
< a href = "Tone.Oscillator.html" > Oscillator< / a >
< / li >
< li >
< a href = "Tone.Panner.html" > Panner< / a >
< / li >
< li >
< a href = "Tone.PingPongDelay.html" > PingPongDelay< / a >
< / li >
< li >
< a href = "Tone.Player.html" > Player< / a >
< / li >
< li >
< a href = "Tone.Recorder.html" > Recorder< / a >
< / li >
< li >
< a href = "Tone.Scale.html" > Scale< / a >
< / li >
< li >
< a href = "Tone.Signal.html" > Signal< / a >
< / li >
< li >
< a href = "Tone.Source.html" > Source< / a >
< / li >
< li >
< a href = "Tone.Split.html" > Split< / a >
< / li >
< li >
< a href = "Tone.Transport.html" > Transport< / a >
< / li >
< / ul >
< / li >
2014-06-23 18:20:16 +00:00
< li class = "dropdown" >
< a href = "global.html" class = "dropdown-toggle" data-toggle = "dropdown" > Global< b
class="caret">< / b > < / a >
< ul class = "dropdown-menu " >
< li >
< a href = "global.html#isFrequency" > isFrequency< / a >
< / li >
< li >
< a href = "global.html#isNotation" > isNotation< / a >
< / li >
< li >
< a href = "global.html#isTransportTime" > isTransportTime< / a >
< / li >
< li >
< a href = "global.html#toTransportTime" > toTransportTime< / a >
< / li >
< / ul >
< / li >
2014-06-22 02:56:51 +00:00
< / ul >
< / div >
< / div >
< div class = "row-fluid" >
< div class = "span8" >
< div id = "main" >
< section >
< article > < h1 > Tone.js< / h1 >
< p > A collection of building blocks extending and wrapping the Web Audio API. < / p >
< h1 > Installation< / h1 >
2014-06-23 17:38:55 +00:00
< p > Tone.js can be used with or without RequireJS< / p >
< h3 > RequireJS< / h3 >
< p > < a href = "http://requirejs.org/" > RequireJS< / a > 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. < / p >
2014-06-22 02:56:51 +00:00
< p > There are a couple ways to use the tone library with require.js and r.js. < / p >
2014-06-23 17:38:55 +00:00
< p > The best way to use with Tone.js is to make a path to the base directory:< / p >
2014-06-22 02:56:51 +00:00
< pre > < code class = "lang-javascript" > require.config({
baseUrl: './base',
paths: {
2014-06-23 17:38:55 +00:00
" Tone" : " pathto/Tone.js/Tone"
2014-06-22 02:56:51 +00:00
}
});< / code > < / pre >
2014-06-23 17:38:55 +00:00
< h3 > without RequireJS< / h3 >
< p > Tone.js can also be used without RequireJS. If you include the < a href = "https://raw.githubusercontent.com/TONEnoTONE/Tone.js/master/Tone.js" > Tone.js Build< / a >
as a script tag at the top of your page, a global called < code > Tone< / code > will be added to the window. < / p >
< pre > < code class = "lang-html" > < script type=" text/javascript" src=" pathto/Tone.js" > < /script> < / code > < / pre >
< h1 > AudioContext< / h1 >
< p > Tone.js creates an AudioContext when it loads and shims it for maximum browser compatibility. The AudioContext can be found at
< code > Tone.context< / code > or from within any Node in the Tone library as < code > this.context< / code > . For AudioNodes
to be able to connect together, they need to be created from the same AudioContext. < / p >
< h1 > Audio Sources< / h1 >
< p > Tone.js simplifies the creation of oscillators and buffer players. < / p >
< pre > < code class = "lang-javascript" > //a square wave at 440hz:
var osc = new Tone.Oscillator(440, " square" );
//connect it to the master output
osc.toMaster();
osc.start();< / code > < / pre >
< pre > < code class = "lang-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();< / code > < / pre >
< h1 > Transport and Timing< / h1 >
< p > 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. < / p >
< pre > < code class = "lang-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();< / code > < / pre >
< p > The Transport also allows single events to occur in the future using setTimeout< / p >
< pre > < code class = "lang-javascript" > //this will start an oscillator 5 seconds from now
Tone.Transport.setTimeout(function(time){
osc.start(time);
}, 5);
Tone.Transport.start();< / code > < / pre >
< p > Events can also be arranged on a timeline. Callbacks registered with < code > setTimeline< / code > will
repeat even after the Transport is started, stopped or looped. < / p >
< pre > < code class = "lang-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();< / code > < / pre >
< h3 > Time< / h3 >
< p > 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: < / p >
< p > < strong > Number< / strong > : these will be taken literally as the time (in seconds). < / p >
< p > < strong > Notation< / strong > : describes time in BPM and time signature relative values. < / p >
2014-06-23 18:20:16 +00:00
< ul >
< li > " 4n" = quarter note< / li >
< li > " 8t" = eighth note triplet< / li >
< li > " 2m" = two measures< / li >
< / ul >
2014-06-23 17:38:55 +00:00
< p > < strong > Transport Time< / strong > : will also provide tempo and time signature relative times in the form BARS:QUARTERS:SIXTEENTHS.< / p >
2014-06-23 18:20:16 +00:00
< ul >
< li > " 32:0:0" = start of the 32nd measure. < / li >
< li > " 4:3:2" = 4 bars + 3 quarter notes + 2 sixteenth notes. < / li >
< / ul >
2014-06-23 17:38:55 +00:00
< p > < strong > Frequency< / strong > : seconds can also be described in Hz. < / p >
2014-06-23 18:20:16 +00:00
< ul >
< li > " 1hz" = 1 second< / li >
< li > " 5hz" = 0.2 seconds< / li >
< / ul >
2014-06-23 17:38:55 +00:00
< p > < strong > Now-Relative< / strong > : prefix any of the above with " +" and it will be interpreted as " the current time + " < / p >
2014-06-23 18:20:16 +00:00
< ul >
< li > " +1m" = 1 measure from now< / li >
< li > " +0.5" = half a second from now< / li >
< / ul >
2014-06-23 17:38:55 +00:00
< h1 > Components< / h1 >
< p > Tone.js provides a number number of useful components for building synthesizers and audio applications.< / p >
2014-06-22 02:56:51 +00:00
< ul >
2014-06-23 17:38:55 +00:00
< li > < a href = "http://tonenotone.github.io/Tone.js/doc/Tone.Envelope.html" > Tone.Envelope< / a > < / li >
< li > < a href = "http://tonenotone.github.io/Tone.js/doc/Tone.LFO.html" > Tone.LFO< / a > < / li >
< li > < a href = "http://tonenotone.github.io/Tone.js/doc/Tone.Panner.html" > Tone.Panner< / a > < / li >
< li > < a href = "http://tonenotone.github.io/Tone.js/doc/Tone.DryWet.html" > Tone.DryWet< / a > < / li >
2014-06-22 02:56:51 +00:00
< / ul >
2014-06-23 17:38:55 +00:00
< h1 > Control Signals< / h1 >
< p > 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. < / p >
< pre > < code class = "lang-javascript" > //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
var panner = new Tone.Panner();
lfo.connect(panner.pan); //connect the lfo to the signal which controls panning
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
//route the lfo through the scaler to the oscillator frequency
lfo.connect(scaler);
scaler.connect(osc.frequency);
//connect the oscillator to the panner and the panner to master
osc.connect(panner);
panner.toMaster();
//start the oscillator and the lfo
lfo.start();
osc.start();< / code > < / pre >
< h1 > Examples< / h1 >
2014-06-23 18:20:16 +00:00
< p > More examples can be found < a href = "http://tonenotone.github.io/Tone.js/examples/" > here< / a > .< / p >
< h1 > Documentation< / h1 >
< p > JSDocs are < a href = "http://tonenotone.github.io/Tone.js/doc/" > here< / a > .< / p > < / article >
2014-06-22 02:56:51 +00:00
< / section >
< / div >
< div class = "clearfix" > < / div >
< footer >
< span class = "copyright" >
Tone No Tone Copyright © 2014.
< / span >
< br / >
< span class = "jsdoc-message" >
2014-06-23 18:20:16 +00:00
Documentation generated on Mon Jun 23 2014 14:12:31 GMT-0400 (EDT).
2014-06-22 02:56:51 +00:00
< / span >
< / footer >
< / div >
< div class = "span3" >
< div id = "toc" > < / div >
< / div >
< br clear = "both" >
< / div >
< / div >
< script src = "scripts/sunlight.js" > < / script >
< script src = "scripts/sunlight.javascript.js" > < / script >
< script src = "scripts/sunlight-plugin.doclinks.js" > < / script >
< script src = "scripts/sunlight-plugin.linenumbers.js" > < / script >
< script src = "scripts/sunlight-plugin.menu.js" > < / script >
< script src = "scripts/jquery.min.js" > < / script >
< script src = "scripts/jquery.scrollTo.js" > < / script >
< script src = "scripts/jquery.localScroll.js" > < / script >
< script src = "scripts/bootstrap-dropdown.js" > < / script >
< script src = "scripts/toc.js" > < / script >
< script > Sunlight . highlightAll ( { lineNumbers : true , showMenu : true , enableDoclinks : true } ) ; < / script >
< script >
$( function () {
$( "#toc" ).toc( {
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : 60
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
} );
< / script >
2014-06-23 17:38:55 +00:00
< script >
$( function () {
$('#main').localScroll({
offset: { top: 56 } //offset by the height of your header (give or take a few px, see what works for you)
});
$( "dt h4.name" ).each( function () {
var $this = $( this );
var icon = $( "< i / > " ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
var dt = $this.parents( "dt" );
var children = dt.next( "dd" );
$this.append( icon ).css( {cursor : "pointer"} );
$this.addClass( "member-collapsed" ).addClass( "member" );
children.hide();
$this.toggle( function () {
icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
$this.addClass( "member-open" ).removeClass( "member-collapsed" );
children.slideDown();
}, function () {
icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
$this.addClass( "member-collapsed" ).removeClass( "member-open" );
children.slideUp();
} );
} );
} );
< / script >
2014-06-22 02:56:51 +00:00
< / body >
2014-06-18 21:39:05 +00:00
< / html >
