Check out a free preview of the full Web Audio Synthesis & Visualization course:
The "Sequencer Demo" Lesson is part of the full, Web Audio Synthesis & Visualization course featured in this preview video. Here's what you'd learn in this lesson:

Matt discusses creating a sequencer using PolySynth to create a richer sound with multiple oscillators, Transport for timing events, and a randomizeSequencer function to randomize the played notes. A walkthrough of the code used to create the sequencer is also provided in this segment.

Get Unlimited Access Now

Transcript from the "Sequencer Demo" Lesson

[00:00:00]
>> So, there's a few more demos here, as I was saying, some of them are like mp3 related which you won't really get into and even using your microphone or visualising audio. But this last one here is kind of fun as well, the sequencer demo.

[00:00:15] [MUSIC]

[00:00:21] And if we go into this sequencer demo you'll see it's quite a bulky demo. So it's a little bit more than I'll go through entirely. But there's just a few things that you might want to pick out of here and maybe use in your own sense. One of the things that's kind of interesting is the idea of a polysynth.

[00:00:44] So in tone JS you can layer up a synth that has multiple oscillators and it ends up sounding a little bit richer kind of like what I was explaining earlier. But this way you actually have multiple scents that are overlapping in slightly different envelopes for each of them maybe even different oscillators and so on.

[00:01:07] And so that's what you can use to create some of the more richer sounds that you're hearing in this demo Another thing that is starting to be explored in this demo, but it's a very big topic within tone.js, but you can use tones transport and sequencing functions. That allows you to do things like automatically scheduling notes in a way that is corresponding with the beats per minute of the track.

[00:01:36] So that you you don't have to use timers like set timeout or requestAnimationFrame. Because those are not very accurate with Web Audio. And so instead you want to use something like tone js which has its own timers that are specific for Web Audio and they are in sync with Web Audio.

[00:01:53] And they just give you some sort of access for that so this tone transport is one way to start to do these kinds of timings. And these kinds of controls and mechanisms that happen where something repeats let's say or something happens over the course of some track or something.

[00:02:11] So if we just go into transport, You can see here they have an example where you repeat some event on a single sort of eighth note on every eighth note. You first set up your tone.transport, you schedule a repeat, you pass in the function which is going to give you back a time.

[00:02:37] And this is a time in the audio context not in real browser time. And then from there you can use a synth or you can use an oscillator you can use some sort of output device, you could even just be an mp3 file or something. And you can trigger that at the exact time that this repeat has to happen.

[00:02:58] And then once you set up your repeats, you have to actually start the transport to start the timing mechanisms. So here what we're doing is every 2m which should be something to do with the bars. Every 2m we repeat this function here which is the randomizer sequence function.

[00:03:21] And the idea is that when that happens, we do some shuffling, and we do some sort of procedural. Try and create a sequence that has a bit of randomness to it, but also doesn't have too many predictable sounds. So I've just created a sort of structure here that works well enough for this demo.

[00:03:41] But for something like Bellwoods where I was really trying to create like procedural music that sounded nice. It took a little bit of time to find some rules and some parameters that allowed me to create these random sequences of notes. That didn't sound too repetitive, didn't sound too qiotic.

[00:03:59] And a lot of that here is just trying to see if there's anything that's two consecutive notes then maybe fixing that in this set of code here. And instead of just using pure randomness which is a uniform random distribution you can use something like Gaussian random distribution. To just get some more interesting sort of variation in the way the notes are being placed and things like that.

[00:04:23] And then here when the mouse is actually pressed, this is where we start the transport here. And we also use another feature of Tone JS called Sequence And we're just using this to try and basically create these the actual sequence of notes that is happening through this system.

[00:04:56] So this, demo was a little bit more complex. It's got a lot more to it. It even has to get into something else called tone.draw. I don't want to dive into all these things because it is a bit of a can of worms. And I think it's better to just start with the basics of just starting with using the synth using the filters and just trying to create sort of basic effects from that.

[00:05:24] And if you really wanna get into creating your own like MIDI player or something like that. That's where you can start to dive into some of these time based and transport based functions of tone, which are really powerful. But also just a lot more complex in terms of understanding how it all comes together.

[00:05:40] So just to come back to this filter effect. Right now I'm using this filter effect to filter out certain frequencies. And so we can use what's called a low pass filter. And what that's gonna do is only pass through filter frequencies that go below the threshold that we're going to set.

[00:06:01] So to show how that's gonna work first we make sure that that filter is connected to this graft connected to the system. So in this case, now we have it so that the synth connects with the effects, which is then connected to the reverb. And the reverb is finally connected to the filter.

[00:06:19] So, the filter here is the last step before hitting the speaker, the master output. And then we scroll down and we see where filter is being adjusted. Here we're adjusting the frequency of the filter and we're adjusting it between some minimum and maximum range based on the most x position.

[00:06:41] When this most x position is at the left, it's going to use the filterMin. When it's at the right of the screen, it's gonna use filterMax. And any most position in between there is just gonna blend those two filter frequencies. Just to show you, going up here the filter min is 100 hertz and the filter Max is 5000 hertz.

[00:07:05] And so now when we play these effects and these sounds and we slide our mouse. When we play these effects and when we play these sounds and when we slide our mouse to the left, it's gonna start to filter out some of the sound.

[00:07:20] [MUSIC]

[00:07:28] And what's happening is that we're cutting off a lot of frequencies, we're only allowing the low frequencies to pass through.

[00:07:36] [MUSIC]

[00:07:38] We're saying that only frequencies that are lower than let's say whatever this would be 100 hertz or 200 hertz. Those are the only things coming through and then as it opens up, it's getting into the 1000 range Hertz. We start to hear higher and higher frequencies.

[00:07:54] [MUSIC]

[00:07:57] And you can create some really nice effects with that kind of a filter node. You can also try using other things like high pass which is the opposite it only passes through frequencies that are above the threshold.

[00:08:11] [MUSIC]

[00:08:23] Or some of the ones that we explored earlier in the course like the bandpass, and this is just gonna pass through only the feet the frequencies that are in the band that we're specifying. And maybe some sort of left and right frequencies around it.

[00:08:39] [MUSIC]

[00:08:43] And what that means here is that we're really only dedicating the signal to near the frequency we specify. Which might be let's say 200 hertz and the only signals that are coming through are kind of close to that frequency band. But low passes is quite a nice one for these kinds of effects.

[00:09:08] And the other thing we're doing on the y position, this is when the mouse is going up and down on the y position, we're changing the wet value of our effect node. So the wet value remember, the higher the wet value, the more we're using that effect in the lower, the effect, the wet value, the less we're going to hear, and that affects your as feedback delay.

[00:09:30] So, if we use fully wet, then all we're gonna hear is the feedback. If it's fully dry or there's no wetness all we're gonna hear is the synth itself. So, up here, there's no feedback, down here there's a lot of feedback. And we can start to create some really interesting Soundscapes just by modulating and by using different parameters here.

[00:10:04] [MUSIC]

[00:10:16] So I'm just tapping in different places. But you can imagine some sort of algorithmic system that might be automatically triggering these notes, with different parameters to create these really rich and atmistrerio sounding outputs. So that's just a little bit about the filtering