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="pure-tone"></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 pure-tone/ to a new name (one DNS label), set forkedFrom to { "name": "pure-tone", "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": "pure-tone",
"title": "Pure tone",
"version": 1,
"claim": "A pure tone x(t) = A·sin(2πft) has amplitude A, heard as loudness, and frequency f in Hz, heard as pitch, with period T = 1/f; doubling f raises the pitch by one octave.",
"summary": "Drag amplitude and frequency sliders while a live tone plays: the drawn wave and the sound retune together, and readouts give the period in ms and the cycles visible in a 20 ms window. Presets jump to low E, middle C, concert A and the A an octave up.",
"topics": [
"signals/sinusoids",
"audio/digital"
],
"aliases": [
"sine wave",
"amplitude",
"frequency",
"hertz",
"pitch",
"loudness",
"period",
"octave"
],
"params": {
"freq": {
"type": "integer",
"default": 220,
"min": 50,
"max": 1000,
"label": "frequency in Hz"
},
"amp": {
"type": "number",
"default": 0.7,
"min": 0.05,
"max": 1,
"label": "amplitude"
}
},
"check": [
{
"q": "Concert A is 440 Hz. This means that…",
"options": [
"the air pressure swings through 440 full cycles every second",
"the recording takes 440 samples every second",
"the wave swings 440 times farther than a quiet one",
"the wave travels at 440 meters per second"
],
"answer": 0,
"why": "Hertz counts full pressure cycles per second; frequency is heard as pitch, amplitude as loudness, and the sample rate describes the recording process, not the wave."
},
{
"q": "A pure tone's loudness and pitch correspond, respectively, to its…",
"options": [
"amplitude and frequency",
"frequency and amplitude",
"period and amplitude",
"sample rate and bit depth"
],
"answer": 0,
"why": "Amplitude, the size of the swing, is heard as loudness; frequency, the number of swings per second, is heard as pitch; the period 1/f is frequency expressed in seconds."
},
{
"q": "Moving the frequency slider from 220 Hz to 440 Hz makes the tone sound…",
"options": [
"one octave higher",
"twice as loud",
"the same pitch, twice as long",
"one octave lower"
],
"answer": 0,
"why": "Pitch is logarithmic in frequency, so every doubling is one octave; the amplitude slider, not the frequency slider, changes loudness."
}
],
"capabilities": [],
"height": 440,
"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>Pure tone</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="wave-f">frequency</label>
<span class="ctl wide"><input type="range" id="wave-f" min="50" max="1000" value="220"><span class="mono val" id="wave-f-label">220 Hz</span></span>
</div>
<div class="control-row sym single">
<label for="wave-amp">amplitude</label>
<span class="ctl wide"><input type="range" id="wave-amp" min="5" max="100" value="70"><span class="mono val" id="wave-amp-label">0.70</span></span>
</div>
<div class="chips">
<button class="btn primary" id="wave-play">▶ play</button>
<button class="chip" data-f="82">low E · 82 Hz</button>
<button class="chip" data-f="262">middle C · 262 Hz</button>
<button class="chip" data-f="440">concert A · 440 Hz</button>
<button class="chip" data-f="880">A + octave · 880 Hz</button>
</div>
<canvas id="wave-canvas" class="plot"></canvas>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="wave-period">4.55</span>
<small>period · ms per cycle</small>
</div>
<div class="readout">
<span class="big mono" id="wave-cycles">4.4</span>
<small>cycles in the 20 ms window</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
/* Pure tone: amplitude and frequency sliders retune a drawn wave and a live oscillator. */
(() => {
'use strict';
const K = window.AudioKit;
const $ = (id) => document.getElementById(id);
const WINDOW_S = 0.020;
const F_MIN = 50, F_MAX = 1000;
let freq = 220, amp = 0.7;
let phase = 0, last = performance.now();
let voice = null, actx = null;
let dims = null, host = null;
function labels() {
$('wave-f-label').textContent = freq + ' Hz';
$('wave-amp-label').textContent = amp.toFixed(2);
$('wave-period').textContent = (1000 / freq).toFixed(2);
$('wave-cycles').textContent = (freq * WINDOW_S).toFixed(1);
}
function frame(now) {
const dt = Math.min(now - last, 50) / 1000;
last = now;
phase += dt * 1.4;
const { ctx, w, h } = dims;
const mid = h / 2;
ctx.clearRect(0, 0, w, h);
K.hline(ctx, 0, w, mid, K.T.GRID);
const grad = ctx.createLinearGradient(0, 0, w, 0);
grad.addColorStop(0, K.T.ACCENT);
grad.addColorStop(1, K.T.ACCENT2);
K.trace(ctx, 0, w, (u) => mid - amp * (h * 0.42) * Math.sin(2 * Math.PI * (freq * u * WINDOW_S - phase)), grad, 2.2);
ctx.font = '11px ui-monospace, Menlo, monospace';
ctx.fillStyle = K.T.DIM;
ctx.textAlign = 'left';
ctx.fillText('20 ms window · x(t) = A·sin(2πft)', 4, 13);
ctx.textAlign = 'right';
ctx.fillText('A = ' + amp.toFixed(2) + ' · f = ' + freq + ' Hz', w - 4, 13);
requestAnimationFrame(frame);
}
function setFreq(f) {
freq = K.clamp(Math.round(f), F_MIN, F_MAX);
$('wave-f').value = freq;
labels();
if (voice) voice.retune(freq);
}
function setAmp(a) {
amp = K.clamp(a, 0.05, 1);
$('wave-amp').value = Math.round(amp * 100);
labels();
if (voice) voice.level(amp * 0.15);
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
$('wave-f').addEventListener('input', () => { setFreq(+$('wave-f').value); ping({ freq }); });
$('wave-amp').addEventListener('input', () => { setAmp($('wave-amp').value / 100); ping({ amp }); });
document.querySelectorAll('.chip[data-f]').forEach((chip) => {
chip.addEventListener('click', () => { setFreq(+chip.dataset.f); ping({ freq }); });
});
K.bindPlay($('wave-play'), (ctx) => {
actx = ctx;
voice = K.tone(ctx, freq, amp * 0.15);
return () => { const v = voice; voice = null; v.stop(); };
}, () => ping({ play: freq }));
K.stopWhenHidden($('root'));
function layout() { dims = K.setupCanvas($('wave-canvas')); }
K.debounceResize(layout);
layout();
labels();
requestAnimationFrame(frame);
LearnWidget.connect().then((h) => {
host = h;
K.fitFrame(h, $('root'));
const p = h.params || {};
if (typeof p.freq === 'number') setFreq(p.freq);
if (typeof p.amp === 'number') setAmp(p.amp);
h.on('theme.changed', K.readTheme);
h.on('params.changed', (q) => {
if (typeof q.freq === 'number') setFreq(q.freq);
if (typeof q.amp === 'number') setAmp(q.amp);
});
K.readTheme();
});
})();