Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Tone.js Interactive Music Web Framework

Tone.js Interactive Music Web Framework


Tone.js leverages the Web Audio API to provide a framework for creating interactive music in the browser.

The Web Audio API is a promising W3C recommendation for creating music on the web, but is not without its challenges and limitations. Tone.js strives to provide a framework that is familiar to both musicians and audio programmers for creating web-based audio applications.

Tone.js offers a wide range of digital audio workstation (DAW) features, including scheduling events, prebuilt synths and effects, and more. Tone.js provides an abstraction on top of Web Audio's AudioContext time, replacing seconds with music notes or measures.

The framework provides support for needing to wait for browser interactivity before playing sound by returning a promise which can get connected to user interactivity event handlers.

Tone.js provides a Transport API for tracking time, and loops for repeating music or cycling across common sounds.

The Tone.js framework provides a variety of synths, effects, audio sources, noise generators, and a framework for creating new ones. Tone.js can also leverage external audio input for browsers supporting the WebRTC protocol.

Getting started with Tone.js simply requires an npm install and then importing the relevant ES modules or all of Tone into an application.

npm install tone
import * as Tone from "tone";

Tone.js provides a robust framework for unleashing the capabilities of music in the browser with many engaging music examples and demos. Tone.js is open source software available under the MIT license. Contributions are welcome via the Tone.js contribution guidelines.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p