GainNode

[00:00:00]
>> So far in our demos I've shown the basics of going from an mp3 file to a speaker. But now we wanna do something where we go from an mp3 file to another node and then from that node on to the speaker. In this little image here, it's a delay note it's like an effect an audio effect of some kind but we're gonna just start with something even simpler which is just a gain node.

[00:00:19]
Gain is like volume you can think of it as volume of a signal and how powerful the signal is and that will allow us to adjust the volume of the mp3 file very easily with just a single node in between. So that's this third demo here and our page and depending on the most interaction

[00:00:48]
[MUSIC]

[00:00:51]
We can change the volume. So just open that one up. So this demo here that we have is pretty much the same as some of our other demos. There's one thing that's different here and I'm just gonna recode it here. Just to give us a sense of how it all works.

[00:01:11]
So, imagine we have very similar to the first mp3 demo, we create an audio tag, we set the source. One other thing I've added here in this case is a cross origin setting. You don't really need to worry about this if you're using local development but if you're working on glitch, you might need to set this, just so that it works with the audio files.

[00:01:37]
And then we loop the audio, make sure it's looping and play it and feed that into our audio context, our web audio, API. But again, this isn't gonna play anything because we haven't got any code that's actually connecting it to the speaker. So the first thing we're gonna do is connect this to another node but we don't wanna just connect it directly to the speaker we want to first connect to that gain node.

[00:02:02]
So before, we have to create a new gain node it's gonna look like this. So audio contacts has all of these different functions called create something. So create media elements source, create gain, create buffer source, create analyzer and those are all just functions that allow you to create these little building blocks.

[00:02:27]
And so with this we're creating a gain node and by the way if you're lost at all with these functions inside the repository I have links to the API documentation. The Web Audio, API documentation is pretty complete. You can see all of these functions within the audio context and scroll down and find them and find details about them.

[00:02:52]
So that's just something to keep in mind, if you're doing this yourself and you're trying to figure out what the name of those functions are. All right, so we've got our media elements source node, and we've got a gain node for volume adjustment. And now we're gonna connect the source to the game.

[00:03:18]
So we're wiring up the source into the game node. And then we're gonna wire the gain to the destination the speaker so gain connect audio context dot destination, I've named it differently so I call it gain node. And I should just rename this as well, there we go.

[00:03:45]
I've got a variable up here called gain node, that's what it should be called. And so that is gonna allow us to play the audio through the gain node. And then there's one other thing that I'm doing in this demo, if you scroll down to the draw function.

[00:04:02]
First we have to check if the audio context exists, which means we've already set up our audio so it's running, it's playing. And then I have something here that determines the volume level between the left of the screen and the right of the screen and this volume level is a value that I'm going to get between 0 and 1.

[00:04:26]
So, I'm using this sort of math equation here I guess, you take the absolute distance from the mouse of the mouse position, to the center of the screen and divide that by half of the width. That's kind of what I'm doing there but. Basically, what you end up with is a value that's gonna go somewhere between 0 and 1.

[00:04:49]
So I can just set it to 0.5 just to show you. And this next line here is going to use that value that goes between 0.5 and 0.1 and I'm putting that into this function here. So gain node has a property on it called gain. It's kind of annoying that you're always gonna end up writing gain.

[00:05:16]
But the idea of the Web Audio API is that all of these nodes, they have parameters and so let's say we go into the gain node, and we scroll down. You'll see it has a property called gain, and it's defined as an audio param. The audio param, is a building block of anything that can be adjustable.

[00:05:44]
And so in this case, it's to do with the volume, but sometimes it's to do with some other feature like frequency or something like that. And we can go in there and it has its own functions, we can simply set the value like this. So this is how you might change the volume just by doing gain node dot gain dot value is equal to the volume.

[00:06:05]
But if you were to do that let's see. If you were to do that in an interactive way where it's changing every single frame, 60 frames per second, you end up with some popping and clicking noises. And it's hard to hear on this computer but if you're listening to headphones and you're playing your web audio application.

[00:06:33]
And you're doing this you're gonna hear a little clicks and pops and the reason is because the waves that are being created by this audio context suddenly you're changing the amplitude. And so one of the waves is a little bit smaller than the other wave. And they don't exactly line up.

[00:06:54]
And there's gonna be this disconnect. And whenever there's one of those disconnects, it's gonna create a pop or a sort of clicking noise. And so in order to avoid that, we have to basically always adjust values in a gradual way. We can't just adjust the value with a hard stop because it'll produce a click.

[00:07:14]
So what we're doing, is we're using this function called set target at time and then passing in the new volume we want. We pass in the current time of the audio context and then we pass in some small time constant which can just for sake of example. And for most cases I think you can just put it at 0.01.

[00:07:36]
And what this is gonna do is it's going to schedule a change, a gradual shift from the current time to basically the next microsecond or whatever. So that it gradually shifts from one value to the other instead of just an immediate change. And one thing to note is that we're using audio context dot current time.

[00:08:00]
You'll see that quite a bit in the audio contexts and with the web audio API, we don't just use date dot. Now we don't just use the browser time or anything like that. Because the Web Audio API has its own scheduling system, it has its own timers and the time resolution is a little bit different than the browser timing.

[00:08:21]
And so you don't really try and mix the two timings, the current time of the audio context might not match exactly what you would expect in real life sort of timing. Because it has its own scheduling so you just use that instead of using date dot now or anything like that.

[00:08:37]
And what that will do It'll just gradually change the volume but it'll be gradual but it'll still be fast enough that it'll feel immediate. [SOUND]. And that last, these last two lines here simply draws the rectangle and scales it wide or small depending on the mouse position and depending on that volume, so that's the gain node.

[00:09:04]
Now the next couple demos are a little bit more into the visualization of things