Web Audio framework – Tone.js

Making music in JavaScript? Here is Tone.js – a great web audio framework.

Web Audio framework – make interactive music in the browser with Tone.js

Tone.js is a Web Audio framework for creating interactive music in the browser. The architecture of Tone.js aims to be familiar to both musicians and audio programmers looking to create web-based audio applications.

On the high-level, Tone offers common DAW (digital audio workstation) features like a global transport for scheduling events and prebuilt synths and effects. For signal-processing programmers (coming from languages like Max/MSP), Tone provides a wealth of high performance, low latency building blocks and DSP modules to build your own synthesizers, effects, and complex control signals.

Tone.js - a Web Audio framework for making interactive music in the browser
Tone.js – a Web Audio framework for making interactive music in the browser

Setup

npm install tone

Sample

// create a synth and connect it to the master output (speakers)
var synth = new Tone.Synth().toMaster();

// play a middle 'C' for the duration of an 8th note
synth.triggerAttackRelease("C4", "8n");

Overview

We can do really a lot with this solution.

Tone.Synth

Tone.Synth is a basic synthesizer with a single oscillator and an ADSR envelope.

triggerAttackRelease

It is a combination of two methods: triggerAttack when the amplitude is rising (for example from a ‘key down’ or ‘note on’ event), and triggerRelease is when the amplitude is going back to 0 (‘key up’ / ‘note off’).

Time

Tone.js abstracts away the AudioContext time. Instead of defining all values in seconds, any method which takes time as an argument can accept a number or a string. For example “4n” is a quarter-note, “8t” is an eighth-note triplet, and “1m” is one measure. These values can even be composed into expressions.

Starting Audio

Most browsers will not play any audio until a user clicks something (like a play button). Execute the above example only after a users invokes resume() on Tone’s context, or simply Tone.start():

// attach a click listener to a play button
document.querySelector('button')
  .addEventListener('click', () => Tone.start())

Check documentation to see other great features.

License: MIT

Homepage

https://tonejs.github.io

Also check up awesome examples & demos:

https://tonejs.github.io/examples

https://tonejs.github.io/demos

GitHub

https://github.com/Tonejs/Tone.js

See also

Interactive-Image – a jQuery plugin to embed interactive images

Creating 3D rotatable objects with jQuery Interactive 3D plugin

Highcharts: Interactive JavaScript charts for your website

JavaScript animation engine – anime.js

JavaScript physics animations library – dynamics.js

YT – jQuery Youtube video gallery plugin

PragmaticPlayerJs – jQuery plugin for embedded youtube and HTML5 videos

JS video and photo gallery – blueimp

Enjoy!