mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
331 lines
No EOL
9.7 KiB
HTML
331 lines
No EOL
9.7 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 inline">
|
|
|
|
<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>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
|
|
|
|
<div class="span8">
|
|
|
|
<div id="main">
|
|
|
|
|
|
|
|
|
|
<span class="page-title">Index</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<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 require.js</p>
|
|
<h3>require.js</h3>
|
|
<p>There are a couple ways to use the tone library with require.js and r.js. </p>
|
|
<p>You can include the Tone.js build (located in the build folder), as one of the deps in your require.config</p>
|
|
<pre><code class="lang-javascript">require.config({
|
|
baseUrl: './base',
|
|
deps : ["../deps/Tone.js/build/Tone"],
|
|
});</code></pre>
|
|
<p>or alternatively, keep the directory structure the same and make a path which points to the Tone directory</p>
|
|
<pre><code class="lang-javascript">require.config({
|
|
baseUrl: './base',
|
|
paths: {
|
|
"Tone" : "../deps/Tone.js/Tone"
|
|
}
|
|
});</code></pre>
|
|
<h3>without require.js</h3>
|
|
<p>To use Tone.js without require, just add the build source (located at build/Tone.js) to the top of your html page. Tone will add itself as a global. </p>
|
|
<pre><code class="lang-html"><script type="text/javascript" src="../build/Tone.js"></script></code></pre>
|
|
<h1>API</h1>
|
|
<h2>Tone()</h2>
|
|
<p>Tone is the base-class of all ToneNode's</p>
|
|
<h3>Properties</h3>
|
|
<h4>.input {GainNode}</h4>
|
|
<p>Connect all inputs to a ToneNode to the Node's input.</p>
|
|
<h4>.output {GainNode}</h4>
|
|
<p>A GainNode which is the output of all of the processing that occurs within the ToneNode</p>
|
|
<h4>.context {AudioContext}</h4>
|
|
<p>A reference to the AudioContext. It is also available globally as Tone.context</p>
|
|
<h3>Methods</h3>
|
|
<h4>.connect(node)</h4>
|
|
<ul>
|
|
<li>node - {AudioNode | AudioParam | ToneNode}</li>
|
|
</ul>
|
|
<p>Connects the node's output to the next node. If it is a ToneNode it will automatically connect to that Node's .input </p>
|
|
<h4>.now() {number}</h4>
|
|
<ul>
|
|
<li>returns context.currentTime</li>
|
|
</ul>
|
|
<h2>Master</h2>
|
|
<p>Tone.Master is a single master output which connects to context.destination (the speakers). Before going to the DestinationNode, audio is run through a limiter (a DynamicsCompressorNode with threshold of 0db and a high ratio) to reduce the chances of blowing any ear drums. </p>
|
|
<h4>.toMaster()</h4>
|
|
<p>.toMaster() can be called on any AudioNode or ToneNode and will send the output audio to the Master channel. </p>
|
|
<h2>Transport</h2>
|
|
<p>The Transport allows events to be triggered along a musical timeline. The clock-source is bound to an Oscillator which allows for smooth tempo-curving and sample-accurate timing. </p>
|
|
<h3>Properties</h3>
|
|
<h4>.state {string}</h4>
|
|
<p>The current state of the transport ('stopped' | 'started' | 'paused')</p>
|
|
<h4>.loop {boolean}</h4>
|
|
<p>Set the transport to loop over a section</p>
|
|
<h3>Methods</h3>
|
|
<h4>.setBpm(bpm)</h4>
|
|
<ul>
|
|
<li>bpm - {number} the new tempo in beats per minute</li>
|
|
</ul>
|
|
<h4>.getBpm()</h4>
|
|
<ul>
|
|
<li>returns - {number} the current bpm</li>
|
|
</ul>
|
|
<h4>.setInterval(callback, interval, context) {Timeout}</h4>
|
|
<ul>
|
|
<li>callback - in the form: function(number)</li>
|
|
<li>interval - {number | Notation | TransportTime} see <a href="#timing-and-musical-notation">Timing and Musical Notation</a> for more information about timing in Tone.js</li>
|
|
<li>context - {Object=} optional context in which the callback is invoked</li>
|
|
<li>returns - a timeout which can be used to clear the interval</li>
|
|
</ul>
|
|
<p>.setInterval is used for repeat events. The callback is invoked before the event will occur and is passed the exact event time as a parameter</p>
|
|
<pre><code class="lang-javascript">Tone.Transport.setInterval(function(time){
|
|
samplePlayer.start(time);
|
|
}, "4n");</code></pre>
|
|
<h4>.setTimeout(callback, timeoutTime, context) {Timeout}</h4>
|
|
<ul>
|
|
<li>callback - in the form: function(number)</li>
|
|
<li>timeoutTime - {number | Notation | TransportTime} see <a href="#timing-and-musical-notation">Timing and Musical Notation</a> for more information about timing in Tone.js</li>
|
|
<li>context - {Object=} optional context in which the callback is invoked</li>
|
|
<li>returns - a timeout which can be used to clear the timeout</li>
|
|
</ul>
|
|
<p>.setTimeout is similar to .setInterval but for single occurance events. </p>
|
|
<pre><code class="lang-javascript">Tone.Transport.setTimeout(function(time){
|
|
samplePlayer.start(time);
|
|
}, "1:0:2");</code></pre>
|
|
<h1>Timing and Musical Notation</h1>
|
|
<p>All ToneNodes that accept a time as an argument can parse that time in a few ways. </p>
|
|
<h4>'now' relative timing</h4>
|
|
<p>A timing value preceeded by a "+" will be now-relative meaning that the time will be added to the context's currentTime. </p>
|
|
<pre><code class="lang-javascript">oscillator.start("+1") //starts exactly 1 second from now</code></pre>
|
|
<h4>Notation</h4>
|
|
<p>Timing can also be described in musical notation. A quarter-note is notated as "4n" and a sixteenth-note triplet is notated as "16t". Three measures is "3m". The tempo and time signature is set by Tone.Transport. This can be combined with now-relative timing. </p>
|
|
<pre><code class="lang-javascript">lfo.setFrequency("4n") //oscillates at the rate of a quarter note</code></pre>
|
|
<h4>Transport Time</h4>
|
|
<p>Transport Time is described measures:quater-notes:sixteenth-notes. </p>
|
|
<pre><code class="lang-javascript">//Start the chorus 32 measures after the start of the Transport
|
|
Tone.Transport.setTimeline(startChorus, "32:0:0");</code></pre></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 Sat Jun 21 2014 22:54:27 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>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |