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="bit-depth-buckets"></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 bit-depth-buckets/ to a new name (one DNS label), set forkedFrom to { "name": "bit-depth-buckets", "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": "bit-depth-buckets",
"title": "Bit depth buckets",
"version": 1,
"claim": "Storing each sample with N bits rounds it to one of 2ᴺ amplitude buckets, so every added bit doubles the buckets, halves the rounding error and raises the SNR by about 6 dB, while pitch and timing are untouched.",
"summary": "Sweep the bit depth from 1 to 12 while a looping arpeggio plays through a live quantizer: at 12 bits the noise is inaudible, by 4 bits there is a clear hiss, at 1–2 bits the melody is heavily distorted but still in tune. The plot shows the wave snapped to bucket centres and the rounding error left behind; a bypass button removes the quantizer for comparison.",
"topics": ["audio/digital", "computing/binary"],
"aliases": ["quantization", "bit depth", "quantization noise", "SNR", "16-bit", "resolution", "levels"],
"params": {
"bits": { "type": "integer", "default": 3, "min": 1, "max": 12, "label": "bits per sample" },
"quantize": { "type": "boolean", "default": true, "label": "quantizer on" }
},
"check": [
{
"q": "Adding one more bit of depth…",
"options": ["doubles the buckets and raises the SNR by about 6 dB", "doubles the sample rate", "doubles the highest frequency you can record", "halves the Nyquist limit"],
"answer": 0,
"why": "With 2ᴺ buckets each extra bit halves the rounding error and raises the SNR by ≈ 6.02 dB; sample rate and bit depth are independent, rate resolves time and depth resolves amplitude."
},
{
"q": "How many amplitude buckets does 16-bit audio have?",
"options": ["65,536", "16", "256", "44,100"],
"answer": 0,
"why": "A bit depth of 16 gives 2¹⁶ = 65,536 levels; each additional bit doubles the count."
},
{
"q": "Using the ≈ 6 dB per bit rule, 24-bit audio has a theoretical SNR of about…",
"options": ["146 dB", "98 dB", "24 dB", "6 dB"],
"answer": 0,
"why": "6.02 × 24 + 1.76 ≈ 146 dB, more than any playback chain reproduces; the extra range is headroom for recording and mixing."
},
{
"q": "At healthy bit depths, quantization error sounds like…",
"options": ["a faint noise floor under the signal", "a change in pitch", "a slower tempo", "an echo"],
"answer": 0,
"why": "Rounding errors form a quiet, roughly random hiss; pitch and timing are set by the sample clock, not by the buckets."
}
],
"capabilities": [],
"height": 470,
"requires": ["samples-per-cycle"],
"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>Bit depth buckets</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;
--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;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); }
.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.sym.single {
display: grid; grid-template-columns: 88px 1fr; gap: 12px 16px;
align-items: center; margin-bottom: 14px;
}
.control-row label { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
.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: 72px; text-align: right; font-size: 13px; }
input[type="range"] { accent-color: var(--accent); }
@media (max-width: 600px) { .control-row.sym.single { grid-template-columns: 64px 1fr; } }
.toggle { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; white-space: normal; }
.toggle input { accent-color: var(--accent2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); font-size: 12.5px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.btn, .chip {
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;
}
.btn:hover, .chip: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; }
.plot { display: block; width: 100%; height: 220px; margin-top: 8px; }
.plot.tall { height: 280px; }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 0; }
.readout { text-align: left; }
.readout .big {
display: block; font-size: 28px; font-weight: 600; color: var(--accent);
line-height: 1.1; min-width: 5ch; font-variant-numeric: tabular-nums;
}
.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) {
.widget { padding: 16px; }
.readout-row { gap: 12px 18px; }
.readout .big { font-size: 22px; }
.plot { height: 180px; }
.plot.tall { height: 220px; }
.plot.pipe { height: 200px; }
.narrow-hide { display: none; }
}
</style>
</head>
<body>
<div class="widget" id="root">
<div class="control-row sym single">
<label for="bd-n">bit depth</label>
<span class="ctl wide"><input type="range" id="bd-n" min="1" max="12" value="3"><span class="mono val" id="bd-n-label">3 bits</span></span>
</div>
<div class="control-row">
<button class="btn primary" id="bd-play">▶ play melody · loops</button>
<button class="btn" id="bd-bypass">quantizer: on</button>
</div>
<canvas id="bd-canvas" class="plot tall"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="bd-levels">8</span>
<small>buckets · 2ⁿ</small>
</div>
<div class="readout">
<span class="big mono" id="bd-step">0.250</span>
<small>bucket size · of full range</small>
</div>
<div class="readout accent">
<span class="big mono" id="bd-snr">19.8</span>
<small>SNR · dB</small>
</div>
</div>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/audio.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Bit depth buckets: a wave snapped to 2^N levels with its rounding error, and a looping melody quantized live. */
(() => {
'use strict';
const K = window.AudioKit;
const $ = (id) => document.getElementById(id);
let bits = 3, bypass = false, host = null;
let shaper = null;
function render() {
const levels = Math.pow(2, bits);
$('bd-n-label').textContent = bits + (bits === 1 ? ' bit' : ' bits');
$('bd-levels').textContent = K.fmtInt(levels);
$('bd-step').textContent = (1 / levels).toPrecision(3);
$('bd-snr').textContent = K.snrDb(bits).toFixed(1);
const { ctx, w, h } = K.setupCanvas($('bd-canvas'));
const m = { l: 14, r: 14, t: 14, b: 14 };
const waveH = (h - m.t - m.b) * 0.62;
const errH = (h - m.t - m.b) * 0.24;
const waveMid = m.t + waveH / 2;
const errMid = m.t + waveH + 18 + errH / 2;
const sig = (u) => 0.85 * Math.sin(4 * Math.PI * u);
const Yw = (v) => waveMid - v * (waveH / 2);
const Ye = (e) => errMid - (e / 0.5) * (errH / 2);
ctx.clearRect(0, 0, w, h);
ctx.font = '11px ui-monospace, Menlo, monospace';
if (levels <= 32) {
for (let k = 0; k <= levels; k++) K.hline(ctx, m.l, w - m.r, Yw(-1 + k * (2 / levels)), K.T.GRID);
} else {
ctx.fillStyle = K.T.DIM;
ctx.textAlign = 'right';
ctx.fillText(K.fmtInt(levels) + ' buckets (too fine to draw)', w - m.r, m.t + 10);
}
K.trace(ctx, m.l, w - m.r, (u) => Yw(sig(u)), K.T.ACCENT, 1.6, 0.5);
K.trace(ctx, m.l, w - m.r, (u) => Yw(K.quantize(sig(u), bits)), K.T.ACCENT2, 2.2);
K.hline(ctx, m.l, w - m.r, errMid, K.T.GRID);
K.trace(ctx, m.l, w - m.r, (u) => Ye(sig(u) - K.quantize(sig(u), bits)), K.T.HOT, 1.4);
ctx.fillStyle = K.T.DIM;
ctx.textAlign = 'left';
ctx.fillText('quantization error · fixed scale · at most ±½ bucket', m.l + 2, errMid - errH / 2 - 5);
}
function curve() {
const n = 8193;
const c = new Float32Array(n);
for (let i = 0; i < n; i++) {
const x = (i / (n - 1)) * 2 - 1;
c[i] = bypass ? x : K.quantize(x, bits);
}
return c;
}
const syncCurve = () => { if (shaper) shaper.curve = curve(); };
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
function setBits(n) {
bits = K.clamp(Math.round(n), 1, 12);
$('bd-n').value = bits;
render();
syncCurve();
}
function setBypass(off) {
bypass = off;
const btn = $('bd-bypass');
btn.classList.toggle('off', bypass);
btn.textContent = bypass ? 'quantizer: off' : 'quantizer: on';
syncCurve();
}
$('bd-n').addEventListener('input', () => { setBits(+$('bd-n').value); ping({ bits }); });
$('bd-bypass').addEventListener('click', () => { setBypass(!bypass); ping({ bypass }); });
K.bindPlay($('bd-play'), (ctx) => {
const { data } = K.getMelody(ctx.sampleRate);
const loop = K.loopBuffer(ctx, data, 0.5);
shaper = ctx.createWaveShaper();
syncCurve();
loop.connect(shaper);
return () => { shaper = null; loop.stop(); };
}, () => ping({ play: 'melody', bits }));
K.stopWhenHidden($('root'));
K.debounceResize(render);
render();
LearnWidget.connect().then((h) => {
host = h;
K.fitFrame(h, $('root'));
const apply = (p) => {
if (typeof p.bits === 'number') setBits(p.bits);
if (typeof p.quantize === 'boolean') setBypass(!p.quantize);
};
apply(h.params || {});
h.on('theme.changed', () => { K.readTheme(); render(); });
h.on('params.changed', apply);
K.readTheme();
render();
});
})();