Web Audio API Filter Example

The Web Audio API is a powerful tool that allows developers to create and manipulate sound within a web browser. The API provides a variety of nodes, which can be connected together to create complex audio processing graphs. One of the most commonly used nodes is the BiquadFilterNode, which allows users to filter audio signals based on a variety of parameters.

In this Web Audio API example JavaScript tutorial, we will demonstrates an example of using the Web Audio API to create a high-pass filter using the BiquadFilterNode. We will also explore how to use a slider to dynamically adjust the cutoff frequency of the high pass filter. You can similarly use other filters like low pass filter, band pass filter, notch filter etc that are supported by the BiquadFilterNode.

BiquadFilterNode

Herw we will use the BiquadFilterNode which is a built-in node in the Web Audio API that represents a second-order infinite impulse response (IIR) filter. It can be used to implement various types of filters, such as low-pass, high-pass, band-pass, and notch filters, by setting different values for its type, Q, and frequency properties. The BiquadFilterNode operates on the audio signal passing through it and produces a filtered output, allowing for advanced audio processing and manipulation in web applications.

First we provide the complete code for the JavaScript and the HTML and then explain the code.

HTML Code:

 <div>
     <input onclick="powerBtn()" type="button" value="On/Off" id="powerBtn" /><br/>
     <label>HPF Cutoff Frequency: <span id="HPFValue">440</span>  Hz</label><br/>
     <input id="HPFfreqSlider" type="range" min="110" max="1760" step="1" value="440">    
 </div>

Filter JavaScript Program Code:

  let ctx, osc, amplifier, analyser, dataArray, isPlaying;

  ctx = new AudioContext();
  osc = new OscillatorNode(ctx,{type:'sine',frequency:340,});
  amplifier = new GainNode(ctx,{gain:0.2});
  analyser = new AnalyserNode(ctx,{
    fftSize:2048,
    smoothingTimeConstant:1
  });
  filter = new BiquadFilterNode(ctx,{type:'highpass',Q:0.5});
  osc.connect(amplifier);
  amplifier.connect(filter);
  filter.connect(analyser);      
  analyser.connect(ctx.destination);



  HPFfreqSlider = document.getElementById('HPFfreqSlider');

  function powerBtn() {
      if(isPlaying){
        osc.stop();
        isPlaying = false;
      }
      else{
      
        osc.start();
        //draw();
        isPlaying = true;
      }    
    } 

 
  HPFfreqSlider.addEventListener('input',(event)=>{
    let HPF_fc = event.target.value;
    document.getElementById('HPFValue').innerHTML = HPF_fc;
    if(osc && isPlaying){
      filter.frequency.value = HPF_fc;
    }

  })
 

Setting Up the Audio Context

Before we begin creating our filter, we need to set up the audio context. The audio context is the foundation of the Web Audio API, and it is responsible for creating and connecting all of the different nodes. We can create a new audio context using the following code:

  let ctx, osc, amplifier, analyser, dataArray, isPlaying;

  ctx = new AudioContext();

Here, we create a new AudioContext object and assign it to the variable ctx. We also define some other variables that we will be using later in the code.

Creating an Oscillator and Amplifier

Next, we need to create an Web Audio API Oscillator and an Web Audio API Gain Node(amplifier). The oscillator is responsible for generating an audio signal, while the amplifier controls the volume of the signal. We can create these nodes using the following code:

  osc = new OscillatorNode(ctx,{type:'sine',frequency:340,});
  amplifier = new GainNode(ctx,{gain:0.2});

Here, we create a new OscillatorNode object and set its type to "sine" and its frequency to 340 Hz. We also create a new GainNode object and set its gain to 0.2. We will connect these nodes together later in the code.

Creating a Filter

Now that we have our oscillator and amplifier, we can create a filter. We will be creating a high-pass filter, which allows high-frequency signals to pass through while blocking low-frequency signals. We can create the filter using the following javascript code:

  filter = new BiquadFilterNode(ctx,{type:'highpass',Q:0.5});

Here, we create a new BiquadFilterNode object and set its type to "highpass" and its Q factor to 0.5. We will also connect this node to the rest of the audio graph later in the code.

Connecting the Nodes

Now that we have all of our nodes, we need to connect them together to create the audio processing graph. We can connect the nodes using the following code:

  osc.connect(amplifier);
  amplifier.connect(filter);   
  filter.connect(ctx.destination);

Here, we connect the oscillator to the amplifier, the amplifier to the filter, the filter node to the destination node (which is typically the speakers or headphones).

Creating a Slider to Adjust the Cutoff Frequency

Now that we have our audio processing graph set up, we can create a slider to adjust the cutoff frequency of the filter. We can create the slider using the following code:

  HPFfreqSlider = document.getElementById('HPFfreqSlider');
 
  HPFfreqSlider.addEventListener('input',(event)=>{
    let HPF_fc = event.target.value;
    document.getElementById('HPFValue').innerHTML = HPF_fc;
    if(osc && isPlaying){
      filter.frequency.value = HPF_fc;
    }
  })

This part of the javascript program code deals with the high-pass filter frequency slider. When the slider's value changes (i.e. the user moves the slider), an input event is fired, which triggers the addEventListener function that listens for the event. Inside the event listener function, the value of the slider is retrieved using event.target.value and stored in the HPF_fc variable. This value is then displayed in the HTML element with the HPFValue ID using document.getElementById('HPFValue').innerHTML = HPF_fc;.

Power Button

The turn on and off the audio we have a power button in the HTML code. The functionality of this power button javascript code is below.

  function powerBtn() {
      if(isPlaying){
        osc.stop();
        isPlaying = false;
      }
      else{
      
        osc.start();
        //draw();
        isPlaying = true;
      }    
    } 

Next, let's take a look at the powerBtn function. This JavaScript function is responsible for starting and stopping the oscillator, depending on whether it is already playing or not. It first checks the isPlaying variable - if it's true, that means the oscillator is currently playing, so it stops it and sets isPlaying to false. If it's false, that means the oscillator is not currently playing, so it starts it and sets isPlaying to true.

Live FilterDemonstration

Use the following to examine the high pass filter build with Web Audio API.

HPF Cutoff Frequency: 440 Hz

Web Audio API Filter Example

Post a Comment