Browser Funk: An Introduction to Tone.js

Jake Musich
Jul 28, 2017 · 4 min read

The browser is largely a visual environment. We play around in windows, wells, and luxuriate in video players. As web developer’s, our brick and mortar — HTML and CSS — are architectural tool for designing structures on a webpage. I won’t even touch the topic of image saturation in the twenty-first century. From the first XPARC GUI onward, computers are fodder for the eyes. Even programming languages are largely silent, we write but rarely, if ever, speak in code. React, Angular, Vue.js, and other view libraries are just that — tools to build windows and views. The metaphors exhaust themselves here (on purpose, thank you ( xerox xpar lady). You get the point. I think we need to spice up the traditional old model.

How about a handy way to add some music — tickle a different sense for a change — with Tone.js?

Yotam’s sweet logo. Good job, Yotam.

Tone.js

Tone.js, an ongoing library project built and maintained by NYU’s Yotam Mann, integrates interactive music to the browser. The library is flush with documentation on building flexible synthesizers, oscillators, and phasers. These constituent elements can be hooked up together in instrument components (React style…) and triggered by browser and mouse events for developer fun galore.

Before launching into the technical stuff, I want to mention the overwhelming landscape of resources for putting sound in the browser. From the Web Audio API to MIDI.js, there are other excellent open source libraries and projects that behavior similarly to Tone.js, but as an introduction to the concept, TJS provides excellent documentation on the exact usage of each component and variable. Which helps. Not to mention that building an oscillator without proper guidance is simply not fun. We’ll aim for fun.

The TJS library is a standard npm download, easily found on their homepage, and the code base is very well formatted for work with React and other component based architectures. For instance, the code below is all the code needed to initialize a new synth object from the TJS library — API link here.


var synth = new Tone.Synth().toMaster()
//play a 'C' for one 8th note
synth.triggerAttackRelease('C4', '8n')

The triggerAttackRelease method is a combination of both triggerAttack and triggerRelease, giving us access to a compound behavior that sets a note and a duration. This method can be split and the attack and release can be supplied to buttons or DOM elements, like so:

var synth = new Tone.AMSynth().toMaster()startNote = (event) => {
synth.triggerAttack(event.target)
}
endNote = (event) => {
synth.triggerRelease()
}
//Mouse click starts the note
<Button onMouseDown={this.startNote}/>
//Mouse click ends the note
<Button onMouseUp={this.endNote}/>

TSJ excels as a browser companion because the library prioritizes speed, timing, and scheduling around user interaction — for example, the Tone.transport method allows events to be scheduled along a predictable and editable timeline. This timeline can be molded to play and trigger (and loop) sounds in more complex ways than traditionally available through user action.

Configuration is a key part of TJS — much like with traditional audio — there is a strong emphasis placed on setting tweaks and mixing tools. With access to parameters like tempo, modulation, frequency, etc., you can build unique synths with flexible settings.

var jakeSynth = new Tone.Synth({
oscillator : {
type : 'fmsquare',
modulationType : 'sawtooth',
modulationIndex : 3,
harmonicity: 3.4
},
envelope : {
attack : 0.001,
decay : 0.1,
sustain: 0.1,
release: 0.1
}
}).toMaster()
jakeSynth.triggerAttackRelease('B2', '8n')

If you want to learn and play around, I would definitely recommend looking through TJS’s API and examples pages:

https://tonejs.github.io/examples/

Tone.js API — clarity is king.

A final note on adding music to your browser — open source sound libraries are super helpful. O.S. sound libraries like Freesound.org are treasure troves of aural oddities, strange recordings of didgeridoos, and an infinite array of water noises (to be concise) that give access to free and strange sound files. They can be uploaded // downloaded without any legal ramifications and provide a fun, if not insane, basis for creating soundscapes on your webpage. Have fun!

Resources: