<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .preset-group {
      display: flex;
      gap: 6px;
    }
    .btn {
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #d1d5db;
      background: #f9fafb;
      color: #374151;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
    }
    input[type="range"] {
      accent-color: #0284c7;
      cursor: pointer;
      width: 130px;
    }

    /* Main Visual Layout */
    .main-grid {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 10px;
      height: 240px;
      position: relative;
    }

    /* Meter Column */
    .meter-col {
      display: flex;
      flex-direction: column;
      position: relative;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 4px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }
    .meter-scale {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      right: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      pointer-events: none;
      z-index: 2;
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
    }
    .meter-bar-container {
      position: absolute;
      bottom: 4px;
      left: 4px;
      right: 4px;
      top: 4px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column-reverse;
    }
    .meter-bar {
      width: 100%;
      height: 50%;
      background: linear-gradient(to top, #22c55e 0%, #eab308 75%, #ef4444 100%);
      transition: height 0.15s ease-out;
    }
    .noise-floor-line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 12.5%; /* -60 dB on -70 to 0 scale (10/70 = 14%) */
      height: 2px;
      background: #64748b;
      border-top: 1px dashed #ffffff;
      z-index: 3;
    }

    /* Scope View */
    .scope-wrap {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .clip-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #f87171;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 4px;
      display: none;
    }
    .clip-badge.visible {
      display: block;
    }

    /* Brackets / Metrics Row */
    .metrics-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .metric-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      text-align: center;
    }
    .metric-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .metric-val {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-top: 2px;
    }
    .val-good { color: #0284c7; }
    .val-poor { color: #d97706; }
    .val-bad { color: #dc2626; }
  </style>
</head>
<body>

  
  <div class="controls">
    <div class="preset-group">
      <button class="btn" id="btnWeak" onclick="setPreset(-40)">Weak</button>
      <button class="btn active" id="btnOpt" onclick="setPreset(-6)">Optimized</button>
      <button class="btn" id="btnClip" onclick="setPreset(4)">Clipping</button>
    </div>
    <div class="slider-wrap">
      <span>Gain:</span>
      <input type="range" id="gainSlider" min="-50" max="6" step="1" value="-6" oninput="onSlider(this.value)">
      <span id="gainText" style="min-width: 44px;">-6 dB</span>
    </div>
  </div>

  
  <div class="main-grid">
    
    <div class="meter-col">
      <div class="meter-bar-container">
        <div class="meter-bar" id="meterBar"></div>
      </div>
      <div class="noise-floor-line" title="Noise Floor (-60 dBFS)"></div>
      <div class="meter-scale">
        <span>0 dB</span>
        <span>-12</span>
        <span>-24</span>
        <span>-40</span>
        <span>-60</span>
      </div>
    </div>

    
    <div class="scope-wrap">
      <canvas id="scopeCanvas"></canvas>
      <div class="clip-badge" id="clipBadge">⚠ DIGITAL CLIPPING</div>
    </div>
  </div>

  
  <div class="metrics-row">
    <div class="metric-card">
      <div class="metric-label">Headroom</div>
      <div class="metric-val" id="headroomVal">6 dB</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">SNR</div>
      <div class="metric-val val-good" id="snrVal">54 dB</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Signal Quality</div>
      <div class="metric-val val-good" id="qualityVal">Pristine</div>
    </div>
  </div>

  <script>
    const NOISE_FLOOR = -60; // dBFS
    let currentGain = -6; // dBFS

    const canvas = document.getElementById('scopeCanvas');
    const ctx = canvas.getContext('2d');
    const gainSlider = document.getElementById('gainSlider');
    const gainText = document.getElementById('gainText');
    const meterBar = document.getElementById('meterBar');
    const headroomVal = document.getElementById('headroomVal');
    const snrVal = document.getElementById('snrVal');
    const qualityVal = document.getElementById('qualityVal');
    const clipBadge = document.getElementById('clipBadge');

    function resizeCanvas() {
      const rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * window.devicePixelRatio;
      canvas.height = rect.height * window.devicePixelRatio;
      draw();
    }
    window.addEventListener('resize', resizeCanvas);

    function setPreset(db) {
      currentGain = db;
      gainSlider.value = db;
      updateUI();
    }

    function onSlider(val) {
      currentGain = parseFloat(val);
      updateUI();
    }

    function updateUI() {
      // Buttons active state
      document.getElementById('btnWeak').classList.toggle('active', currentGain === -40);
      document.getElementById('btnOpt').classList.toggle('active', currentGain === -6);
      document.getElementById('btnClip').classList.toggle('active', currentGain === 4);

      gainText.textContent = (currentGain > 0 ? '+' : '') + currentGain + ' dB';

      // Meter calculation (-70 dBFS base to +6 dBFS max)
      const minMeter = -70;
      const maxMeter = 6;
      const pct = Math.max(0, Math.min(100, ((currentGain - minMeter) / (maxMeter - minMeter)) * 100));
      meterBar.style.height = pct + '%';

      // Headroom & SNR
      const headroom = Math.max(0, -currentGain);
      const snr = Math.max(0, currentGain - NOISE_FLOOR);

      headroomVal.textContent = currentGain > 0 ? '0 dB (Over)' : headroom + ' dB';
      snrVal.textContent = snr + ' dB';

      // Status text & colors
      snrVal.className = 'metric-val';
      qualityVal.className = 'metric-val';

      if (currentGain > 0) {
        clipBadge.classList.add('visible');
        qualityVal.textContent = 'Distorted';
        qualityVal.classList.add('val-bad');
        snrVal.classList.add('val-bad');
      } else {
        clipBadge.classList.remove('visible');
        if (snr >= 45) {
          qualityVal.textContent = 'Pristine';
          qualityVal.classList.add('val-good');
          snrVal.classList.add('val-good');
        } else if (snr >= 30) {
          qualityVal.textContent = 'Moderate';
          qualityVal.classList.add('val-poor');
          snrVal.classList.add('val-poor');
        } else {
          qualityVal.textContent = 'Noisy (Masked)';
          qualityVal.classList.add('val-bad');
          snrVal.classList.add('val-poor');
        }
      }

      draw();
    }

    // Seeded random for consistent noise look
    let noiseSeed = [];
    for (let i = 0; i < 400; i++) {
      noiseSeed.push((Math.random() - 0.5) * 2);
    }

    function draw() {
      if (!canvas.width) return;
      const w = canvas.width;
      const h = canvas.height;
      ctx.clearRect(0, 0, w, h);

      const midY = h / 2;
      const maxAmp = (h / 2) * 0.88; // amplitude for 0 dBFS

      // Grid lines (0 dBFS ceiling & floor, mid line)
      ctx.strokeStyle = '#e2e8f0';
      ctx.lineWidth = 1 * window.devicePixelRatio;

      // Center baseline
      ctx.beginPath();
      ctx.moveTo(0, midY);
      ctx.lineTo(w, midY);
      ctx.stroke();

      // 0 dBFS bounds
      ctx.setLineDash([4 * window.devicePixelRatio, 4 * window.devicePixelRatio]);
      ctx.strokeStyle = '#cbd5e1';
      ctx.beginPath();
      ctx.moveTo(0, midY - maxAmp);
      ctx.lineTo(w, midY - maxAmp);
      ctx.moveTo(0, midY + maxAmp);
      ctx.lineTo(w, midY + maxAmp);
      ctx.stroke();
      ctx.setLineDash([]);

      // Calculate linear amplitude from dBFS
      const linAmp = Math.pow(10, currentGain / 20);
      const noiseAmp = Math.pow(10, NOISE_FLOOR / 20) * 12; // boosted slightly for pedagogical visibility

      // Noise floor band (gray fuzz overlay)
      ctx.fillStyle = 'rgba(148, 163, 184, 0.15)';
      const noiseBandH = noiseAmp * maxAmp * 2.5;
      ctx.fillRect(0, midY - noiseBandH, w, noiseBandH * 2);

      // Draw Waveform
      const points = 300;
      const step = w / points;

      ctx.lineWidth = 2.5 * window.devicePixelRatio;
      const isClipping = currentGain > 0;
      ctx.strokeStyle = isClipping ? '#dc2626' : (currentGain <= -35 ? '#64748b' : '#0284c7');

      ctx.beginPath();
      let clippedSegments = [];

      for (let i = 0; i <= points; i++) {
        const x = i * step;
        const t = (i / points) * Math.PI * 6; // 3 full cycles

        // Complex vocal envelope (fundamental + 3rd harmonic)
        const pureWave = Math.sin(t) * 0.75 + Math.sin(t * 3) * 0.25;
        const noise = noiseSeed[i % noiseSeed.length] * noiseAmp;

        let totalSignal = pureWave * linAmp + noise;
        let clamped = false;

        if (totalSignal > 1.0) {
          totalSignal = 1.0;
          clamped = true;
        } else if (totalSignal < -1.0) {
          totalSignal = -1.0;
          clamped = true;
        }

        const y = midY - (totalSignal * maxAmp);

        if (i === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }

        if (clamped) {
          clippedSegments.push({ x, y });
        }
      }
      ctx.stroke();

      // Highlight clipped peaks with red caps
      if (isClipping && clippedSegments.length > 0) {
        ctx.fillStyle = '#ef4444';
        for (const pt of clippedSegments) {
          ctx.beginPath();
          ctx.arc(pt.x, pt.y, 2.5 * window.devicePixelRatio, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      // Labels on canvas
      ctx.font = `600 ${10 * window.devicePixelRatio}px system-ui, sans-serif`;
      ctx.fillStyle = '#94a3b8';
      ctx.fillText('0 dBFS Limit', 8 * window.devicePixelRatio, midY - maxAmp - (4 * window.devicePixelRatio));
      ctx.fillText('Noise Floor (-60 dBFS)', 8 * window.devicePixelRatio, midY + noiseBandH + (12 * window.devicePixelRatio));
    }

    // Initial render
    setTimeout(() => {
      resizeCanvas();
      updateUI();
    }, 50);
  </script>
</body>
</html>

Principles of Dynamic Range Control and Headroom Management

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Range Compression</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100%;
      user-select: none;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
      max-width: 560px;
      justify-content: center;
      margin-bottom: 12px;
    }

    .step-btn {
      flex: 1;
      min-width: 95px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .step-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .step-btn.active {
      background: #1d4ed8;
      color: #ffffff;
      border-color: #1d4ed8;
    }

    .play-btn {
      padding: 7px 14px;
      font-size: 14px;
      font-weight: 600;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      color: #0f172a;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .play-btn:hover {
      background: #f1f5f9;
    }

    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 560px;
      background: transparent;
      overflow: visible;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .grid-line {
      stroke: #cbd5e1;
      stroke-width: 1;
      stroke-dasharray: 4 3;
    }

    .axis-label {
      font-size: 11px;
      font-weight: 700;
      fill: #334155;
    }

    .passage-label {
      font-size: 12px;
      font-weight: 700;
      fill: #1e293b;
    }

    .threshold-line {
      stroke: #d97706;
      stroke-width: 1.5;
      stroke-dasharray: 5 3;
    }

    .clip-rect {
      fill: #fee2e2;
    }

    .noise-floor-rect {
      fill: #e2e8f0;
      opacity: 0.6;
    }

    .wave-path {
      fill: rgba(37, 99, 235, 0.22);
      stroke: #1d4ed8;
      stroke-width: 2.2;
      transition: d 0.6s ease-in-out;
    }

    .scrubber {
      stroke: #475569;
      stroke-width: 1.5;
      stroke-dasharray: 3 2;
    }

    .badge-label {
      font-size: 11px;
      font-weight: 700;
    }

    .fade-group {
      transition: opacity 0.5s ease-in-out;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="step-btn active" id="btn0" onclick="goToStep(0)">1. Raw Signal</button>
    <button class="step-btn" id="btn1" onclick="goToStep(1)">2. Compression</button>
    <button class="step-btn" id="btn2" onclick="goToStep(2)">3. Make-up Gain</button>
    <button class="play-btn" id="playToggle" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
  </div>

  <div class="diagram-area">
    <svg viewBox="0 0 540 315">
      
      <rect class="clip-rect" x="65" y="10" width="465" height="24" rx="3" />
      <text x="72" y="26" class="badge-label" fill="#b91c1c">Clip Zone (0 dBFS)</text>

      
      <rect class="noise-floor-rect" x="65" y="234" width="465" height="24" rx="3" />
      <line x1="65" y1="234" x2="530" y2="234" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3 3" />
      <text x="72" y="250" class="badge-label" fill="#334155">Noise Floor (-60 dBFS)</text>

      
      <text class="axis-label" x="14" y="26" text-anchor="start">0 dBFS</text>
      <line class="grid-line" x1="65" y1="22" x2="530" y2="22" />

      <text class="axis-label" x="8" y="66" text-anchor="start">-6 dBFS</text>
      <line class="grid-line" x1="65" y1="62" x2="530" y2="62" />

      <text class="axis-label" x="2" y="112" text-anchor="start">-18 dBFS</text>
      <line class="grid-line" x1="65" y1="108" x2="530" y2="108" />

      <text class="axis-label" x="2" y="174" text-anchor="start">-36 dBFS</text>
      <line class="grid-line" x1="65" y1="170" x2="530" y2="170" />

      <text class="axis-label" x="2" y="238" text-anchor="start">-60 dBFS</text>

      
      <g id="threshGroup" class="fade-group" opacity="0">
        <line class="threshold-line" x1="65" y1="108" x2="530" y2="108" />
        <rect x="405" y="96" width="120" height="24" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1.2"/>
        <text x="412" y="112" class="badge-label" fill="#92400e">Threshold -18 dBFS</text>
      </g>

      
      <path id="waveShape" class="wave-path" d="" />

      
      <g id="headroomIndicator" class="fade-group" opacity="0">
        <rect x="395" y="26" width="130" height="32" rx="4" fill="#dbeafe" stroke="#2563eb" stroke-width="1.2" />
        <text x="403" y="46" class="badge-label" fill="#1e40af">+6 dB Headroom</text>
      </g>

      
      <g id="gainIndicator" class="fade-group" opacity="0">
        <path d="M 130,226 L 130,186 M 125,193 L 130,186 L 135,193" stroke="#16a34a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" />
        <rect x="142" y="196" width="95" height="22" rx="4" fill="#dcfce7" stroke="#16a34a" stroke-width="1.2" />
        <text x="149" y="211" class="badge-label" fill="#14532d">+6 dB Make-up</text>
      </g>

      
      <line id="scrubLine" class="scrubber" x1="65" y1="22" x2="65" y2="234" />

      
      <rect x="70" y="278" width="140" height="26" rx="4" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/>
      <text x="140" y="295" class="passage-label" text-anchor="middle">Quiet Whisper</text>

      <rect x="270" y="278" width="120" height="26" rx="4" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/>
      <text x="330" y="295" class="passage-label" text-anchor="middle">Loud Peak</text>
    </svg>
  </div>

  <script>
    // Center axis y=148
    // Stage 0: Whisper near noise floor (y=138-158), Loud peak reaches y=22 (0 dBFS)
    const d0 = "M 65,148 " +
               "C 90,138 110,136 135,138 C 160,140 185,146 205,138 " +
               "C 230,128 260,38 300,22 C 330,10 360,28 385,128 " +
               "C 410,138 450,140 530,143 " +
               "L 530,153 " +
               "C 450,156 410,158 385,168 " +
               "C 360,268 330,286 300,274 C 260,258 230,168 205,158 " +
               "C 185,150 160,156 135,158 C 110,160 90,158 65,148 Z";

    // Stage 1 (Peak Compressed): Loud peak clamped down by 6 dB to y=62 (-6 dBFS)
    const d1 = "M 65,148 " +
               "C 90,138 110,136 135,138 C 160,140 185,146 205,138 " +
               "C 230,128 260,76 300,62 C 330,50 360,66 385,128 " +
               "C 410,138 450,140 530,143 " +
               "L 530,153 " +
               "C 450,156 410,158 385,168 " +
               "C 360,230 330,246 300,234 C 260,220 230,168 205,158 " +
               "C 185,150 160,156 135,158 C 110,160 90,158 65,148 Z";

    // Stage 2 (Make-up Gain): Signal amplified +6 dB; whisper pulled away from noise floor; peak safely at -6 dBFS
    const d2 = "M 65,148 " +
               "C 90,128 110,124 135,126 C 160,128 185,133 205,126 " +
               "C 230,113 260,38 300,22 C 330,10 360,28 385,113 " +
               "C 410,128 450,130 530,133 " +
               "L 530,163 " +
               "C 450,166 410,168 385,183 " +
               "C 360,268 330,286 300,274 C 260,258 230,183 205,170 " +
               "C 185,163 160,168 135,170 C 110,172 90,168 65,148 Z";

    const wavePaths = [d0, d1, d2];
    let currentStep = 0;
    let playing = true;
    let scrubPos = 65;
    let lastTime = null;

    const waveEl = document.getElementById('waveShape');
    const threshEl = document.getElementById('threshGroup');
    const headroomEl = document.getElementById('headroomIndicator');
    const gainEl = document.getElementById('gainIndicator');
    const scrubEl = document.getElementById('scrubLine');
    const playToggleBtn = document.getElementById('playToggle');

    function updateView(step) {
      currentStep = step;
      waveEl.setAttribute('d', wavePaths[step]);

      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === step);
      }

      if (step === 0) {
        threshEl.style.opacity = '0';
        headroomEl.style.opacity = '0';
        gainEl.style.opacity = '0';
      } else if (step === 1) {
        threshEl.style.opacity = '1';
        headroomEl.style.opacity = '1';
        gainEl.style.opacity = '0';
      } else if (step === 2) {
        threshEl.style.opacity = '0.4';
        headroomEl.style.opacity = '0';
        gainEl.style.opacity = '1';
      }
    }

    function goToStep(step) {
      updateView(step);
    }

    function togglePlay() {
      playing = !playing;
      playToggleBtn.textContent = playing ? '⏸' : '▶';
    }

    // Initialize initial state
    updateView(0);

    // Step cycle loop (4000ms duration per stage for ample reading time)
    setInterval(() => {
      if (!playing) return;
      let next = (currentStep + 1) % 3;
      updateView(next);
    }, 4000);

    // Smooth 60fps Scrubber Animation
    function animateScrubber(timestamp) {
      if (!lastTime) lastTime = timestamp;
      const dt = timestamp - lastTime;
      lastTime = timestamp;

      if (playing) {
        scrubPos += 0.08 * dt;
        if (scrubPos > 530) scrubPos = 65;
        scrubEl.setAttribute('x1', scrubPos);
        scrubEl.setAttribute('x2', scrubPos);
      }

      requestAnimationFrame(animateScrubber);
    }
    requestAnimationFrame(animateScrubber);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }
    .grid-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: start;
    }
    @media (max-width: 520px) {
      .grid-layout { grid-template-columns: 1fr; }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .panel-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .badge-safe { background: #dcfce7; color: #15803d; }
    .badge-clipped { background: #fee2e2; color: #b91c1c; }
    .badge-warning { background: #fef3c7; color: #b45309; }

    .param-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .param-header {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 600;
    }
    .param-val {
      font-variant-numeric: tabular-nums;
      color: #0284c7;
    }
    input[type="range"] {
      width: 100%;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
    }

    .meter-container {
      display: flex;
      gap: 10px;
      height: 180px;
      background: #0f172a;
      border-radius: 8px;
      padding: 10px 12px;
      position: relative;
    }
    .scale {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      font-variant-numeric: tabular-nums;
      text-align: right;
      width: 38px;
      user-select: none;
    }
    .bars-wrap {
      flex: 1;
      display: flex;
      gap: 12px;
      position: relative;
    }
    .meter-col {
      flex: 1;
      position: relative;
      background: #1e293b;
      border-radius: 4px;
      overflow: hidden;
    }
    .meter-bar-peak {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, #22c55e 0%, #eab308 75%, #ef4444 95%);
      transition: height 0.2s ease;
      border-radius: 0 0 4px 4px;
    }
    .meter-ghost-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 3px;
      background: #38bdf8;
      box-shadow: 0 0 6px #38bdf8;
      transition: bottom 0.2s ease;
      z-index: 2;
    }
    .meter-clip-zone {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 10%;
      background: rgba(239, 68, 68, 0.2);
      border-bottom: 1px dashed #ef4444;
      pointer-events: none;
    }
    .meter-label {
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 10px;
      font-weight: 700;
      color: #cbd5e1;
      text-shadow: 0 1px 2px #000;
      z-index: 3;
    }

    .results-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .stat-card {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 8px;
    }
    .stat-lbl {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }
    .stat-val {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
    }

    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .btn-preset {
      flex: 1;
      min-width: 80px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      text-align: center;
    }
    .btn-preset:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="grid-layout">
    
    <div class="panel">
      <div class="panel-title">
        <span>Compressor Controls</span>
        <span id="statusBadge" class="badge badge-safe">Safe</span>
      </div>

      <div class="param-row">
        <div class="param-header">
          <span>Gain Reduction</span>
          <span id="grVal" class="param-val">-8 dB</span>
        </div>
        <input type="range" id="grSlider" min="-18" max="0" step="1" value="-8">
      </div>

      <div class="param-row">
        <div class="param-header">
          <span>Make-up Gain</span>
          <span id="muVal" class="param-val">+6 dB</span>
        </div>
        <input type="range" id="muSlider" min="0" max="14" step="1" value="6">
      </div>

      <div class="panel-title" style="margin-top: 4px;">Quick Presets</div>
      <div class="presets">
        <button class="btn-preset" onclick="setPreset(-8, 6)">Standard</button>
        <button class="btn-preset" onclick="setPreset(-14, 12)">Heavy Squish</button>
        <button class="btn-preset" onclick="setPreset(-4, 10)">Clipping</button>
        <button class="btn-preset" onclick="setPreset(0, 0)">Bypass</button>
      </div>
    </div>

    
    <div class="panel" style="padding: 8px;">
      <div class="panel-title" style="margin-bottom: 6px; padding: 0 4px;">
        <span>Peak & Ghost Levels</span>
        <span style="color:#0284c7; font-size:10px;">■ Ghost Note</span>
      </div>
      <div class="meter-container">
        <div class="scale">
          <span>+6 dB</span>
          <span>0 dBFS</span>
          <span>-18</span>
          <span>-36</span>
          <span>-54</span>
          <span>-70</span>
        </div>
        <div class="bars-wrap">
          <div class="meter-clip-zone"></div>
          
          <div class="meter-col">
            <div id="initBar" class="meter-bar-peak"></div>
            <div id="initGhost" class="meter-ghost-line"></div>
            <div class="meter-label">Initial</div>
          </div>
          
          <div class="meter-col">
            <div id="finalBar" class="meter-bar-peak"></div>
            <div id="finalGhost" class="meter-ghost-line"></div>
            <div class="meter-label">Processed</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="panel">
    <div class="panel-title">Dynamic Range & Headroom Results</div>
    <div class="results-grid">
      <div class="stat-card">
        <div class="stat-lbl">Final Peak</div>
        <div id="resPeak" class="stat-val">-4 dBFS</div>
      </div>
      <div class="stat-card">
        <div class="stat-lbl">Final Headroom</div>
        <div id="resHeadroom" class="stat-val">4 dB</div>
      </div>
      <div class="stat-card">
        <div class="stat-lbl">Final Ghost Note</div>
        <div id="resGhost" class="stat-val">-36 dBFS</div>
      </div>
      <div class="stat-card">
        <div class="stat-lbl">Ghost Note SNR</div>
        <div id="resSNR" class="stat-val">34 dB <span style="font-size:11px;color:#16a34a;font-weight:700;">(+6 dB)</span></div>
      </div>
    </div>
  </div>

  <script>
    const INIT_PEAK = -2;
    const INIT_GHOST = -42;
    const NOISE_FLOOR = -70;

    // Scale mapping: range is +6 dBFS down to -70 dBFS (total span = 76 dB)
    const MAX_DB = 6;
    const MIN_DB = -70;

    function dbToPct(db) {
      const clamped = Math.max(MIN_DB, Math.min(MAX_DB, db));
      return ((clamped - MIN_DB) / (MAX_DB - MIN_DB)) * 100;
    }

    const grSlider = document.getElementById('grSlider');
    const muSlider = document.getElementById('muSlider');
    const grVal = document.getElementById('grVal');
    const muVal = document.getElementById('muVal');

    const resPeak = document.getElementById('resPeak');
    const resHeadroom = document.getElementById('resHeadroom');
    const resGhost = document.getElementById('resGhost');
    const resSNR = document.getElementById('resSNR');
    const statusBadge = document.getElementById('statusBadge');

    const initBar = document.getElementById('initBar');
    const initGhost = document.getElementById('initGhost');
    const finalBar = document.getElementById('finalBar');
    const finalGhost = document.getElementById('finalGhost');

    function update() {
      const gr = parseInt(grSlider.value, 10);
      const mu = parseInt(muSlider.value, 10);

      grVal.textContent = (gr === 0 ? '0' : gr) + ' dB';
      muVal.textContent = '+' + mu + ' dB';

      const finalPeak = INIT_PEAK + gr + mu;
      const finalGhostVal = INIT_GHOST + mu;
      const headroom = 0 - finalPeak;
      const snr = finalGhostVal - NOISE_FLOOR;
      const snrImp = mu;

      // Update text outputs
      resPeak.textContent = `${finalPeak > 0 ? '+' : ''}${finalPeak} dBFS`;
      resHeadroom.textContent = `${headroom} dB`;
      resGhost.textContent = `${finalGhostVal} dBFS`;
      resSNR.innerHTML = `${snr} dB <span style="font-size:11px;color:#16a34a;font-weight:700;">(+${snrImp} dB)</span>`;

      // Status badge
      if (finalPeak > 0) {
        statusBadge.textContent = 'Clipped';
        statusBadge.className = 'badge badge-clipped';
        resPeak.style.color = '#b91c1c';
        resHeadroom.style.color = '#b91c1c';
      } else if (headroom < 1) {
        statusBadge.textContent = 'Low Headroom';
        statusBadge.className = 'badge badge-warning';
        resPeak.style.color = '#b45309';
        resHeadroom.style.color = '#b45309';
      } else {
        statusBadge.textContent = 'Safe';
        statusBadge.className = 'badge badge-safe';
        resPeak.style.color = '#0f172a';
        resHeadroom.style.color = '#0f172a';
      }

      // Update visual bars
      initBar.style.height = `${dbToPct(INIT_PEAK)}%`;
      initGhost.style.bottom = `${dbToPct(INIT_GHOST)}%`;

      finalBar.style.height = `${dbToPct(finalPeak)}%`;
      finalGhost.style.bottom = `${dbToPct(finalGhostVal)}%`;
    }

    function setPreset(gr, mu) {
      grSlider.value = gr;
      muSlider.value = mu;
      update();
    }

    grSlider.addEventListener('input', update);
    muSlider.addEventListener('input', update);

    update();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .toggle-btn {
      flex: 1;
      max-width: 190px;
      padding: 8px 12px;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .toggle-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    .diagram-svg {
      width: 100%;
      max-width: 520px;
      height: auto;
      overflow: visible;
    }

    .zone-headroom { fill: #fef3c7; stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 4 3; }
    .zone-usable { fill: #f0fdf4; stroke: #22c55e; stroke-width: 1.5; }
    .zone-noise { fill: #e2e8f0; stroke: #94a3b8; stroke-width: 1.5; }

    .clip-line { stroke: #ef4444; stroke-width: 2.5; stroke-dasharray: none; }
    .nominal-line { stroke: #0284c7; stroke-width: 1.5; stroke-dasharray: 4 3; }

    .text-scale { font-size: 11px; fill: #64748b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
    .text-scale-clip { font-size: 11px; fill: #ef4444; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
    .text-label { font-size: 12px; fill: #1e2945; font-weight: 700; }
    .text-sub { font-size: 10px; fill: #64748b; font-weight: 500; }

    .wave-path {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: d 0.4s ease, stroke 0.4s ease;
    }

    .wave-fill {
      transition: d 0.4s ease, fill 0.4s ease, opacity 0.4s ease;
    }

    .status-badge {
      font-size: 11px;
      font-weight: 700;
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="toggle-btn active" id="btnUncompressed" onclick="setMode('uncompressed')">
      ⚠️ Raw Signal
    </button>
    <button class="toggle-btn" id="btnOptimal" onclick="setMode('optimal')">
      ✓ Controlled Signal
    </button>
  </div>

  <svg class="diagram-svg" viewBox="0 0 500 370">
    <defs>
      
      <pattern id="noisePattern" width="6" height="6" patternUnits="userSpaceOnUse">
        <rect width="6" height="6" fill="#e2e8f0"/>
        <circle cx="1.5" cy="1.5" r="0.75" fill="#94a3b8"/>
        <circle cx="4.5" cy="4.5" r="0.75" fill="#94a3b8"/>
        <circle cx="4" cy="1.5" r="0.5" fill="#cbd5e1"/>
      </pattern>

      
      <linearGradient id="gradRaw" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#ef4444" stop-opacity="0.3"/>
        <stop offset="50%" stop-color="#3b82f6" stop-opacity="0.15"/>
        <stop offset="100%" stop-color="#ef4444" stop-opacity="0.3"/>
      </linearGradient>

      <linearGradient id="gradOpt" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#10b981" stop-opacity="0.25"/>
        <stop offset="50%" stop-color="#0284c7" stop-opacity="0.12"/>
        <stop offset="100%" stop-color="#10b981" stop-opacity="0.25"/>
      </linearGradient>
    </defs>

    
    <g transform="translate(68, 0)">
      
      <text x="-8" y="44" text-anchor="end" class="text-scale-clip">0 dBFS</text>
      <line x1="-4" y1="40" x2="0" y2="40" stroke="#ef4444" stroke-width="2"/>

      
      <text x="-8" y="98" text-anchor="end" class="text-scale">-18 dBFS</text>
      <line x1="-4" y1="94" x2="0" y2="94" stroke="#0284c7" stroke-width="1.5"/>

      
      <text x="-8" y="184" text-anchor="end" class="text-scale">-40 dBFS</text>
      <line x1="-4" y1="180" x2="0" y2="180" stroke="#cbd5e1" stroke-width="1"/>

      
      <text x="-8" y="294" text-anchor="end" class="text-scale">-80 dBFS</text>
      <line x1="-4" y1="290" x2="0" y2="290" stroke="#64748b" stroke-width="1.5"/>

      
      <text x="-8" y="344" text-anchor="end" class="text-scale">-96 dBFS</text>
      <line x1="-4" y1="340" x2="0" y2="340" stroke="#94a3b8" stroke-width="1.5"/>
    </g>

    
    <g transform="translate(70, 0)">
      
      <rect x="0" y="40" width="280" height="54" class="zone-headroom" rx="0"/>

      
      <rect x="0" y="94" width="280" height="196" class="zone-usable" rx="0"/>

      
      <rect x="0" y="290" width="280" height="50" fill="url(#noisePattern)" stroke="#94a3b8" stroke-width="1.5"/>

      
      <line x1="0" y1="40" x2="280" y2="40" class="clip-line"/>

      
      <line x1="0" y1="94" x2="280" y2="94" class="nominal-line"/>

      
      <path id="waveArea" class="wave-fill" fill="url(#gradRaw)"/>

      
      <line x1="0" y1="192" x2="280" y2="192" stroke="#94a3b8" stroke-width="1" stroke-dasharray="2 2" opacity="0.6"/>

      
      <path id="waveTop" class="wave-path" stroke="#ef4444"/>
      <path id="waveBottom" class="wave-path" stroke="#ef4444"/>

      
      <g id="whisperCallout" opacity="1" style="transition: opacity 0.3s;">
        <circle id="whisperDot" cx="60" cy="295" r="4" fill="#ef4444"/>
        <text id="whisperTxt" x="68" y="298" font-size="10" font-weight="700" fill="#dc2626">Drowned in hiss</text>
      </g>

      
      <g id="clipCallout" opacity="1" style="transition: opacity 0.3s;">
        <rect id="clipBox" x="195" y="28" width="80" height="20" rx="4" fill="#fee2e2" stroke="#ef4444" stroke-width="1"/>
        <text id="clipTxt" x="235" y="42" text-anchor="middle" font-size="10" font-weight="700" fill="#dc2626">CLIP DISTORTION</text>
      </g>
    </g>

    
    <g transform="translate(362, 0)">
      
      <path d="M 0 42 L 8 42 L 8 67 L 16 67 L 8 67 L 8 92 L 0 92" fill="none" stroke="#d97706" stroke-width="1.5"/>
      <text x="22" y="64" class="text-label" fill="#b45309">Headroom</text>
      <text x="22" y="77" class="text-sub">18 dB margin</text>

      
      <path d="M 0 98 L 8 98 L 8 192 L 16 192 L 8 192 L 8 286 L 0 286" fill="none" stroke="#16a34a" stroke-width="1.5"/>
      <text x="22" y="188" class="text-label" fill="#15803d">Usable Range</text>
      <text x="22" y="201" class="text-sub">80 dB dynamic span</text>

      
      <path d="M 0 294 L 8 294 L 8 315 L 16 315 L 8 315 L 8 336 L 0 336" fill="none" stroke="#64748b" stroke-width="1.5"/>
      <text x="22" y="312" class="text-label" fill="#475569">Noise Floor</text>
      <text x="22" y="325" class="text-sub">&lt; -80 dBFS</text>
    </g>
  </svg>

  <script>
    // Waveform coordinate profiles
    // Canvas baseline y = 192. Meter range: Top clip = 40, Noise floor = 290
    const rawTop = "M 0,192 C 20,192 35,285 55,296 C 75,296 90,200 110,185 C 130,165 150,120 175,70 C 195,36 210,40 230,40 C 245,40 260,110 280,192";
    const rawBottom = "M 0,192 C 20,192 35,99 55,88 C 75,88 90,184 110,199 C 130,219 150,264 175,314 C 195,348 210,344 230,344 C 245,344 260,274 280,192";
    const rawArea = "M 0,192 C 20,192 35,285 55,296 C 75,296 90,200 110,185 C 130,165 150,120 175,70 C 195,36 210,40 230,40 C 245,40 260,110 280,192 L 280,192 C 260,274 245,344 230,344 C 210,344 195,348 175,314 C 150,264 130,219 110,199 C 90,184 75,88 55,88 C 35,99 20,192 0,192 Z";

    const optTop = "M 0,192 C 20,192 35,215 55,225 C 75,225 90,195 110,185 C 130,170 150,140 175,102 C 195,78 210,75 230,75 C 245,75 260,135 280,192";
    const optBottom = "M 0,192 C 20,192 35,169 55,159 C 75,159 90,189 110,199 C 130,214 150,244 175,282 C 195,306 210,309 230,309 C 245,309 260,249 280,192";
    const optArea = "M 0,192 C 20,192 35,215 55,225 C 75,225 90,195 110,185 C 130,170 150,140 175,102 C 195,78 210,75 230,75 C 245,75 260,135 280,192 L 280,192 C 260,249 245,309 230,309 C 210,309 195,306 175,282 C 150,244 130,214 110,199 C 90,189 75,159 55,159 C 35,169 20,192 0,192 Z";

    function setMode(mode) {
      const isOpt = mode === 'optimal';
      
      document.getElementById('btnUncompressed').classList.toggle('active', !isOpt);
      document.getElementById('btnOptimal').classList.toggle('active', isOpt);

      const waveTop = document.getElementById('waveTop');
      const waveBottom = document.getElementById('waveBottom');
      const waveArea = document.getElementById('waveArea');
      
      waveTop.setAttribute('d', isOpt ? optTop : rawTop);
      waveBottom.setAttribute('d', isOpt ? optBottom : rawBottom);
      waveArea.setAttribute('d', isOpt ? optArea : rawArea);

      waveTop.setAttribute('stroke', isOpt ? '#059669' : '#ef4444');
      waveBottom.setAttribute('stroke', isOpt ? '#059669' : '#ef4444');
      waveArea.setAttribute('fill', isOpt ? 'url(#gradOpt)' : 'url(#gradRaw)');

      // Callout adjustments
      const whisperDot = document.getElementById('whisperDot');
      const whisperTxt = document.getElementById('whisperTxt');
      const clipBox = document.getElementById('clipBox');
      const clipTxt = document.getElementById('clipTxt');

      if (isOpt) {
        whisperDot.setAttribute('cy', '225');
        whisperDot.setAttribute('fill', '#059669');
        whisperTxt.setAttribute('y', '228');
        whisperTxt.setAttribute('fill', '#059669');
        whisperTxt.textContent = 'Clear whisper';

        clipBox.setAttribute('y', '62');
        clipBox.setAttribute('fill', '#dcfce7');
        clipBox.setAttribute('stroke', '#10b981');
        clipTxt.setAttribute('y', '76');
        clipTxt.setAttribute('fill', '#047857');
        clipTxt.textContent = 'PEAK: -6 dBFS SAFE';
      } else {
        whisperDot.setAttribute('cy', '295');
        whisperDot.setAttribute('fill', '#ef4444');
        whisperTxt.setAttribute('y', '298');
        whisperTxt.setAttribute('fill', '#dc2626');
        whisperTxt.textContent = 'Drowned in hiss';

        clipBox.setAttribute('y', '28');
        clipBox.setAttribute('fill', '#fee2e2');
        clipBox.setAttribute('stroke', '#ef4444');
        clipTxt.setAttribute('y', '42');
        clipTxt.setAttribute('fill', '#dc2626');
        clipTxt.textContent = 'CLIP DISTORTION';
      }
    }

    // Initialize raw state
    setMode('uncompressed');
  </script>
</body>
</html>

MUSTECH-9.1

Aligned learning resources

Related diagrams