<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Autocorrelation Pitch Detection</title>
  <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: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .controls-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:hover { background: #e2e8f0; }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-grow: 1;
      min-width: 160px;
      max-width: 260px;
    }

    .slider-wrap label {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
    }

    input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }

    .metric-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      white-space: nowrap;
      color: #1e2945;
    }
    .metric-badge.highlight {
      background: #f0fdf4;
      border-color: #86efac;
      color: #15803d;
    }

    .graph-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8fafc;
      border-radius: 8px;
      padding: 8px 6px 4px 6px;
    }

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

    .legend {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12px;
      font-weight: 600;
      padding: 0 6px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-line {
      width: 20px;
      height: 2px;
    }

    .calc-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 13px;
    }

    .calc-formula {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 700;
      color: #1e3a8a;
      font-size: 13.5px;
    }

    @media (max-width: 480px) {
      body { padding: 6px; gap: 6px; }
      .toolbar { gap: 6px; }
      .slider-wrap { max-width: 100%; order: 3; width: 100%; }
      .btn { padding: 5px 8px; font-size: 12px; }
      .calc-box { font-size: 12px; padding: 6px 10px; }
      .calc-formula { font-size: 12px; }
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="controls-left">
      <button class="btn" id="playBtn" aria-label="Toggle autoplay animation">▶ Auto</button>
      <button class="btn" id="lockPeakBtn" aria-label="Lock lag to fundamental period">Target <i>τ</i> = <i>T</i></button>
    </div>
    <div class="slider-wrap">
      <label for="tauSlider">Lag <i>τ</i>:</label>
      <input type="range" id="tauSlider" min="0" max="10" step="0.05" value="0">
    </div>
    <div class="metric-badge" id="tauBadge"><i>τ</i> = 0.00 ms</div>
  </div>

  <div class="graph-section">
    <div class="legend">
      <div class="legend-item">
        <div class="legend-line" style="background:#1e2945;"></div>
        <span><i>x</i>[<i>n</i>] (Original)</span>
      </div>
      <div class="legend-item">
        <div class="legend-line" style="border-top:2px dashed #0284c7;"></div>
        <span><i>x</i>[<i>n</i> − <i>τ</i>] (Lagged)</span>
      </div>
    </div>

    
    <svg id="svgTop" viewBox="0 0 560 115" aria-label="Waveforms plot">
      
      <line x1="40" y1="16" x2="490" y2="16" stroke="#e2e8f0" stroke-width="1" />
      <line x1="40" y1="57" x2="490" y2="57" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,3" />
      <line x1="40" y1="98" x2="490" y2="98" stroke="#e2e8f0" stroke-width="1" />

      
      <line x1="40" y1="16" x2="40" y2="98" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="40" y1="57" x2="490" y2="57" stroke="#94a3b8" stroke-width="1.5" />

      
      <text x="32" y="20" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">+1</text>
      <text x="32" y="61" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">0</text>
      <text x="32" y="102" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">-1</text>
      <text x="496" y="61" font-size="12" font-weight="600" fill="#475569" text-anchor="start">Time <tspan font-style="italic">t</tspan></text>

      <path id="pathOrig" fill="none" stroke="#1e2945" stroke-width="2.2" />
      <path id="pathLagged" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="5,4" />
    </svg>

    
    <svg id="svgBottom" viewBox="0 0 560 125" aria-label="Autocorrelation plot">
      
      <text x="40" y="14" font-size="13" font-weight="700" fill="#1e2945">Autocorrelation <tspan font-style="italic">R</tspan>(<tspan font-style="italic">τ</tspan>)</text>

      
      <line x1="40" y1="24" x2="490" y2="24" stroke="#e2e8f0" stroke-width="1" />
      <line x1="40" y1="65" x2="490" y2="65" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,3" />
      <line x1="40" y1="106" x2="490" y2="106" stroke="#e2e8f0" stroke-width="1" />

      
      <line x1="40" y1="24" x2="40" y2="106" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="40" y1="65" x2="490" y2="65" stroke="#94a3b8" stroke-width="1.5" />

      
      <text x="32" y="28" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">+1</text>
      <text x="32" y="69" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">0</text>
      <text x="32" y="110" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">-1</text>
      <text x="496" y="69" font-size="12" font-weight="600" fill="#475569" text-anchor="start"><tspan font-style="italic">τ</tspan> (ms)</text>

      
      <line x1="244.5" y1="60" x2="244.5" y2="70" stroke="#059669" stroke-width="1.5" />
      <text x="244.5" y="83" font-size="12" font-weight="700" fill="#059669" text-anchor="middle"><tspan font-style="italic">τ</tspan> = <tspan font-style="italic">T</tspan> (4.55 ms)</text>

      <line x1="449.1" y1="60" x2="449.1" y2="70" stroke="#64748b" stroke-width="1.5" />
      <text x="449.1" y="83" font-size="11" font-weight="600" fill="#64748b" text-anchor="middle">2<tspan font-style="italic">T</tspan> (9.09 ms)</text>

      
      <path id="pathRtau" fill="none" stroke="#94a3b8" stroke-width="1.5" />
      <path id="pathRtauActive" fill="none" stroke="#0284c7" stroke-width="2.5" />

      
      <line id="tauCursorLine" x1="40" y1="24" x2="40" y2="106" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3,3" />
      <circle id="tauPoint" cx="40" cy="24" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
    </svg>
  </div>

  <div class="calc-box">
    <div><strong>Detected Pitch:</strong></div>
    <div class="calc-formula" id="calcDisplay"><i>f</i><sub>0</sub> = 1000 / <i>T</i> = 220.0 Hz</div>
    <div id="alignmentStatus" style="font-weight:600; color:#475569;">Lag: <i>τ</i> = 0.00 ms</div>
  </div>

  <script>
    // Signal Constants: Fundamental f0 = 220 Hz => Period T = 4.54545 ms
    const F0 = 220.0;
    const PERIOD = 1000.0 / F0; // ~4.545 ms
    const T_MAX_MS = 20.0; // Top plot domain
    const TAU_MAX_MS = 10.0; // Bottom plot domain

    // Waveform formula: Rich harmonic voice-like wave
    function wave(tMs) {
      const w = 2 * Math.PI * (F0 / 1000.0);
      const val = Math.sin(w * tMs) + 0.45 * Math.sin(2 * w * tMs + 0.4) + 0.25 * Math.sin(3 * w * tMs + 0.8);
      return val / 1.7;
    }

    // Theoretical Autocorrelation for harmonic voice wave
    function rTau(tauMs) {
      const w = 2 * Math.PI * (F0 / 1000.0);
      const r = Math.cos(w * tauMs) + (0.45**2) * Math.cos(2 * w * tauMs) + (0.25**2) * Math.cos(3 * w * tauMs);
      const r0 = 1 + (0.45**2) + (0.25**2);
      return r / r0;
    }

    // Graph bounds aligned to viewBox
    const topX0 = 40, topX1 = 490, topY0 = 16, topY1 = 98, topYMid = 57;
    const botX0 = 40, botX1 = 490, botY0 = 24, botY1 = 106, botYMid = 65;

    function tToXTop(t) { return topX0 + (t / T_MAX_MS) * (topX1 - topX0); }
    function yToYTop(y) { return topYMid - y * (topYMid - topY0); }

    function tauToXBot(tau) { return botX0 + (tau / TAU_MAX_MS) * (botX1 - botX0); }
    function rToYBot(r) { return botYMid - r * (botYMid - botY0); }

    // Pre-calculate full R(tau) path
    const pathRtau = document.getElementById('pathRtau');
    let rD = '';
    for (let tau = 0; tau <= TAU_MAX_MS; tau += 0.05) {
      const x = tauToXBot(tau);
      const y = rToYBot(rTau(tau));
      rD += (tau === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : ` L ${x.toFixed(1)} ${y.toFixed(1)}`);
    }
    pathRtau.setAttribute('d', rD);

    // Pre-calculate fixed original waveform path x[n]
    const pathOrig = document.getElementById('pathOrig');
    let origD = '';
    for (let t = 0; t <= T_MAX_MS; t += 0.1) {
      const x = tToXTop(t);
      const y = yToYTop(wave(t));
      origD += (t === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : ` L ${x.toFixed(1)} ${y.toFixed(1)}`);
    }
    pathOrig.setAttribute('d', origD);

    const pathLagged = document.getElementById('pathLagged');
    const pathRtauActive = document.getElementById('pathRtauActive');
    const tauCursorLine = document.getElementById('tauCursorLine');
    const tauPoint = document.getElementById('tauPoint');
    const tauSlider = document.getElementById('tauSlider');
    const tauBadge = document.getElementById('tauBadge');
    const calcDisplay = document.getElementById('calcDisplay');
    const alignmentStatus = document.getElementById('alignmentStatus');
    const playBtn = document.getElementById('playBtn');
    const lockPeakBtn = document.getElementById('lockPeakBtn');

    let currentTau = 0.0;
    let isPlaying = false;
    let animId = null;

    function render(tau) {
      currentTau = tau;
      tauSlider.value = tau.toFixed(2);
      tauBadge.innerHTML = `<i>τ</i> = ${tau.toFixed(2)} ms`;

      // 1. Update shifted wave path
      let lagD = '';
      for (let t = 0; t <= T_MAX_MS; t += 0.1) {
        const x = tToXTop(t);
        const y = yToYTop(wave(t - tau));
        lagD += (t === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : ` L ${x.toFixed(1)} ${y.toFixed(1)}`);
      }
      pathLagged.setAttribute('d', lagD);

      // 2. Update active R(tau) segment
      let activeD = '';
      for (let t = 0; t <= tau; t += 0.05) {
        const x = tauToXBot(t);
        const y = rToYBot(rTau(t));
        activeD += (t === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : ` L ${x.toFixed(1)} ${y.toFixed(1)}`);
      }
      pathRtauActive.setAttribute('d', activeD);

      // 3. Update cursor and point
      const curX = tauToXBot(tau);
      const curY = rToYBot(rTau(tau));
      tauCursorLine.setAttribute('x1', curX);
      tauCursorLine.setAttribute('x2', curX);
      tauPoint.setAttribute('cx', curX);
      tauPoint.setAttribute('cy', curY);

      // 4. Calculate pitch / alignment feedback
      const isInitial = (tau < 0.3);
      const isFirstPeriod = Math.abs(tau - PERIOD) < 0.25;
      const isSecondPeriod = Math.abs(tau - 2 * PERIOD) < 0.25;

      if (isFirstPeriod) {
        tauBadge.className = 'metric-badge highlight';
        alignmentStatus.innerHTML = `<span style="color:#15803d;font-weight:700;">✓ Peak locked at Period <i>T</i> = ${tau.toFixed(2)} ms</span>`;
        const estFreq = (1000.0 / tau).toFixed(1);
        calcDisplay.innerHTML = `<i>f</i><sub>0</sub> = 1000 / ${tau.toFixed(2)} ms = ${estFreq} Hz`;
      } else if (isInitial) {
        tauBadge.className = 'metric-badge';
        alignmentStatus.innerHTML = `Zero lag: <i>τ</i> = 0.00 ms (trivial peak)`;
        calcDisplay.innerHTML = `<i>f</i><sub>0</sub> = 1000 / <i>T</i> (sweep lag <i>τ</i> to find <i>T</i>)`;
      } else if (isSecondPeriod) {
        tauBadge.className = 'metric-badge highlight';
        alignmentStatus.innerHTML = `<span style="color:#0284c7;font-weight:700;">Harmonic peak at 2<i>T</i> = ${tau.toFixed(2)} ms</span>`;
        calcDisplay.innerHTML = `<i>f</i><sub>0</sub> = 2000 / ${tau.toFixed(2)} ms = ${(2000.0 / tau).toFixed(1)} Hz`;
      } else {
        tauBadge.className = 'metric-badge';
        alignmentStatus.innerHTML = `Correlation <i>R</i>(<i>τ</i>) = ${rTau(tau).toFixed(2)}`;
        calcDisplay.innerHTML = `<i>f</i><sub>0</sub> = 1000 / <i>T</i> (sweep lag <i>τ</i> to find peak)`;
      }
    }

    // Auto Play Animation loop
    const playSpeed = 0.04;
    function animStep() {
      let nextTau = currentTau + playSpeed;
      if (nextTau > TAU_MAX_MS) {
        nextTau = 0.0;
      }
      render(nextTau);
      if (isPlaying) {
        animId = requestAnimationFrame(animStep);
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.innerHTML = '⏸ Pause';
        playBtn.classList.add('active');
        animId = requestAnimationFrame(animStep);
      } else {
        playBtn.innerHTML = '▶ Auto';
        playBtn.classList.remove('active');
        if (animId) cancelAnimationFrame(animId);
      }
    }

    playBtn.addEventListener('click', togglePlay);

    tauSlider.addEventListener('input', (e) => {
      if (isPlaying) togglePlay();
      render(parseFloat(e.target.value));
    });

    lockPeakBtn.addEventListener('click', () => {
      if (isPlaying) togglePlay();
      render(PERIOD);
    });

    // Initial render
    render(0.0);
  </script>
</body>
</html>

Principles of Pitch Detection and Monophonic Re-Tuning

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

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 540px;
      margin-bottom: 4px;
      gap: 6px;
      flex-wrap: wrap;
    }

    .btn-group {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .step-btn {
      padding: 4px 8px;
      font-size: 11.5px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 5px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    }

    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .step-btn:hover:not(.active) {
      background: #e2e8f0;
    }

    .audio-btn {
      padding: 4px 8px;
      font-size: 11.5px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 5px;
      background: #f8fafc;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      transition: background-color 0.15s;
    }
    .audio-btn:hover {
      background: #e2e8f0;
    }
    .audio-btn:active {
      background: #cbd5e1;
    }

    .info-bar {
      width: 100%;
      max-width: 540px;
      font-size: 11px;
      line-height: 1.35;
      color: #475569;
      background: #f1f5f9;
      border-radius: 4px;
      padding: 4px 8px;
      margin-bottom: 4px;
      min-height: 24px;
      display: flex;
      align-items: center;
    }

    .info-bar strong {
      color: #1e2945;
      margin-right: 4px;
    }

    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 540px;
      display: flex;
      justify-content: center;
    }

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

    .axis-line { stroke: #cbd5e1; stroke-width: 1.5; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; stroke-dasharray: 3,3; }
    .axis-text { font-size: 10.5px; fill: #64748b; font-weight: 500; font-family: inherit; }
    .label-title { font-size: 11.5px; font-weight: 700; fill: #1e2945; font-family: inherit; }
    
    .peak-stem { stroke-linecap: round; }
    .peak-tag { font-size: 10px; font-weight: 700; text-anchor: middle; }

    .guide-line {
      stroke: #2563eb;
      stroke-width: 1.5;
      stroke-dasharray: 4,4;
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .guide-badge {
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .anim-layer {
      transition: opacity 0.35s ease;
    }

    @media (max-width: 420px) {
      .step-btn {
        padding: 3px 6px;
        font-size: 10.5px;
      }
      .audio-btn {
        font-size: 10.5px;
        padding: 3px 6px;
      }
      .info-bar {
        font-size: 10px;
      }
      .axis-text {
        font-size: 9.5px;
      }
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="btn-group" id="stepButtons">
      <button class="step-btn active" data-step="0">1. Spectrum</button>
      <button class="step-btn" data-step="1">2. Downsample</button>
      <button class="step-btn" data-step="2">3. Product (HPS)</button>
    </div>
    <button class="audio-btn" id="toneBtn" title="Play detected 150 Hz tone">🔊 150 Hz</button>
  </div>

  <div class="info-bar" id="infoText">
    <strong>Step 1:</strong> Original spectrum showing fundamental f₀ (150 Hz) and harmonics.
  </div>

  <div class="diagram-area">
    <svg viewBox="0 0 540 248" id="hpsSvg">
      <defs>
        <linearGradient id="gradProd" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#2563eb" stop-opacity="0.85"/>
          <stop offset="100%" stop-color="#2563eb" stop-opacity="0.05"/>
        </linearGradient>
      </defs>

      
      <line x1="75" y1="20" x2="75" y2="226" class="grid-line"/>
      <line x1="184" y1="20" x2="184" y2="226" class="grid-line"/>
      <line x1="293" y1="20" x2="293" y2="226" class="grid-line"/>
      <line x1="402" y1="20" x2="402" y2="226" class="grid-line"/>
      <line x1="510" y1="20" x2="510" y2="226" class="grid-line"/>

      
      <line x1="184" y1="20" x2="184" y2="226" class="guide-line" id="guide150"/>
      
      
      <g id="guideBadge" class="guide-badge">
        <rect x="148" y="2" width="72" height="15" rx="3.5" fill="#2563eb"/>
        <text x="184" y="13" fill="#fff" font-size="9" font-weight="700" text-anchor="middle">f₀ = 150 Hz</text>
      </g>

      
      <g id="row1" class="anim-layer">
        <text x="12" y="52" class="label-title">X(f)</text>
        <line x1="55" y1="58" x2="515" y2="58" class="axis-line"/>
        
        
        
        <line x1="184" y1="58" x2="184" y2="27" stroke="#0ea5e9" stroke-width="3" class="peak-stem"/>
        <circle cx="184" cy="27" r="3" fill="#0284c7"/>
        <text x="184" y="22" id="tag150_r1" class="peak-tag" fill="#0369a1">150</text>

        
        <line x1="293" y1="58" x2="293" y2="33" stroke="#0ea5e9" stroke-width="2.5" class="peak-stem"/>
        <circle cx="293" cy="33" r="2.5" fill="#0284c7"/>
        <text x="293" y="28" class="peak-tag" fill="#0369a1">300</text>

        
        <line x1="402" y1="58" x2="402" y2="38" stroke="#0ea5e9" stroke-width="2.5" class="peak-stem"/>
        <circle cx="402" cy="38" r="2.5" fill="#0284c7"/>
        <text x="402" y="33" class="peak-tag" fill="#0369a1">450</text>

        
        <line x1="510" y1="58" x2="510" y2="43" stroke="#0ea5e9" stroke-width="2" class="peak-stem"/>
        <circle cx="510" cy="43" r="2" fill="#0284c7"/>
        <text x="510" y="38" class="peak-tag" fill="#0369a1">600</text>
      </g>

      
      <g id="row2" class="anim-layer" style="opacity: 0.15;">
        <text x="12" y="108" class="label-title">X(2f)</text>
        <line x1="55" y1="114" x2="515" y2="114" class="axis-line"/>

        
        <line x1="130" y1="114" x2="130" y2="90" stroke="#8b5cf6" stroke-width="2" class="peak-stem"/>
        <circle cx="130" cy="90" r="2" fill="#7c3aed"/>
        <text x="130" y="85" class="peak-tag" fill="#6d28d9">75</text>

        <line x1="184" y1="114" x2="184" y2="80" stroke="#8b5cf6" stroke-width="3" class="peak-stem"/>
        <circle cx="184" cy="80" r="3" fill="#7c3aed"/>
        <text x="184" y="75" class="peak-tag" fill="#6d28d9">150</text>

        <line x1="238" y1="114" x2="238" y2="92" stroke="#8b5cf6" stroke-width="2" class="peak-stem"/>
        <circle cx="238" cy="92" r="2" fill="#7c3aed"/>
        <text x="238" y="87" class="peak-tag" fill="#6d28d9">225</text>

        <line x1="293" y1="114" x2="293" y2="98" stroke="#8b5cf6" stroke-width="2" class="peak-stem"/>
        <circle cx="293" cy="98" r="2" fill="#7c3aed"/>
        <text x="293" y="93" class="peak-tag" fill="#6d28d9">300</text>
      </g>

      
      <g id="row3" class="anim-layer" style="opacity: 0.15;">
        <text x="12" y="164" class="label-title">X(3f)</text>
        <line x1="55" y1="170" x2="515" y2="170" class="axis-line"/>

        
        <line x1="111" y1="170" x2="111" y2="150" stroke="#ec4899" stroke-width="2" class="peak-stem"/>
        <circle cx="111" cy="150" r="2" fill="#db2777"/>
        <text x="111" y="145" class="peak-tag" fill="#be185d">50</text>

        <line x1="148" y1="170" x2="148" y2="152" stroke="#ec4899" stroke-width="2" class="peak-stem"/>
        <circle cx="148" cy="152" r="2" fill="#db2777"/>
        <text x="148" y="147" class="peak-tag" fill="#be185d">100</text>

        <line x1="184" y1="170" x2="184" y2="138" stroke="#ec4899" stroke-width="3" class="peak-stem"/>
        <circle cx="184" cy="138" r="3" fill="#db2777"/>
        <text x="184" y="133" class="peak-tag" fill="#be185d">150</text>

        <line x1="220" y1="170" x2="220" y2="156" stroke="#ec4899" stroke-width="2" class="peak-stem"/>
        <circle cx="220" cy="156" r="2" fill="#db2777"/>
        <text x="220" y="151" class="peak-tag" fill="#be185d">200</text>
      </g>

      
      <g id="rowProd" class="anim-layer" style="opacity: 0.15;">
        <text x="12" y="220" class="label-title">∏ X(rf)</text>
        <line x1="55" y1="226" x2="515" y2="226" class="axis-line"/>

        
        <polygon points="184,188 174,226 194,226" fill="url(#gradProd)"/>
        <line x1="184" y1="226" x2="184" y2="188" stroke="#2563eb" stroke-width="4" stroke-linecap="round"/>
        <circle cx="184" cy="188" r="3.5" fill="#1d4ed8"/>
        <text x="184" y="182" fill="#1d4ed8" font-size="10.5" font-weight="700" text-anchor="middle">f₀ (150 Hz)</text>

        
        <line x1="293" y1="226" x2="293" y2="223" stroke="#94a3b8" stroke-width="1.5"/>
      </g>

      
      <text x="75" y="242" class="axis-text" text-anchor="middle">0</text>
      <text x="184" y="242" class="axis-text" text-anchor="middle" font-weight="700" fill="#2563eb">150 Hz</text>
      <text x="293" y="242" class="axis-text" text-anchor="middle">300 Hz</text>
      <text x="402" y="242" class="axis-text" text-anchor="middle">450 Hz</text>
      <text x="510" y="242" class="axis-text" text-anchor="middle">600 Hz</text>
    </svg>
  </div>

  <script>
    const buttons = document.querySelectorAll('.step-btn');
    const row1 = document.getElementById('row1');
    const row2 = document.getElementById('row2');
    const row3 = document.getElementById('row3');
    const rowProd = document.getElementById('rowProd');
    const guide150 = document.getElementById('guide150');
    const guideBadge = document.getElementById('guideBadge');
    const tag150_r1 = document.getElementById('tag150_r1');
    const infoText = document.getElementById('infoText');
    const toneBtn = document.getElementById('toneBtn');

    let currentStep = 0;
    let autoTimer = null;

    const descriptions = [
      "<strong>Step 1:</strong> Original spectrum showing fundamental f₀ (150 Hz) and harmonic series (300, 450, 600 Hz).",
      "<strong>Step 2:</strong> Spectra compressed by factors 2 and 3 — harmonic peaks all align at f₀ = 150 Hz.",
      "<strong>Step 3:</strong> Pointwise product multiplies matching peaks, leaving a single dominant spike at true f₀ = 150 Hz."
    ];

    function renderStep(step) {
      currentStep = step;
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      infoText.innerHTML = descriptions[step];

      if (step === 0) {
        // Step 1: Input spectrum highlighted, others ghosted
        row1.style.opacity = '1';
        row2.style.opacity = '0.15';
        row3.style.opacity = '0.15';
        rowProd.style.opacity = '0.15';
        guide150.style.opacity = '0';
        guideBadge.style.opacity = '0';
        tag150_r1.style.opacity = '1';
      } else if (step === 1) {
        // Step 2: Downsampled spectra highlighted with alignment guide
        row1.style.opacity = '1';
        row2.style.opacity = '1';
        row3.style.opacity = '1';
        rowProd.style.opacity = '0.15';
        guide150.style.opacity = '0.9';
        guideBadge.style.opacity = '1';
        tag150_r1.style.opacity = '0'; // Hide individual tag when f0 badge is active
      } else if (step === 2) {
        // Step 3: Product spectrum prominent
        row1.style.opacity = '0.35';
        row2.style.opacity = '0.35';
        row3.style.opacity = '0.35';
        rowProd.style.opacity = '1';
        guide150.style.opacity = '0.9';
        guideBadge.style.opacity = '1';
        tag150_r1.style.opacity = '0';
      }
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        clearInterval(autoTimer);
        renderStep(parseInt(btn.getAttribute('data-step'), 10));
        startAutoCycle();
      });
    });

    function startAutoCycle() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const next = (currentStep + 1) % 3;
        renderStep(next);
      }, 5000);
    }

    function playTone(freq, dur = 0.5) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    toneBtn.addEventListener('click', () => {
      playTone(150, 0.6);
    });

    renderStep(0);
    startAutoCycle();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pitch Detection & Re-Tuning Meter</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #0f172a;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
    }

    .widget {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Meter Section */
    .meter-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border-radius: 10px;
      padding: 8px 12px 10px;
    }

    .meter-svg {
      width: 100%;
      max-width: 290px;
      height: auto;
      display: block;
    }

    .needle {
      transform-origin: 150px 115px;
      transition: transform 0.15s ease-out;
    }

    .status-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 12px;
      border-radius: 9999px;
      margin-top: 4px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, color 0.2s;
    }

    .flat-state { background: #fef3c7; color: #92400e; }
    .tune-state { background: #dcfce7; color: #166534; }
    .sharp-state { background: #e0f2fe; color: #075985; }

    /* Interactive Controls */
    .controls-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #f8fafc;
      border-radius: 10px;
      padding: 10px 12px;
    }

    .control-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
    }

    .val-highlight {
      font-size: 15px;
      color: #0284c7;
      font-variant-numeric: tabular-nums;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .slider-limit {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      white-space: nowrap;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      accent-color: #0284c7;
      cursor: pointer;
    }

    .preset-btns {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .btn {
      flex: 1;
      min-width: 80px;
      padding: 6px 4px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e293b;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.15s, border-color 0.15s;
    }

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

    .btn-audio {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .btn-audio:hover {
      background: #0369a1;
      border-color: #0369a1;
    }

    /* Calculation Steps */
    .steps-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
    }

    @media (min-width: 440px) {
      .steps-grid {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    .calc-card {
      background: #f8fafc;
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .step-num {
      font-size: 10px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .step-formula {
      font-size: 11px;
      color: #64748b;
      font-family: monospace;
    }

    .step-res {
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
      margin-top: 1px;
    }
  </style>
</head>
<body>

<div class="widget">
  
  <div class="meter-section">
    <svg class="meter-svg" viewBox="0 0 300 135" aria-label="Pitch Tuner Gauge">
      <defs>
        <linearGradient id="arcGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#f59e0b" />
          <stop offset="35%" stop-color="#f59e0b" />
          <stop offset="47%" stop-color="#16a34a" />
          <stop offset="53%" stop-color="#16a34a" />
          <stop offset="65%" stop-color="#0284c7" />
          <stop offset="100%" stop-color="#0284c7" />
        </linearGradient>
      </defs>

      
      <path d="M 45 115 A 105 105 0 0 1 255 115" fill="none" stroke="#e2e8f0" stroke-width="10" stroke-linecap="round" />
      
      <path d="M 55 115 A 95 95 0 0 1 245 115" fill="none" stroke="url(#arcGrad)" stroke-width="6" stroke-linecap="round" />

      
      
      <line x1="61" y1="83" x2="51" y2="79" stroke="#334155" stroke-width="2" />
      <text x="36" y="83" font-size="11" font-weight="700" fill="#1e293b" text-anchor="middle">-50¢</text>

      
      <line x1="96" y1="37" x2="90" y2="29" stroke="#334155" stroke-width="2" />
      <text x="80" y="24" font-size="11" font-weight="700" fill="#1e293b" text-anchor="middle">-25¢</text>

      
      <line x1="150" y1="10" x2="150" y2="23" stroke="#16a34a" stroke-width="3" stroke-linecap="round" />
      <text x="150" y="36" font-size="11" font-weight="800" fill="#166534" text-anchor="middle">A4 (0¢)</text>

      
      <line x1="204" y1="37" x2="210" y2="29" stroke="#334155" stroke-width="2" />
      <text x="220" y="24" font-size="11" font-weight="700" fill="#1e293b" text-anchor="middle">+25¢</text>

      
      <line x1="239" y1="83" x2="249" y2="79" stroke="#334155" stroke-width="2" />
      <text x="264" y="83" font-size="11" font-weight="700" fill="#1e293b" text-anchor="middle">+50¢</text>

      
      <g id="needleGroup" class="needle" transform="rotate(0, 150, 115)">
        <polygon points="148,115 152,115 151,18 149,18" fill="#0f172a" />
        <circle cx="150" cy="115" r="6" fill="#0f172a" />
        <circle cx="150" cy="115" r="2.5" fill="#ffffff" />
      </g>
    </svg>

    <div id="statusBadge" class="status-badge flat-state">
      <span id="centsDisplay">-19.78 cents</span>
      <span id="tuneNote">(Correction: +19.78¢)</span>
    </div>
  </div>

  
  <div class="controls-section">
    <div class="control-header">
      <span>Vocal Sung Pitch (ƒ₀)</span>
      <span class="val-highlight"><span id="freqDisplay">435.0</span> Hz</span>
    </div>
    <div class="slider-wrap">
      <span class="slider-limit">430 Hz</span>
      <input type="range" id="freqSlider" min="430" max="450" step="0.1" value="435.0" aria-label="Frequency Slider">
      <span class="slider-limit">450 Hz</span>
    </div>
    <div class="preset-btns">
      <button class="btn" id="btn435">435 Hz (Flat)</button>
      <button class="btn" id="btn440">440 Hz (In Tune)</button>
      <button class="btn" id="btn445">445 Hz (Sharp)</button>
      <button class="btn btn-audio" id="btnAudio">🔊 Listen</button>
    </div>
  </div>

  
  <div class="steps-grid">
    <div class="calc-card">
      <span class="step-num">Step 1: Ratio</span>
      <span class="step-formula">ƒ_target / ƒ₀</span>
      <span class="step-res" id="step1Ratio">440 / 435 = 1.01149</span>
    </div>
    <div class="calc-card">
      <span class="step-num">Step 2: Octaves</span>
      <span class="step-formula">log₂(Ratio)</span>
      <span class="step-res" id="step2Log">log₂(1.011) = 0.01648</span>
    </div>
    <div class="calc-card">
      <span class="step-num">Step 3: Shift</span>
      <span class="step-formula">1200 × log₂(Ratio)</span>
      <span class="step-res" id="step3Cents">+19.78 cents</span>
    </div>
  </div>
</div>

<script>
  const targetFreq = 440; // A4 standard
  const slider = document.getElementById('freqSlider');
  const freqDisplay = document.getElementById('freqDisplay');
  const needleGroup = document.getElementById('needleGroup');
  const statusBadge = document.getElementById('statusBadge');
  const centsDisplay = document.getElementById('centsDisplay');
  const tuneNote = document.getElementById('tuneNote');
  const step1Ratio = document.getElementById('step1Ratio');
  const step2Log = document.getElementById('step2Log');
  const step3Cents = document.getElementById('step3Cents');
  const btnAudio = document.getElementById('btnAudio');

  let audioCtx = null;

  function updateTuner(f0) {
    freqDisplay.textContent = f0.toFixed(1);

    // Step 1: Ratio
    const ratio = targetFreq / f0;
    
    // Step 2: Log2 of ratio
    const octaves = Math.log2(ratio);

    // Step 3: Shift in cents required to reach 440 Hz
    const shiftCents = 1200 * octaves;
    
    // Pitch error of sung note relative to 440 Hz (negative = flat, positive = sharp)
    const pitchOffsetCents = 1200 * Math.log2(f0 / targetFreq);

    // UI Needle Angle: map -50 cents -> -70 deg, +50 cents -> +70 deg
    const clampedOffset = Math.max(-50, Math.min(50, pitchOffsetCents));
    const angle = (clampedOffset / 50) * 70;
    needleGroup.setAttribute('transform', `rotate(${angle.toFixed(2)}, 150, 115)`);

    // Update Status Badge
    const sign = pitchOffsetCents >= 0 ? '+' : '';
    const shiftSign = shiftCents >= 0 ? '+' : '';
    centsDisplay.textContent = `${sign}${pitchOffsetCents.toFixed(2)} cents`;

    if (Math.abs(pitchOffsetCents) < 1.0) {
      statusBadge.className = 'status-badge tune-state';
      tuneNote.textContent = '✓ In Tune';
    } else if (pitchOffsetCents < 0) {
      statusBadge.className = 'status-badge flat-state';
      tuneNote.textContent = `Shift: ${shiftSign}${shiftCents.toFixed(2)}¢`;
    } else {
      statusBadge.className = 'status-badge sharp-state';
      tuneNote.textContent = `Shift: ${shiftSign}${shiftCents.toFixed(2)}¢`;
    }

    // Update Calculation Cards
    step1Ratio.textContent = `440 / ${f0.toFixed(1)} = ${ratio.toFixed(5)}`;
    step2Log.textContent = `log₂(${ratio.toFixed(4)}) = ${octaves.toFixed(5)}`;
    step3Cents.textContent = `${shiftSign}${shiftCents.toFixed(2)} cents`;
  }

  slider.addEventListener('input', (e) => {
    updateTuner(parseFloat(e.target.value));
  });

  document.getElementById('btn435').addEventListener('click', () => {
    slider.value = 435.0;
    updateTuner(435.0);
  });

  document.getElementById('btn440').addEventListener('click', () => {
    slider.value = 440.0;
    updateTuner(440.0);
  });

  document.getElementById('btn445').addEventListener('click', () => {
    slider.value = 445.0;
    updateTuner(445.0);
  });

  // Audio preview
  btnAudio.addEventListener('click', () => {
    const f0 = parseFloat(slider.value);
    if (!audioCtx) {
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }

    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'triangle';
    osc.frequency.setValueAtTime(f0, audioCtx.currentTime);

    // Envelope
    gain.gain.setValueAtTime(0.001, audioCtx.currentTime);
    gain.gain.linearRampToValueAtTime(0.18, audioCtx.currentTime + 0.05);
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.55);

    osc.connect(gain);
    gain.connect(audioCtx.destination);

    osc.start();
    osc.stop(audioCtx.currentTime + 0.55);
  });

  // Initialize with 435 Hz
  updateTuner(435.0);
</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 {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 540px;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .segmented {
      display: flex;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
      gap: 2px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .sound-btn {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

    .sound-btn:active {
      background: #f8fafc;
    }

    .display-box {
      width: 100%;
      max-width: 540px;
      height: 250px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
    }

    .view-panel {
      position: absolute;
      inset: 0;
      padding: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .view-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .tag-badge {
      position: absolute;
      top: 10px;
      right: 12px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .axis-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 600;
    }

    .highlight-label {
      font-size: 12px;
      fill: #0284c7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="segmented">
      <button class="tab-btn active" id="tabTime">Waveform (Time)</button>
      <button class="tab-btn" id="tabFreq">Harmonics (Freq)</button>
    </div>
    <button class="sound-btn" id="btnAudio">▶ Hear 220 Hz</button>
  </div>

  <div class="display-box">
    
    <div class="view-panel active" id="panelTime">
      <div class="tag-badge">Period T = 4.55 ms</div>
      <svg viewBox="0 0 500 200">
        
        <line x1="30" y1="100" x2="480" y2="100" stroke="#cbd5e1" stroke-dasharray="3,3" stroke-width="1.5" />
        
        
        <rect x="70" y="25" width="125" height="150" fill="#0284c7" fill-opacity="0.08" rx="6" />
        
        
        <line x1="70" y1="35" x2="195" y2="35" stroke="#0284c7" stroke-width="2" />
        <line x1="70" y1="28" x2="70" y2="42" stroke="#0284c7" stroke-width="2" />
        <line x1="195" y1="28" x2="195" y2="42" stroke="#0284c7" stroke-width="2" />
        <text x="132" y="28" text-anchor="middle" class="highlight-label">T (1 Cycle)</text>

        
        <line x1="195" y1="35" x2="320" y2="35" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2,2" />
        <text x="257" y="28" text-anchor="middle" class="axis-label">Repeat</text>

        
        <path id="wavePath" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />

        
        <text x="40" y="104" text-anchor="end" class="axis-label">0V</text>
        <text x="70" y="190" text-anchor="middle" class="axis-label">0 ms</text>
        <text x="195" y="190" text-anchor="middle" class="axis-label">4.55 ms</text>
        <text x="320" y="190" text-anchor="middle" class="axis-label">9.09 ms</text>
        <text x="445" y="190" text-anchor="middle" class="axis-label">13.64 ms</text>
      </svg>
    </div>

    
    <div class="view-panel" id="panelFreq">
      <div class="tag-badge">f₀ = 1 / T = 220 Hz</div>
      <svg viewBox="0 0 500 200">
        
        <line x1="40" y1="160" x2="470" y2="160" stroke="#cbd5e1" stroke-width="1.5" />

        
        <rect x="75" y="45" width="30" height="115" rx="4" fill="#0284c7" />
        <text x="90" y="38" text-anchor="middle" class="highlight-label">f₀</text>
        <text x="90" y="176" text-anchor="middle" class="highlight-label">220 Hz</text>

        
        <rect x="155" y="85" width="30" height="75" rx="4" fill="#38bdf8" />
        <text x="170" y="78" text-anchor="middle" class="axis-label">2f₀</text>
        <text x="170" y="176" text-anchor="middle" class="axis-label">440 Hz</text>

        
        <rect x="235" y="105" width="30" height="55" rx="4" fill="#38bdf8" />
        <text x="250" y="98" text-anchor="middle" class="axis-label">3f₀</text>
        <text x="250" y="176" text-anchor="middle" class="axis-label">660 Hz</text>

        
        <rect x="315" y="125" width="30" height="35" rx="4" fill="#38bdf8" />
        <text x="330" y="118" text-anchor="middle" class="axis-label">4f₀</text>
        <text x="330" y="176" text-anchor="middle" class="axis-label">880 Hz</text>

        
        <rect x="395" y="138" width="30" height="22" rx="4" fill="#38bdf8" />
        <text x="410" y="131" text-anchor="middle" class="axis-label">5f₀</text>
        <text x="410" y="176" text-anchor="middle" class="axis-label">1100 Hz</text>
      </svg>
    </div>
  </div>

  <script>
    // Generate complex vocal wave path: f0 + 0.5*(2f0) + 0.35*(3f0) + 0.2*(4f0)
    const wavePath = document.getElementById('wavePath');
    const startX = 50;
    const periodPx = 125; // 1 cycle
    let d = '';
    
    for (let px = 0; px <= 410; px++) {
      const x = startX + px;
      const t = (px / periodPx) * 2 * Math.PI;
      const yVal = Math.sin(t) + 0.55 * Math.sin(2 * t) + 0.35 * Math.sin(3 * t + 0.5) + 0.2 * Math.sin(4 * t);
      const y = 105 - (yVal * 32);
      d += (px === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
    }
    wavePath.setAttribute('d', d);

    // Tab Switching
    const tabTime = document.getElementById('tabTime');
    const tabFreq = document.getElementById('tabFreq');
    const panelTime = document.getElementById('panelTime');
    const panelFreq = document.getElementById('panelFreq');

    tabTime.addEventListener('click', () => {
      tabTime.classList.add('active');
      tabFreq.classList.remove('active');
      panelTime.classList.add('active');
      panelFreq.classList.remove('active');
    });

    tabFreq.addEventListener('click', () => {
      tabFreq.classList.add('active');
      tabTime.classList.remove('active');
      panelFreq.classList.add('active');
      panelTime.classList.remove('active');
    });

    // Web Audio Vocal Harmonic Synthesis
    let audioCtx = null;
    const btnAudio = document.getElementById('btnAudio');

    btnAudio.addEventListener('click', () => {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const now = audioCtx.currentTime;
      const duration = 0.8;

      // Real harmonic series weights matching the visual
      const real = new Float32Array([0, 1.0, 0.55, 0.35, 0.2, 0.1]);
      const imag = new Float32Array(real.length);
      const wave = audioCtx.createPeriodicWave(real, imag);

      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();

      osc.setPeriodicWave(wave);
      osc.frequency.setValueAtTime(220, now);

      gain.gain.setValueAtTime(0.001, now);
      gain.gain.linearRampToValueAtTime(0.2, now + 0.05);
      gain.gain.exponentialRampToValueAtTime(0.001, now + duration);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start(now);
      osc.stop(now + duration);

      btnAudio.textContent = '🔊 Playing...';
      setTimeout(() => {
        btnAudio.textContent = '▶ Hear 220 Hz';
      }, duration * 1000);
    });
  </script>
</body>
</html>

MUSTECH-16.1

Aligned learning resources

Related diagrams