Web Audio API: The Delay Node

[00:00] This time, let's look at the DelayNode. As you might expect, this adds a delay into a sound source before ending it to an output, much like when we inserted a GainNode between one output and another input to control the volume. The DelayNode gets an input, and then holds it for a specified period of time before sending it to it's output.

[00:21] We'll start with a basic setup that simply loads an mp3, decodes it into an audio buffer, which then gets played back through the AudioBufferSourceNode, just like we did in the last lesson. The sample mp3 here is just a sample of my own voice from that last lesson. To give you a reference for what this sounds like, I'll play a couple seconds here.

[00:42] In addition to synthesizing sounds from scratch, you can load existing audio files in and play them with the Web Audio API.

[00:50] OK, that was the sample mp3. Now, let's create the DelayNode. This is done with context.createDelay. The amount of time that the audio will be delayed is an audio param called delayTime. So, like other audio params, we need to set that property's value property, saying Delay.delayTime.value = 1. This will give the audio a one second delay.

[01:18] Then, instead of connecting the buffer source directly to context.destination, we'll connect it to the DelayNode. Finally, we'll connect the DelayNode to context.destination. So, we've just inserted this DelayNode between the buffer source and the speakers. Let's see what this does.

[01:39] In addition to synthesizing sounds from scratch, you can load existing audio files in and play them with the Web Audio API.

[01:47] Well, beyond taking an extra second to start, it sounds exactly the same, and that's exactly what you should expect. A delay doesn't alter the sound at all. It just holds on to it for a brief period, before letting it through otherwise untouched.

[02:03] Now, what you probably wanted to do is create some kind of echo effect. And in a sense, we did create the echo, but we lost the original sound in the process. What would make it sound like an echo is to hear the original sound and the delayed sound.

[02:18] So, we need to do something like this. Here, the audio source node is connected to the output and DelayNode. This tells you something important, that you can connect the output of one node to the inputs of multiple other nodes. It's not a one to one relationship.

[02:34] Then, notice that both the source node and the DelayNode are both connected to the context.destination. This gives you the second important takeaway for today, that an input can accept multiple outputs. Now the destination node is getting the original signal from the buffer source and the delayed signal from the DelayNode.

[02:56] This should give us an echo. Let's try it. Back in the code, I'll reattach the buffer source node directly to the destination. Simple. Now, let's see if we can get an echo.

[03:07] In addition to synthesizing sounds from scratch, you can load existing audio files in and play them with the Web Audio API.

[03:16] You should have been able to hear my voice, then a second later hear it starting again. Classic echo. Now, if we tighten up that delay to say 005 seconds and give that a listen...

[03:30] In addition to synthesizing sounds from scratch, you can load existing audio files in and play them with the Web Audio API.

[03:38] Now rather than hearing two discrete voices, it just sounds like I'm in a cave.

[03:44] That's about it for the DelayNode. Try different audio sources and different delay times to see what kind of effects you can create with it.