Skip to content

Installation

Matthew edited this page Jun 29, 2018 · 27 revisions

Download

  • download - full | min
  • npm - npm install tone
  • dev - npm install tone@next

Usage

Basic

If Tone.js is included in the page, a global variable named Tone will be added to the window.

Module Loaders

Internally, Tone uses AMD for dependency management. But the build process adds a UMD footer to the built file which makes it compatible with both AMD and CommonJS.

Tone.js build

You can include the build file (which is available from one of the links above) like any other dependency using either AMD or CommonJS style:

require(["Tone"], function(Tone){
    var synth = new Tone.MonoSynth();
    //...etc

or with CommonJS:

var MonoSynth = require("Tone").MonoSynth;
var synth = new MonoSynth();

Individual Files

Using individual files with a module loader can bring your package size down significantly since it will only include the modules used in your code. You'll have to familiarize yourself with Tone.js' directory structure since files have to be referenced with their full path.

To use the individual files, you'll need a require framework which supports AMD like RequireJS, webpack, or deAMDify for browserify.

The path to the root Tone folder needs to be in the search path so that internal dependencies can resolve.

RequireJS Paths
require.config({
    baseUrl: "./base",
    paths: {
        "Tone" : "path/to/Tone.js/Tone"
    }
});
require(["Tone/core/Transport"], function(Transport){
    //...
Webpack
module.exports = {
	resolve: {
		root: __dirname,
                // for webpack 1:
		modulesDirectories : ["path/to/Tone.js/"],
                // for webpack 2:
                modules : ["path/to/Tone.js/"]
	},
	//...
ES6 Imports

After Tone.js is added as a module resolve path, individual files can be specified like so

import Transport from 'Tone/core/Transport';
import Volume from 'Tone/component/Volume';
Clone this wiki locally