Published
Edited
Nov 21, 2019
3 stars
bands = [31.25, 62.5, 125, 250, 500, 1000, 2000, 4000, 8000, 16000]
filters = bands.map((freq, i) => {
const f = context.createBiquadFilter();
f.Q.value = qValue;
f.frequency.value = freq;
f.gain.value = gains[i] !== undefined ? gains[i] : 0;
if (i === 0) {
f.type = 'lowshelf';
} else if (i === bands.length - 1) {
f.type = 'highshelf';
} else {
f.type = 'peaking';
}
f.connect(context.destination);
return f;
});
responses = {
const noctaves = 10;
const width = 500;
return filters.map((filter) => {
const freqHz = new Float32Array(width);
const magResponse = new Float32Array(width);
const phaseResponse = new Float32Array(width);
const nyquist = 0.5 * context.sampleRate;
for (let i = 0; i < width; i++) {
let f = i / width;
// convert to log frequency scale (octaves)
f = nyquist * Math.pow(2.0, noctaves * (f - 1.0));
freqHz[i] = f;
}
filter.getFrequencyResponse(freqHz, magResponse, phaseResponse);
return {
freqHz,
magResponse,
phaseResponse,
}
});
}
allMagResponse = {
const points = [];
const allMagResponse = new Float32Array(responses[0].magResponse.length);
for (let i = 0; i < allMagResponse.length; i++) {
allMagResponse[i] = 1;
}
for (let bandI = 0; bandI < responses.length; bandI++) {
for (let i = 0; i < responses[bandI].magResponse.length; i++) {
allMagResponse[i] *= responses[bandI].magResponse[i];
}
}
for (let i = 0; i < allMagResponse.length; i++) {
const dbResponse = 20.0 * Math.log(allMagResponse[i]) / Math.LN10;
points.push({ freq: responses[0].freqHz[i], db: dbResponse, band: 'combined' });
}
return points;
}
data = {
const points = [];
for (let bandI = 0; bandI < responses.length; bandI++) {
for (let i = 0; i < responses[bandI].magResponse.length; i++) {
const dbResponse = 20.0 * Math.log(responses[bandI].magResponse[i]) / Math.LN10;
points.push({ freq: responses[bandI].freqHz[i], db: dbResponse, band: bands[bandI] });
}
}
points.push(...allMagResponse);
return points;
}
import {vl} from '@vega/vega-lite-api'
import {slider} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
