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 Float32Array
s 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();