mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
408 lines
No EOL
12 KiB
HTML
408 lines
No EOL
12 KiB
HTML
<!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>
|
|
|
|
<ul class="dropdown-menu ">
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
</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>
|
|
<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>
|
|
<p>There are a couple ways to use the tone library with require.js and r.js. </p>
|
|
<p>The best way to use with Tone.js is to make a path to the base directory:</p>
|
|
<pre><code class="lang-javascript">require.config({
|
|
baseUrl: './base',
|
|
paths: {
|
|
"Tone" : "pathto/Tone.js/Tone"
|
|
}
|
|
});</code></pre>
|
|
<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>
|
|
<ul>
|
|
<li>"4n" = quarter note</li>
|
|
<li>"8t" = eighth note triplet</li>
|
|
<li>"2m" = two measures</li>
|
|
</ul>
|
|
<p><strong>Transport Time</strong>: will also provide tempo and time signature relative times in the form BARS:QUARTERS:SIXTEENTHS.</p>
|
|
<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>
|
|
<p><strong>Frequency</strong>: seconds can also be described in Hz. </p>
|
|
<ul>
|
|
<li>"1hz" = 1 second</li>
|
|
<li>"5hz" = 0.2 seconds</li>
|
|
</ul>
|
|
<p><strong>Now-Relative</strong>: prefix any of the above with "+" and it will be interpreted as "the current time + "</p>
|
|
<ul>
|
|
<li>"+1m" = 1 measure from now</li>
|
|
<li>"+0.5" = half a second from now</li>
|
|
</ul>
|
|
<h1>Components</h1>
|
|
<p>Tone.js provides a number number of useful components for building synthesizers and audio applications.</p>
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
<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>
|
|
<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>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
<footer>
|
|
|
|
|
|
<span class="copyright">
|
|
Tone No Tone Copyright © 2014.
|
|
</span>
|
|
<br />
|
|
|
|
<span class="jsdoc-message">
|
|
Documentation generated on Mon Jun 23 2014 14:12:31 GMT-0400 (EDT).
|
|
</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>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</body>
|
|
</html> |