The getFrequencyResponse() method of the BiquadFilterNode interface takes the current filtering algorithm's settings and calculates the frequency response for frequencies specified in a specified array of frequencies.
The two output arrays, magResponseOutput and phaseResponseOutput, must be created before calling this method; they must be the same size as the array of input frequency values (frequencyArray).
getFrequencyResponse(frequencyArray, magResponseOutput, phaseResponseOutput)
In the following example we are using a biquad filter on a media stream (for the full demo, see our stream-source-buffer demo live, or read the source.) As part of this demo, we get the frequency responses for this biquad filter, for five sample frequencies. We first create the Float32Arrays we need, one containing the input frequencies, and two to receive the output magnitude and phase values:
const myFrequencyArray = new Float32Array(5);
myFrequencyArray[0] = 1000;
myFrequencyArray[1] = 2000;
myFrequencyArray[2] = 3000;
myFrequencyArray[3] = 4000;
myFrequencyArray[4] = 5000;
const magResponseOutput = new Float32Array(5);
const phaseResponseOutput = new Float32Array(5);
Next we create a <ul> element in our HTML to contain our results, and grab a reference to it in our JavaScript:
<p>Biquad filter frequency response for:</p>
<ul class="freq-response-output"></ul>
const freqResponseOutput = document.querySelector(".freq-response-output");
Finally, after creating our biquad filter, we use getFrequencyResponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page:
const biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = "lowshelf";
biquadFilter.frequency.value = 1000;
biquadFilter.gain.value = range.value;
function calcFrequencyResponse() {
biquadFilter.getFrequencyResponse(
myFrequencyArray,
magResponseOutput,
phaseResponseOutput,
);
for (let i = 0; i <= myFrequencyArray.length - 1; i++) {
const listItem = document.createElement("li");
listItem.innerHTML = `<strong>${myFrequencyArray[i]}Hz</strong>: Magnitude ${magResponseOutput[i]}, Phase ${phaseResponseOutput[i]} radians.`;
freqResponseOutput.appendChild(listItem);
}
}
calcFrequencyResponse();