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.


Transcript from the "Sequencer Demo" Lesson

>> 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 visualizing audio. But this last one here, it's kind of fun as well, the sequencer demo.


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 kinda interesting is the idea of a polysynth.

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 exploring earlier. But this way you actually have multiple synths that are overlapping in slightly different envelopes for each of them, maybe even different oscillators and so on.

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.

So that you don't have to use timers like set timeout or request animation frame because those are not very accurate with Web Audio. And so instead, you wanna use something like Tone.js which has its own timers that are specific for Web Audio and they are in sync with Web Audio.

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 kind of controls and mechanisms that happen where something repeats, let's say, or something happens over the course of some track or something.

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 on every 8 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.

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. It could even just be an MP3 file or something, and you can trigger that at the exact time that this repeat has to happen.

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.

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, 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 chaotic. 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. And then here, when the mouse is actually pressed, this is where we start the transport here.

We also use another feature of Tone.js called sequence. And we're just using this to try and basically create the actual sequence of notes that is happening through this system. So this demo is 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 wanna 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.

And if you really want to 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.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now