Embed
The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page. Set the controls and the two lines update; the preview beneath shows what your readers get.
<script src="https://learn.mimmsy.com/learn-widget.js"></script>
<learn-widget name="dft-filter-melody"></learn-widget> It is CC-BY-4.0: keep the credit line the frame shows.
Preview
Fork
A fork is a copy whose manifest names its parent and the parent's version; lineage is kept forever, and the copy is yours to change. The library is its own repository: clone it, copy dft-filter-melody/ to a new name (one DNS label), set forkedFrom to { "name": "dft-filter-melody", "version": 1 }, change what you want, run npm run check, and open a pull request. Passing the check is the whole gate. Without a checkout, submit the same files to POST /api/widgets and it is served instantly as an unreviewed draft.
Source
The whole widget is these files; the repository has their history.
widget.json
{
"name": "dft-filter-melody",
"title": "Frequency-domain filter",
"version": 1,
"claim": "Multiplying each DFT bin by a gain H[k] and inverse-transforming edits the waveform exactly, so zeroing the bins past a cutoff removes an added 5.2 kHz tone and, past the melody’s harmonics, dulls its timbre.",
"summary": "Drag the cutoff while a looping melody with an added 5.2 kHz tone plays through cascaded low-pass sections; the chart runs the forward DFT, zeroes the shaded bins and inverts back to the bright filtered waveform. Switch to high-pass to remove the low bins instead, or bypass to compare.",
"topics": [
"signals/filtering",
"signals/fourier"
],
"aliases": [
"filter",
"low-pass",
"high-pass",
"inverse DFT",
"equalizer",
"cutoff"
],
"params": {
"cutoff": {
"type": "integer",
"default": 30,
"min": 2,
"max": 64,
"label": "cutoff bin (× 100 Hz in the audio)"
},
"mode": {
"type": "string",
"default": "lowpass",
"enum": [
"lowpass",
"highpass"
],
"label": "filter type"
}
},
"check": [
{
"q": "To remove a 5.2 kHz whine from a recording with the DFT, you would…",
"options": [
"delete the samples that contain the whine",
"shift all bins down by 5.2 kHz",
"lower every bin by the same amount",
"transform, zero the bins near 5.2 kHz, then inverse-transform"
],
"answer": 3,
"why": "Filtering in the frequency domain is forward → edit → inverse, Y[k] = H[k]·X[k] with H[k] = 0 at the offending bins; the whine is present in every sample, so deleting samples cannot isolate it."
},
{
"q": "In the frequency domain, filtering a signal is…",
"options": [
"shifting every bin to a higher frequency",
"multiplying each bin by a gain: keep, scale, or zero",
"reordering the bins by magnitude",
"discarding every second bin"
],
"answer": 1,
"why": "Y[k] = H[k]·X[k]: an equalizer is a smoothly varying H[k], and the ideal low-pass is H = 1 below the cutoff and 0 above."
},
{
"q": "A high-pass filter would be the right tool for removing…",
"options": [
"an echo",
"loudness overall",
"a mosquito whine",
"a low rumble from an air conditioner"
],
"answer": 3,
"why": "A high-pass filter keeps content above its cutoff and removes content below it, the reverse of the low-pass filter."
}
],
"capabilities": [],
"height": 448,
"requires": [],
"forkedFrom": null,
"authors": []
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frequency-domain filter</title>
<style>
:root {
color-scheme: light dark;
--bg: #f7f3ea;
--bg-card: #efe9da;
--border: #d8cfba;
--text: #211d14;
--text-dim: #6e6553;
--accent: #31597f;
--accent2: #b04e1b;
--hot: #a82433;
--ok: #3d6b4f;
--ink-rgb: 33, 29, 20;
--paper-rgb: 247, 243, 234;
--accent-rgb: 49, 89, 127;
--accent2-rgb: 176, 78, 27;
--hot-rgb: 168, 36, 51;
--ok-rgb: 61, 107, 79;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #161410;
--bg-card: #1e1b15;
--border: #383225;
--text: #e9e3d3;
--text-dim: #9c917c;
--accent: #8fb8e0;
--accent2: #dd9355;
--hot: #df7a88;
--ok: #82bd97;
--ink-rgb: 233, 227, 211;
--paper-rgb: 22, 20, 16;
--accent-rgb: 143, 184, 224;
--accent2-rgb: 221, 147, 85;
--hot-rgb: 223, 122, 136;
--ok-rgb: 130, 189, 151;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); font-size: 15px; line-height: 1.5; }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 22px; }
.control-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.control-row label { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
.control-row.sym { display: grid; grid-template-columns: 88px 1fr 1fr; gap: 12px 16px; align-items: center; }
.control-row.sym.single { grid-template-columns: 88px 1fr; }
.ctl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctl input[type="range"] { flex: 1; min-width: 0; }
.ctl .val { flex: none; width: 64px; text-align: right; font-size: 13px; }
@media (max-width: 600px) {
.control-row.sym { grid-template-columns: 64px 1fr; }
.control-row.sym .ctl:nth-of-type(2) { grid-column: 2; }
}
input[type="range"] { flex: 1; min-width: 110px; accent-color: var(--accent); }
.toggle { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.toggle input { accent-color: var(--accent2); }
.control-row .toggle { white-space: normal; }
.mono { font-family: var(--mono); }
.dim { color: var(--text-dim); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip, .btn {
font-family: var(--mono); font-size: 12.5px; color: var(--text); background: transparent;
border: 1px solid var(--border); border-radius: 3px; padding: 6px 13px; cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.chip:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); color: var(--accent); }
.btn.playing, .btn.playing:hover { border-color: var(--hot); color: var(--hot); }
.btn.off { border-color: var(--hot); color: var(--hot); opacity: 0.85; }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn:disabled:hover { border-color: var(--border); color: var(--text); }
.chip.sel-chip { border-color: var(--accent); color: var(--accent); }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 0; }
.readout { text-align: left; }
.readout.inline { margin-left: auto; text-align: right; }
.readout .big { display: block; font-size: 30px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 5ch; }
.readout.accent .big { color: var(--accent2); }
.readout .big.hot { color: var(--hot); }
.readout small { color: var(--text-dim); font-size: 12.5px; }
@media (max-width: 560px) { .readout .big { font-size: 25px; } }
.plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
.plot.tall { height: 280px; }
.plot.duo { height: 320px; }
.plot.phasor { height: 400px; }
.plot.spec { height: 230px; }
.mono, .ctl .val, .readout .big, .readout small { font-variant-numeric: tabular-nums; }
.ctl .val { width: 96px; }</style>
</head>
<body>
<div class="widget">
<div class="control-row sym single">
<label for="filt-cut">cutoff</label>
<span class="ctl wide"><input type="range" id="filt-cut" min="2" max="64" value="30"><span class="mono val" id="filt-cut-label">30 · 3.0 kHz</span></span>
</div>
<div class="control-row">
<button class="btn primary" id="filt-play">▶ play melody · loops</button>
<button class="btn" id="filt-bypass">filter: on</button>
<button class="btn" id="filt-mode">low-pass</button>
<span class="mono dim">chart bin × 100 = audio Hz</span>
</div>
<canvas id="filt-canvas" class="plot duo"></canvas>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/dsp.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Frequency-domain filter: forward DFT → zero bins past the cutoff → inverse DFT on the chart; cascaded biquads on a looping melody with an added 5.2 kHz tone. */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { T, clamp, setupCanvas, hline, vGradient, hotWash, fft, signal } = DSP;
const N = 128;
const COMPS = [[4, 0.7], [11, 0.5], [52, 0.35]];
const MODES = ['lowpass', 'highpass'];
let mode = 'lowpass';
let bypassed = false;
let biquads = null;
let melody = null;
const cutHz = () => clamp(+$('filt-cut').value * 100, 100, 6400);
function keeps(k, cut) {
return mode === 'lowpass' ? k <= cut : k >= cut;
}
function render() {
const cut = +$('filt-cut').value;
$('filt-cut-label').textContent = cut + ' · ' + (cut / 10).toFixed(1) + ' kHz';
$('filt-mode').textContent = mode === 'lowpass' ? 'low-pass' : 'high-pass';
syncAudio();
const re = new Float64Array(N);
const im = new Float64Array(N);
for (let n = 0; n < N; n++) {
let v = 0;
for (const [f, a] of COMPS) v += a * Math.sin((2 * Math.PI * f * n) / N);
re[n] = v;
}
const orig = Float64Array.from(re);
fft(re, im, false);
const mags = [];
for (let k = 0; k <= N / 2; k++) mags.push((2 / N) * Math.hypot(re[k], im[k]));
for (let k = 0; k <= N / 2; k++) {
if (keeps(k, cut)) continue;
re[k] = 0; im[k] = 0;
if (k > 0 && k < N / 2) { re[N - k] = 0; im[N - k] = 0; }
}
fft(re, im, true);
const { ctx, w, h } = setupCanvas($('filt-canvas'));
const x0 = 14;
const pw = w - 28;
const topMid = h * 0.24;
const topAmp = h * 0.16;
const specTop = h * 0.5;
const specBot = h - 26;
const specH = specBot - specTop;
const slot = pw / (N / 2 + 1);
const cutX = x0 + (cut + (mode === 'lowpass' ? 1 : 0)) * slot;
ctx.clearRect(0, 0, w, h);
ctx.font = DSP.font(10);
hline(ctx, x0, w - 14, topMid, T.GRID);
const waveOf = (arr, color, alpha, lw) => {
ctx.strokeStyle = color;
ctx.globalAlpha = alpha;
ctx.lineWidth = lw;
ctx.beginPath();
for (let px = 0; px <= pw; px++) {
const n = Math.min(N - 1, Math.floor((px / pw) * N));
const y = topMid - topAmp * arr[n];
if (px === 0) ctx.moveTo(x0 + px, y);
else ctx.lineTo(x0 + px, y);
}
ctx.stroke();
ctx.globalAlpha = 1;
};
waveOf(orig, T.ACCENT, 0.32, 1.4);
waveOf(re, T.ACCENT2, 1, 2.1);
DSP.label(ctx, 'input (dim) → filtered (bright) · forward DFT, edit, inverse DFT', x0 + 2, 12);
ctx.fillStyle = hotWash(0.07);
if (mode === 'lowpass') ctx.fillRect(cutX, specTop - 2, w - 14 - cutX, specBot - specTop + 2);
else ctx.fillRect(x0, specTop - 2, cutX - x0, specBot - specTop + 2);
ctx.strokeStyle = T.HOT;
ctx.setLineDash([4, 4]);
ctx.beginPath();
ctx.moveTo(cutX, specTop - 8);
ctx.lineTo(cutX, specBot);
ctx.stroke();
ctx.setLineDash([]);
if (mode === 'lowpass') DSP.label(ctx, 'removed', cutX + 5, specTop + 8, T.HOT);
else DSP.label(ctx, 'removed', cutX - 5, specTop + 8, T.HOT, 'right');
hline(ctx, x0, w - 14, specBot, T.GRID);
const maxMag = Math.max(1, ...mags);
for (let k = 0; k < mags.length; k++) {
const bh = (mags[k] / maxMag) * specH;
const bx = x0 + k * slot;
ctx.fillStyle = keeps(k, cut) ? vGradient(ctx, specBot - bh, specBot) : hotWash(0.3);
ctx.fillRect(bx + slot * 0.15, specBot - Math.max(bh, 1), slot * 0.7, Math.max(bh, 1));
if (k % 8 === 0) DSP.label(ctx, k, bx + slot / 2, specBot + 13, T.DIM, 'center');
}
}
function getMelody() {
const ctx = DSP.audioCtx();
if (melody && melody.sr === ctx.sampleRate) return melody;
const notes = [262, 330, 392, 523, 392, 330, 262, 196];
const noteDur = 0.27;
const sr = ctx.sampleRate;
const total = Math.floor(notes.length * noteDur * sr);
const data = new Float32Array(total);
notes.forEach((f, ni) => {
const start = Math.floor(ni * noteDur * sr);
const len = Math.floor(noteDur * sr);
for (let i = 0; i < len && start + i < total; i++) {
const t = i / sr;
const env = Math.min(t / 0.01, 1) * Math.exp(-3.2 * t);
data[start + i] = env * 0.5 * (Math.sin(2 * Math.PI * f * t) + 0.35 * Math.sin(4 * Math.PI * f * t));
}
});
for (let i = 0; i < total; i++) data[i] += 0.06 * Math.sin((2 * Math.PI * 5200 * i) / sr);
melody = { sr, data };
return melody;
}
function syncAudio() {
if (!biquads) return;
const ctx = DSP.audioCtx();
const open = mode === 'lowpass' ? 20000 : 10;
const target = bypassed ? open : cutHz();
biquads.forEach((b) => {
b.type = mode;
b.frequency.setTargetAtTime(target, ctx.currentTime, 0.02);
});
}
$('filt-cut').addEventListener('input', () => {
render();
signal('interaction', { cutoff: +$('filt-cut').value });
});
DSP.playButton($('filt-play'), () => {
const ctx = DSP.audioCtx();
const { data } = getMelody();
const buf = ctx.createBuffer(1, data.length, ctx.sampleRate);
buf.copyToChannel(data, 0);
const src = ctx.createBufferSource();
src.buffer = buf;
src.loop = true;
const g = ctx.createGain();
g.gain.value = 0.5;
const bq = Array.from({ length: 4 }, () => {
const b = ctx.createBiquadFilter();
b.type = mode;
b.Q.value = 0.707;
b.frequency.value = mode === 'lowpass' ? 20000 : 10;
return b;
});
let node = src;
bq.forEach((b) => { node.connect(b); node = b; });
node.connect(g).connect(ctx.destination);
biquads = bq;
syncAudio();
src.start();
signal('interaction', { play: true });
return () => {
biquads = null;
g.gain.setTargetAtTime(0, ctx.currentTime, 0.02);
src.stop(ctx.currentTime + 0.1);
};
});
$('filt-bypass').addEventListener('click', () => {
bypassed = !bypassed;
const btn = $('filt-bypass');
btn.classList.toggle('off', bypassed);
btn.textContent = bypassed ? 'filter: off' : 'filter: on';
syncAudio();
signal('interaction', { bypassed });
});
$('filt-mode').addEventListener('click', () => {
mode = mode === 'lowpass' ? 'highpass' : 'lowpass';
render();
signal('interaction', { mode });
});
function applyParams(p) {
if (Number.isInteger(p.cutoff)) $('filt-cut').value = p.cutoff;
if (MODES.includes(p.mode)) mode = p.mode;
render();
}
render();
DSP.onResize(render);
DSP.connect({ render, params: applyParams });
})();