Web Audio

[00:00:00]
>> Maybe we want a complete multimedia experience. So what else do we need for our new neo-web-dev experience and that's audio. So, I've done a lot with procedurally generated audio in JavaScript. I think it's even better if you can do it on the GPU, but I haven't quite got a good stack going for that yet.

[00:00:23]
In the meantime, we'll have to settle for this. So, if you install this package called webaudio, It binds the webaudio API and nodes so that you can sort of do this DSP style programming. So here's the whole thing. It's just a small wrapper around the window.audio context API.

[00:00:48]
Okay, so how this looks, you make a file song.js. In the browser you can do require webaudio and in node, you can do require baudio. But you have to have socks installed on the command line. I'm not gonna get into it, we'll stick to the browser for now.

[00:01:05]
So, You give baudio a function. It's gonna get a t, which is a variable time. The time is in seconds, which is important. This function is going to get called about 44 to 48,000 times per second depending on what your soundcard sample rate is. And so you can return a waveform.

[00:01:29]
For example, if we want just a sine wave that's gonna work at 440 hertz, which is middle A, you can do 2 times math.PI times 440 times t. And you can call b.play. You can budo that file and you can load it up in the browser [SOUND] and you get a sine wave.

[00:01:52]
If we wanna do other stuff, we can. I've got a web page that pretty much just wraps this in a text area and a few other things. So you can go to this website studio.substack.net, fantastic. I hear some other people getting it working. Don't stop, it's great. [SOUND] So this website also, if you wrote it, it's gonna do that.

[00:02:12]
[SOUND] You can click on recent to see what other people have done but probably wait a little bit. The one file that I like to load is this file called slash waves underscore. Because I've baked in all of these triangle sawtooth square waves and a little clamp function Also, you don't have to pass in two pi times the frequency times t, you can just do.

[00:02:36]
[MUSIC]

[00:02:44]
So, so more things to do, we can do sine of the sine of that and sine of one times point one. [SOUND] Or maybe we want [SOUND]. So we can make a kind of a cool bass sound by just composing a bunch of these different waveforms. [SOUND] Like that, that's pretty fun.

[00:03:25]
If we want to slice up that waveform now, you can do something like multiply by [SOUND] sawtooth wave. [SOUND] To make a little bit of like, [SOUND] if you wanna adjust the duty cycle you can use power. So here we have that function to the fourth. [SOUND] So the higher the exponent, the less time it takes on the beat.

[00:03:50]
[SOUND] You can also mix up a couple of different waveforms. So, if i subtract in a sawtooth of four. [SOUND] Sort of have a little bit of a beat. [SOUND] Yeah, it does that-
>> The sign in the power, so it changes the power and all.
>> Sine in the power like this.

[00:04:20]
>> It looks like I think at a 12.
>> I see. Right, so, yeah, I guess you could do that. [SOUND] That's good.
>> [LAUGH] [SOUND]
>> All right. [SOUND] So we've got sweet little bass beat going, see if I can make that a little bit louder by doing that.

[00:04:47]
[SOUND] Cool, so then, maybe we'll add in a couple of other pieces here and then just slap this into our existing WebGL demo, [SOUND] so. [SOUND] Take a few other wave forms. Fiddle around a little bit, maybe like a sawtooth wave two times point five plus point.

[00:05:13]
[MUSIC]

[00:05:27]
You can also if you wanna make a melody just have an array for that.

[00:05:30]
[MUSIC]

[00:05:37]
And then, Math.floor of the time which is in seconds, modulo the array length and you step over each of those frequencies in the array.

[00:05:45]
[MUSIC]

[00:05:50]
Make it faster.

[00:05:51]
[MUSIC]

[00:05:58]
Can I add some enveloping now on that, so like one minus sawtooth of four times point five of four.

[00:06:07]
[MUSIC]

[00:06:16]
>> You should quite your day job and become a DJ. [LAUGH]
>> What day job? [LAUGH]

[00:06:21]
[MUSIC]

[00:06:30]
I have played shows before so.

[00:06:31]
[MUSIC]

[00:06:35]
You can also use the clamp function down there to sort of boost the volume of some of these effects that are a bit quieter. Which just turns them more into a square wave so but it's not gonna clip.

[00:06:45]
[MUSIC]

[00:06:55]
All right, that's pretty good enough. So I'll just copy paste that and you click on it to pause it. And let's stuff that into our- so I'm just gonna save that real quick. So instead of return, just do module.exports and should be good to go. So now in our main file, So we'll require webaudio.

[00:07:31]
So we'll do webaudio.file I think will work because it's a module that export the function of t. Yeah, I think that ought to work. And then b.play and then see what it does. I don't know. So, get it do budo on this file, [SOUND]. Budo main.js, glslify.

[00:08:05]
[MUSIC]

[00:08:07]
There we go.

[00:08:07]
[MUSIC]

[00:08:10]
So we've got an interactive experience on the web.

[00:08:13]
[MUSIC]