Tone.js includes synthesizers and audio effects that are commonly used with electronic music. The challenge is that the synths and effects don't come with any knobs to adjust the sounds. Instead all of the settings are either default settings for that synth, or custom edited settings stored in a json file. [See JSON doc for more about json]
Before we go further just a few words regarding the vocabulary of working with json files and javascript objects. The term Property is used to as a general term for 'category of data'. For instance, whereas an electric guitar player might 'turn it up to 11!', in computer programming-speak that is "set the volume property to the value of 11'. The json files for synths and effects will contain several key:value pairs where the keys are the property names and value contains the (usually) numeric setting for that property. So in JSON speak we have the following:
{
...
"volume": 11
}
This shows us that the property named 'volume' is set to a value of 11. Actually Tone.js doesn't normally go up to 11 (normal range 0.0 - 1.0) but hopefully you get the idea.
I mention this because included with the Tone.js project is a related code repository and a page for editing the synths, Tone.js/Presets. The preset page allows you to load in some preset synthesizer data via a json file and make edits to that sound. The page doesn't yet handle the several effects that are part of the system.
After some study of the preset page code, especially the listen.js javascript file, it was possible to extend that design to include the loading and editing of effects. And while we're extending the functionality, there's a few more things that are useful to add.
This tool will allow us to combine a synthesizer with some effects to create some unique sounds. Below are some of the interesting synths and effects that are already configured in Tone.js
The Envelope setting is important in determining the musical character of a sound. The basic envelope filter is given the acronym of ADSR, for Attack Decay Sustain Release.
To understand the envelope setting, let's listen to two different sounds from the preset collection.
Compare the envelope json for two different preset from the Tone.Synth() family:
...
"envelope": {
"attack": 2,
"decay": 1,
"sustain": 0.2,
"release": 2
}
...
"envelope": {
"attack": 0.001,
"decay": 1.6,
"sustain": 0,
"release": 1.6
}
The attack time of the DelicateWindPart is much longer than the SteelPan which creates a comparative softer sound for the DelicateWindPart. The extreme short attack time of the SteelPan is needed to imitate the sound of a mallet hitting a steel drum.
Notice that it doesn't matter what the duration of the notes of the SteelPan sound. They will all be 1.6 seconds. If the note's 'official' duration is long it will decay to a level of zero in 1.6 seconds anyway and if the duration is shorter it will take 1.6 second for the release. This is a ADSR pattern useful for percussion sounds, i.e. a short (A) attack time, setting the (D) decay and (R) release times to the same value and setting the (S) sustain level to 0. For this instrument we want some sustaining tone from the steel drum sound and 1.6 seconds is the setting here. Perhaps a snare drum sound would have a shorter time for decay and release where a tympani sound might have a longer time.
By contrast the envelope of the DelicateWindPart takes 2 seconds to reach it's loudest volume, then another second to decay to the sustain level of 0.2. Finally after the note ends it takes 2 seconds to drop from a level of 0.2 to a level of 0.
Now using the Synth/Effect tool let's do some experiments. By clicking the link the Synth/Effect tool should load in a new frame. Our experiments will involve moving back and forth between the different frames; The instruction are here and the editing is done on the Synth/Effect page. On the Synth/Effect page there is a looper in the upper right. You can click the Start button and select one of 5 choices from the menu if you want a continuously running sound for testing. Alternately you can press some keys on your computer keyboard to activate the sounds of the synth (a key map is shown at the bottom of the synth box).
Experiment 1 - SteelPan
Experiment 2 - SteelPan
That extremely short attack time (0.001 sec) is critical to making this sound like a Steel Drum.
Let's do a short experiment with the other properties of this synth. If you look at the top of the json data you'll see that the oscillator property is set to 'fatcustom'. And some other properties have the names of 'partials', 'spread' and 'count'. The setting of those properties and key to creating the steel drum timbre. It's isn't obvious what those properties are so we could use the documentation. There is a link to the documentation for the Synth but if you look there you won't find those properties. The three properties we want more information about are part of the FatOscillator documentation. Fortunately the link to the Synth docs gets us to all of the documentaion. After clicking the link, navigate the left side menu down to the "Source" category and chose "FatOscillator" (third choice). Once the FatOscillator doc is loaded scroll down to the 'MEMBERS' list. You'll see 'count' 'partials' and 'spread' among many other properties.
We can see that the count property sets the "The number of detuned oscillators".
The partials property is more complex. The documentation has this in regards to the partials property:
The partials of the carrier waveform. A partial represents the amplitude at a harmonic. The first harmonic is the fundamental frequency, the second is the octave and so on following the harmonic series. Setting this value will automatically set the type to 'custom'. The value is an empty array when the type is not 'custom'.
Ok, so that allows us customize the harmonic series (aka overtones series) of this sound. That gives us amazing potential in creating custom sounds. If you are interested in designing sounds, this is an important area in which to experiment.
Finally the spread property which works along with the count property. The docs say:
spread (cents) The detune spread between the oscillators. If 'count' is set to 3 oscillators and the 'spread' is set to 40, the three oscillators would be detuned like this: [-20, 0, 20] for a total detune spread of 40 cents.
Now we can interpret the json values for the SteelPan, The count is 3, meaning there are 3 oscillators and the spread is 40. It's exactly like the example in the documentation. We have three oscillators each tuned differently which helps create the 'clang' of the steel drum. It's time to change some property values and see what changes occur.
Experiment 3 - SteelPan
We're just scratching the surface of the editing that can be done. And we haven't even used the effects yet. Wow, and it's all built into the browser.