Tone.js Demos

[00:00:00]
>> So if you go back to the repository here, and just scroll down until you see the tone JS you can see the website for tone JS and the API documentation. So tone JS is a free library, it's open source and once it's sort of set up and installed.

[00:00:19]
Whether you install it with MPN and no GES or whether you just put it in a script tag which is what we are gonna to be doing. Once it's all set up, you have this global access to a variable called tone and that's the API for tone JS.

[00:00:35]
And you can use tone to create sounds. So for example, this here just creates a new synth and then function to destination. What that does, is very similar to what I was talking about with connecting wires and web audio. This connects the synth to the audio context destination.

[00:00:55]
So it's just a sort of handy function for us to not have to always type synth dot connect audio context dot destination. This is just a simpler function. And then once the synth is created, you can trigger an attack release so C4 that's the the note that you wanna play.

[00:01:15]
And that's depending on the frequency you can use different notes here like D or something else half A whatever. And then here is the length the duration of the note, and this is they have their own sort of syntax for this. It could be in seconds if you pass a number or in some sort of time unit, but you can also pass this note very variable sort of unit 4n or 8n.

[00:01:47]
Which is the let's say eighth of a note in terms of music timing and things like that. And when they say trigger attack release, the idea of attack is that you're turning the note on and the idea of release is that you're turning the node off. So this is both of those things the note gets turned on and then right away after some set duration, the node gets turned off.

[00:02:14]
Whereas when we talk about trigger attack, and trigger release separately, you might wanna just turn the note on. Leave it on for however long you want it to be on for, just producing sound and then at some point trigger that release. And that's what they're doing in this demo here where they start with a C4 note, and they trigger it immediately.

[00:02:37]
And then after some time duration like a second, they trigger the release. [SOUND] And so when we use tone synth it just starts by creating a sort of basic synthesiser for us. What we were hearing earlier, what I was showing you earlier in terms of that these demos this one here at the top.

[00:03:06]
This is like a synthesis using a sine wave. But there are different ways of of changing these scents and using different scents within the tone JS library to get different types of sounds. Maybe sounds this sounds more like a guitar or like a piano or more like an electronic sort of bass, or maybe more like a lead, different keys, things like that.

[00:03:28]
And that's really a matter of just started diving into their documentation, figuring out the different since they have and figuring out some of the different options which we're going to be doing a little bit of. Another reference point is just the API Doc's themselves just to make sure that you have that sort of open maybe in a new tab.

[00:03:46]
Because there's lots of new things all sort of being going through here. So if you go into the repo and if you've been following along with the repo this whole time you might need to just get pulled. Just to make sure that you are up to date in case there is anything that's changed in the last little bit.

[00:04:07]
And just you can see that there's some demos here specifically for tone JS, so these are the tone JS demos and the way that they work is that in the HTML document. I've added an additional script tag and it's using this script tag here. And I'm using an CDN called unpackage or unpkg and that's pulling tonejs directly from NPM.

[00:04:40]
And it's pulling it as this sort of built file that we can just then drop into a script tag just like this. And once we do this, then we can access tone JS and JavaScript. So I'm gonna just close these and I'm gonna just start with the little sine wave demo I was showing you earlier.

[00:05:01]
So I'm gonna pull this one up, [SOUND] and in this demo, you can see it's just a regular P5 setup function here to create our canvas. Maybe clear it with a black color, some background color. And then here we're using tone JS a little bit here. So the first thing we're doing is we're setting the volume because these pure synths are sometimes a little bit loud.

[00:05:31]
And it's just producing this like really loud signal. So I'm using a volume that's negative 15,you can change that if you want, lower, higher, whatever. And I'm just setting the master volume of tone to this variable there, and then I'm creating a synth and that looks like this.

[00:05:48]
And the options of a synth give us the ability to change the type of wave that is being produced. So the type of oscillator, so if we just check this again, we'll see that it's like a sine wave and that's kind of what we've been dealing with this whole time.

[00:06:03]
But there's different types of waves that we can use. So sine waves are the one that produced that kind of noise that we have been hearing when we're clicking that. It's this kind of constant high pitch whining noise, but we can also use different waves like square waves or triangle waves or sawtooth waves.

[00:06:21]
Or even others, that will sound a little bit different. So here's this square oscillator, [SOUND] the background is still looking like a sine wave and that's cuz I'm just drawing a very simple sort of sine wave. Just to visualize the the idea of it, so just ignore the background wave for now.

[00:06:44]
[SOUND] And square waves are really good if you're taking the low end of the square wave. And then adding some effects on top distortions or reverbs or echoes or things like that. Because you can start to create these really powerful sounding electronic leads for like a really like epic sounding electronic track.

[00:07:05]
[SOUND] [SOUND] Triangle sounds a little bit different [SOUND]. And they all just sound a little bit different in slightly different ways [SOUND] [SOUND] So sawtooth also sounds quite harsh almost like chiptune music. And one thing you'll notice with all these synthesizers that I've been exploring so far is that they all sound very very piercing.

[00:07:50]
They don't sound like these nice soft tones and the way we're gonna get those kind of tones is through effects. Through layering these different scents cuz you can build up a single synth that's layered from multiple different oscillators, different tunings and different parameters. And it starts to create this kind of softer sound that maybe is closer to a piano or maybe it's closer to a guitar pluck or even something that's like more electronic pads or something like that.

[00:08:20]
But just for the sake of example we're probably gonna stick with some simple since here. And later I'll show some resources on how to build up those much more complex and much richer sounds. If you're really interested in taking this a step further and going towards more like electronic music rather than just experimentation with the these API's.

[00:08:39]
And seeing what you can do, but if you really want to do performance, you're not gonna want to just use a straight up sine wave synth or anything like that. And so that the synth there and then the next aspect is disconnecting the synth to the master. This is very similar to what we're doing with Web Audio, the pure Web Audio where we just connect one node to another.

[00:09:00]
Except in this case, Tone.Master represents the audio context destination. And then if we scroll down, there's only one other thing that's audio related here, the rest is just drawing some sort of graphics of some kind. And the audio related thing here is figuring out a frequency, which is in hertz here.

[00:09:24]
Some frequency between let's say 75 and 2500 hertz. And then changing the note of the synth so changing the synth frequency output to whatever it is based on the mouse position. And that's what's allowing us to change the pitch or change the frequency of that note and of that synth.

[00:09:47]
So that's the basic demo there. [SOUND] The next demo here is also fairly simple, nothing too different than the last. The only thing now is that we're using the trigger attack release function that I mentioned briefly before. And we're taking a scale, this is just like a few notes from the here j Joshi scale and C and we're using these notes directly in the the most pressed function so that every time we push we're getting a different note.

[00:10:30]
We're also getting different octaves and the octaves represent how high or low pitch those notes are. Basically taking it as several notes up or several notes down in terms of frequency

[00:10:47]
[MUSIC]

[00:10:48]
And from this you can start to create these almost algorithmic and procedural soundtracks. So just to show an example of how kind of powerful this technique is, a while back I created a very small web game. And it was a 13 kilobyte game that was designed for a game competition called Gs 13 cake games.

[00:11:13]
Where all the game contents everything has to fit within 13 kilobytes after it's all minified and compressed. And so this whole game is using procedural graphics and it's using procedural audio with web Web Audio. And the technique is very similar so the idea of the game is that you're a kite flying around and hitting these little flowers.

[00:11:35]
And I'll play the audio in a second but the technique is very similar every time you hit one of these flowers, it's playing a different random note. And these random notes are within a sort of set scale. And then there's just some parameters on top of that depending on the Okta or depending on you know which is the scale you're working with.

[00:11:52]
And things like that to create these different ambient soundtracks

[00:11:56]
[MUSIC]

[00:12:12]
And it's quite relaxing just to hear these random notes

[00:12:15]
[MUSIC]

[00:12:22]
So that's Bellwoods. So that's just to show that even though it's a simple technique there's a lot that can be done with them.
>> Somebody in chat says similar to flower by that game, same company, so nice.
>> Thanks, yeah it's very inspired by flower and those kind of, I mean also journey and things like that very inspiring games really wonderful.