FREELessons: 11Length: 57 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Polish

The successful transaction melody is playing, but it still sounds a little raw. In this lesson, I'll show you how to apply a little audio polish to improve the quality of our sound.

3.3 Polish

So there are a couple of techniques we can use to make our little motif sound a bit better. The first is something synthesizers do to beef up their sound, and that's use multiple oscillators instead of just the single one we're using here. So let's double up. We'll create another oscillator. And set its values to be the exact same as our original one. We'll also need to duplicate all of its connections, too. Well, not all the connections. We connect the second oscillator to our gain node, that's our volume, just like we did previously. But, because this gain node is already connected to our speakers, then we don't have to recreate the volume.connect context.destination again. This is a useful feature of the web audio API. We can connect as many nodes as we like to a single node. So we could have as many oscillators as we liked going through a single volume node. This is useful for something like a master volume. Similarly, we can chain the output of the volume node to as many other nodes as we like. We will, however, have to duplicate the start and stop times, as we want both our oscillators starting and stopping at the exact same time. Now, if we go over to our browser and hit the button, [SOUND] you'll notice that that doesn't really sound any different. And that's because the two oscillators are playing the exact same note at the exact same time. What we want to do is detune both the oscillators so they're both playing a slightly different note to each other. The trick here is that it's not out of tune enough that you'd notice. But enough that it causes a pleasing phasing effect. Let's try it. All we need to do is set the oscillator's detune parameter. Let's detune the first one down a little bit. So, we say osc.detune.value equals minus 10. The minus 10 here is measured in cents. Here it's the tenth of the difference between two adjacent musical notes. In other words, not very much. Let's detune the second oscillator in a different direction. Let's detune it outwards by the same amount. So we say oscto.detune.value equals 10. Sure. Let's hear how that sounds. [SOUND] Now that sounds much, much better. You can hear the nice phase effect, kind of softening your sound. You may notice however, that our sound kind of ends rather abruptly. You may even hear a click when the oscillator stops. To mitigate this, we can make our sound fade out towards the end. Again, making it a little softer and more pleasing. The web audio API provides a way of automating parameters on a node, such as frequency and gain. Let's set up our automation before we start those oscillators. Because we're fading the nodes out, we want to control the volume, which is controlled by the gain node we already created. First we say volume.gain.setValueAtTime. The first value we pass then here is the gain level. So we'll say 0.25. And the second parameter, is at what time do we want the gain value to be set at that level? So, let's say starts time plus duration minus 0.05. What we're seeing here is that we're now automating the gain parameter, programmatically controlling it over time. And specifically what we're seeing here is we're seeing, make sure the gain value is at 0.25, 0.05 seconds before the note stops. The reason we do this is so that when we start to feed out our volume, the browser knows what volume to feed out from. So to fade out we write volume.gain.linearRampToValueAtTime. We want the volume to ramp down to zero so that it completely fades out. And we want the volume to hit zero at the same time the oscillator stops. Which we know from before as the start time of the oscillator plus its duration. And that's it. So just to recap, we're setting the gain to be 0.25, just 0.05 seconds before the note stops playing. And over the course of that 0.05 seconds, we're ramping the volume down to zero. Let's hear how that sounds. [SOUND] Great. This sound is a great piece of audio feedback to the user as it confirms the purchase has been made successfully and it gives them that extra bit of positivity about their experience. Perfect.

Back to the top