Adding a Filter to your Sound with the Web Audio API

Filters! They’re awesome! The practical uses of filters can be seen everywhere from a nice pour over coffee from your favorite cafe to the spam filter in your email. Filters also have their place in the world of audio engineering.

“I have filters on internets” — Former President George W. Bush

In my last blog, we went over the basics of the Web Audio API. We explored how audioContext() is essential to creating a sound. Then we connected our context to an oscillator and then to the sounds destination (our speakers). Now that we know that we have a sound, we can start to experiment a little bit with how we shape that sound. We’re going to do that with, you guessed it, a filter!

Let’s recall where we left off. This chunk of code gives us a sound coming from our oscillator and from there it goes directly to our destination, or our speakers.

Note how our oscillator is directly connecting to our destination.

I’d like us to imagine a pour over coffee. Think of our filter as both the coffee and the paper coffee filter, and our sound as the hot water. When water gets put through, our filters give the sound more flavor and refinement. When the sound we created above gets passed to a filter, it does essentially the same thing.

To get started, we’re going to create a filter with this line of code:

let filter = context.createBiquadFilter()

Next, we want to change where our oscillator is connected to. This way, our sound goes from our context, to our oscillator, to our filter, finishing at our destination.

oscillator.connect(filter)
filter.connect(context.destination)

Now for the fun part. Once our filter is set up, we can then call it to change the shape of our sound. I would definitely check out the MDN documentation on all of the things you can do with filter. For today, we’re just going to use filter.type and filter.frequency.setTargetAtTime().

Let’s take a look at an example of both.

The MDN documentation goes over the different types of filters you can add to your sound. We’re going to use a lowpass filter for this one. This will limit the frequency of sound we let through to those under a certain threshold. That threshold is defined in the next line down.

setTargetAtTime() takes in 3 different arguments:

1. Target- This is a number representing the target frequency cutoff. This is the threshold I mentioned when describing our lowpass filter. In this example a lowpass filter would only pass through sounds below a frequency of 2000. See how it changes the sound in your browser!
2. startTime- This is when the sound will start. We set it to current time so it starts immediately.
3. timeConstant- This is an exponential number that represents how quickly it will take to reach the frequency detailed in target. Try putting 0 then 9 in for this and see if you can hear how the sound becomes more punchy. From a musicians standpoint, this feels a lot like the attack of the note.

mmmmm filtered sound

I hope you like this little example of how you can shape the sounds you produce with your browser. Now that we’ve started shaping our sounds, things are definitely going to get a bit more interesting from here on out. Keep a lookout for my next blog on the Web Audio API!