PCM bitrate

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.

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 pcm-bitrate/ to a new name (one DNS label), set forkedFrom to { "name": "pcm-bitrate", "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": "pcm-bitrate",
  "title": "PCM bitrate",
  "version": 1,
  "claim": "Uncompressed PCM costs fₛ × N × channels bits per second, so CD audio at 44,100 × 16 × 2 = 1,411,200 bit/s takes about 10.6 MB per minute, and telephone audio at 8,000 × 8 × 1 about a twentieth of that.",
  "summary": "Set a sample rate, bit depth, channel count and length, or pick the telephone, CD and hi-res presets, and read off the bitrate, the megabytes per minute and the size of your recording, with bars comparing your format against the three presets.",
  "topics": ["audio/digital", "information/coding"],
  "aliases": ["bitrate", "PCM", "kbps", "file size", "megabytes per minute", "uncompressed audio", "WAV"],
  "params": {
    "rate": { "type": "integer", "default": 44100, "min": 8000, "max": 192000, "label": "samples per second (snaps to 8k, 22.05k, 44.1k, 48k, 96k, 192k)" },
    "bits": { "type": "integer", "default": 16, "min": 8, "max": 24, "label": "bits per sample (snaps to 8, 16, 24)" },
    "channels": { "type": "integer", "default": 2, "min": 1, "max": 2, "label": "channels" },
    "minutes": { "type": "integer", "default": 3, "min": 1, "max": 10, "label": "length in minutes" }
  },
  "check": [
    {
      "q": "CD audio uses 44,100 samples/s × 16 bits × 2 channels. The resulting bitrate is…",
      "options": ["about 1.4 Mbps", "about 44.1 kbps", "about 705.6 kbps", "about 16 Mbps"],
      "answer": 0,
      "why": "44,100 × 16 × 2 = 1,411,200 bits/s, about 1.4 Mbps; 705.6 kbps is the bitrate of a single channel."
    },
    {
      "q": "The uncompressed bitrate of 48,000 samples/s × 24 bits × stereo is…",
      "options": ["about 2.3 Mbps", "about 1.4 Mbps", "about 768 kbps", "about 48 kbps"],
      "answer": 0,
      "why": "48,000 × 24 × 2 = 2,304,000 bits/s, about 2.3 Mbps, the standard for film and streaming production audio."
    },
    {
      "q": "Telephone audio is sampled at 8,000 samples/s. As a result, calls…",
      "options": ["lose everything above about 4 kHz and sound thin", "are quieter than music", "have echo", "are mono"],
      "answer": 0,
      "why": "A Nyquist limit of 4 kHz keeps speech intelligible but discards the top octaves, so consonants such as “f” and “s” become harder to distinguish."
    }
  ],
  "capabilities": [],
  "height": 390,
  "requires": ["samples-per-cycle", "bit-depth-buckets"],
  "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>PCM bitrate</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; }
  }
  .meter { height: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
  .meter-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; transition: width 0.2s ease; }
  #br-bars { margin-top: 16px; }
  .size-row {
    display: grid; grid-template-columns: 130px 1fr 92px; align-items: center; gap: 12px;
    padding: 4px 0; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
  .size-row.yours { color: var(--accent2); }
  .size-row .val { text-align: right; }
  @media (max-width: 560px) { .size-row { grid-template-columns: 92px 1fr 80px; } }
</style>
</head>
<body>
  <div class="widget" id="root">
    <div class="control-row sym single">
      <label for="br-rate">sample rate</label>
      <span class="ctl wide"><input type="range" id="br-rate" min="0" max="5" value="2" step="1"><span class="mono val" id="br-rate-label">44,100 /s</span></span>
    </div>
    <div class="control-row sym single">
      <label for="br-bits">bit depth</label>
      <span class="ctl wide"><input type="range" id="br-bits" min="0" max="2" value="1" step="1"><span class="mono val" id="br-bits-label">16 bits</span></span>
    </div>
    <div class="control-row sym single">
      <label for="br-ch">channels</label>
      <span class="ctl wide"><input type="range" id="br-ch" min="1" max="2" value="2" step="1"><span class="mono val" id="br-ch-label">stereo</span></span>
    </div>
    <div class="control-row sym single">
      <label for="br-min">length</label>
      <span class="ctl wide"><input type="range" id="br-min" min="1" max="10" value="3"><span class="mono val" id="br-min-label">3 min</span></span>
    </div>
    <div class="chips">
      <button class="chip" data-preset="phone">telephone &middot; 8k/8/mono</button>
      <button class="chip" data-preset="cd">CD &middot; 44.1k/16/stereo</button>
      <button class="chip" data-preset="hires">hi-res &middot; 96k/24/stereo</button>
    </div>
    <div class="readout-row">
      <div class="readout">
        <span class="big mono" id="br-kbps">1,411</span>
        <small>kbps &middot; uncompressed</small>
      </div>
      <div class="readout">
        <span class="big mono" id="br-mbmin">10.6</span>
        <small>MB per minute</small>
      </div>
      <div class="readout accent">
        <span class="big mono" id="br-total">31.8</span>
        <small id="br-total-note">MB for 3 minutes of audio</small>
      </div>
    </div>
    <div id="br-bars"></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

/* PCM bitrate: sample rate × bit depth × channels, with MB-per-minute bars against telephone, CD and hi-res. */
(() => {
  'use strict';
  const K = window.AudioKit;
  const $ = (id) => document.getElementById(id);
  const RATES = [8000, 22050, 44100, 48000, 96000, 192000];
  const BITS = [8, 16, 24];
  const PRESETS = {
    phone: { rate: 8000, bits: 8, channels: 1 },
    cd: { rate: 44100, bits: 16, channels: 2 },
    hires: { rate: 96000, bits: 24, channels: 2 },
  };
  let rateIx = 2, bitsIx = 1, channels = 2, minutes = 3, host = null;

  const nearest = (list, v) => list.reduce((best, x, i) => (Math.abs(x - v) < Math.abs(list[best] - v) ? i : best), 0);
  const mbPerMin = (bps) => (bps * 60) / 8 / 1e6;

  function render() {
    const rate = RATES[rateIx], bits = BITS[bitsIx];
    const bps = rate * bits * channels;
    $('br-rate').value = rateIx;
    $('br-bits').value = bitsIx;
    $('br-ch').value = channels;
    $('br-min').value = minutes;
    $('br-rate-label').textContent = K.fmtInt(rate) + ' /s';
    $('br-bits-label').textContent = bits + ' bits';
    $('br-ch-label').textContent = channels === 1 ? 'mono' : 'stereo';
    $('br-min-label').textContent = minutes + ' min';
    const mb = mbPerMin(bps);
    $('br-kbps').textContent = K.fmtInt(bps / 1000);
    $('br-mbmin').textContent = mb.toFixed(1);
    $('br-total').textContent = (mb * minutes).toFixed(1);
    $('br-total-note').textContent = 'MB for ' + minutes + (minutes === 1 ? ' minute' : ' minutes') + ' of audio';

    const rows = [
      ['telephone', 8000 * 8 * 1, false],
      ['CD', 44100 * 16 * 2, false],
      ['hi-res 96/24', 96000 * 24 * 2, false],
      ['yours', bps, true],
    ];
    const maxMb = Math.max(...rows.map(([, v]) => mbPerMin(v)));
    const bars = $('br-bars');
    bars.textContent = '';
    for (const [name, v, yours] of rows) {
      const row = document.createElement('div');
      row.className = 'size-row' + (yours ? ' yours' : '');
      const label = document.createElement('span');
      label.textContent = name;
      const meter = document.createElement('div');
      meter.className = 'meter';
      const fill = document.createElement('div');
      fill.className = 'meter-fill';
      fill.style.width = ((mbPerMin(v) / maxMb) * 100).toFixed(1) + '%';
      meter.appendChild(fill);
      const val = document.createElement('span');
      val.className = 'val';
      val.textContent = mbPerMin(v).toFixed(1) + ' MB/min';
      row.append(label, meter, val);
      bars.appendChild(row);
    }
  }

  const ping = () => { if (host && host.signal) host.signal('interaction', { rate: RATES[rateIx], bits: BITS[bitsIx], channels, minutes }); };
  function set(p) {
    if (typeof p.rate === 'number') rateIx = nearest(RATES, p.rate);
    if (typeof p.bits === 'number') bitsIx = nearest(BITS, p.bits);
    if (typeof p.channels === 'number') channels = K.clamp(Math.round(p.channels), 1, 2);
    if (typeof p.minutes === 'number') minutes = K.clamp(Math.round(p.minutes), 1, 10);
    render();
  }

  $('br-rate').addEventListener('input', () => { rateIx = +$('br-rate').value; render(); ping(); });
  $('br-bits').addEventListener('input', () => { bitsIx = +$('br-bits').value; render(); ping(); });
  $('br-ch').addEventListener('input', () => { channels = +$('br-ch').value; render(); ping(); });
  $('br-min').addEventListener('input', () => { minutes = +$('br-min').value; render(); ping(); });
  document.querySelectorAll('.chip[data-preset]').forEach((chip) => {
    chip.addEventListener('click', () => { set(PRESETS[chip.dataset.preset]); ping(); });
  });
  render();

  LearnWidget.connect().then((h) => {
    host = h;
    K.fitFrame(h, $('root'));
    set(h.params || {});
    h.on('params.changed', set);
  });
})();