Synth & Tone Generation

[00:00:00]
>> So moving on to the next part of this course, which is all about synthesising audio. And actually making audio just from code, without using any mp3 files, or WAV files, or any sort of source files, even like a microphone or anything. We're just gonna use code and math to try and produce some audio effects.

[00:00:19]
There's a couple demos I just want to show that are on the web. Some really kind of fun and quirky demos and projects. So a similar kind of technique to this blog opera site that I was showing earlier, is pink trombone. It's a very funny little kind of web toy [SOUND] [SOUND].

[00:00:46]
And you can just kind of play around with the synthesis. [SOUND] Pretty fun stuff. On another note is generative FM. So this is using sound synthesis Web Audio, but to try and create this kind of generative and calming and relaxing background music. Each of these is done with code and done with sort of algorithmic processes.

[00:01:17]
And so they're always very different. But they all have that kind of similar type of calming and relaxing sound. This one's a little bit less relaxing than usual but some of them have been very nice. And this will be using Web Audio to actually synthesize this in real time.

[00:01:49]
So a very basic example of synthesizing is just using a sine wave. We're just gonna start with this, just because it's like the most simple one and we kind of been looking at very similar graphs through the whole course. We've been talking about this graph of The wave that's going up and down at a constant rate and that's basically just a sine wave here.

[00:02:11]
A sine wave is the function this sine function you pass in a value which is the angle theta or theta, and it's in radians. And what you get is some value between positive one and negative one. And as you can see on the left, it's creating that graph that we now know of as a wave form and on the right, what it's doing here is it just taking a point around the circle and determining what the value of that should be.

[00:02:43]
To create this waveform, and so from that sine wave we can create sound. So a simple example here is inside of one of the demos which I'll show the page with all the demos in second. [SOUND] This tone dash example dash synth dash basic glitch.me. When you click and hold, It produces a constant sine wave sound, a tone, and that is just produced at a single frequency.

[00:03:18]
But when you change the most along the left and right axis, it will change the frequency of the tone that's being produced. [SOUND] [SOUND] And you can actually see in the background a sort of visualization of how that graph might look this is not a perfectly accurate graph so I've fudged the numbers a little bit so that you can get a sense.

[00:03:45]
This is a low frequency sound and it has a low frequency waveform, higher frequency sounds have those higher frequency waveforms. So if you go into the workshop, and we can go here. And this is the second sort of page of demos, tone dash demos. And you can go in here and see them all So, there's just like before, there's a bunch of different demos.

[00:04:19]
This is using what's called tone J S, which I'll get into in just a second. But you can see already that there's this one I was showing [SOUND]. And then a few others like this tapping sound [SOUND] And what it's doing is it's choosing a random note [SOUND] every time you tap to create a bit of a sorta fun little app here.

[00:04:45]
[MUSIC]

[00:04:48]
This is very similar and a little bit inspired by pat atone or pat of tap. So I'm calling it pat atone. Tone because it's using tone. And every time you click it chooses a different color. And it also plays a random note and it's using some effects like a sort of delay to create that kind of nice spatial sound.

[00:05:09]
[MUSIC]

[00:05:12]
As an example of using Effects, turning them up turning them down. This one is more like a sequencer. So like creating algorithmic music.

[00:05:24]
[MUSIC]

[00:05:27]
And the way that works is that it's just playing notes with a random sort of sequence of notes and then every time it finishes Sort of bar of notes, it will just choose a different sequence of random notes. And then there's a few other demos. Some of them are repeats of what we've done already with web audio.

[00:05:46]
So I'm not gonna really go into how to play an mp3 file with this Tone.js library because we've already done it with web audio. And this is more if you're starting to use Tone.js and you might wanna start to use their mp3 features. And even things like metering or waveform FFT that's also possible with tone JS.

[00:06:05]
I liked to show the pure web audio version of these kinds of ideas because. Quite often you don't really need to pull in an entire audio library just to do some simple visualizations. But if you are using this library tone JS already or if you're using a library like it, then it's good to know just how to use it in these different ways just in case you do wanna use some frequency spectrum analysis type of things.