From 8c1e085470087af09dac9f8b91a4f5ea8f5f31c0 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sat, 1 Aug 2026 17:29:21 +0800
Subject: [PATCH] =?UTF-8?q?chore(HTML):=20=E6=B7=BB=E5=8A=A0=20audio-visua?=
 =?UTF-8?q?lization/9.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HTML/audio-visualization/9.html | 421 ++++++++++++++++++++++++++++++++
 1 file changed, 421 insertions(+)
 create mode 100644 HTML/audio-visualization/9.html
diff --git a/HTML/audio-visualization/9.html b/HTML/audio-visualization/9.html
new file mode 100644
index 0000000..c733133
--- /dev/null
+++ b/HTML/audio-visualization/9.html
@@ -0,0 +1,421 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>XY 示波器</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --ink: #e9f0ea;
+      --muted: #91a69a;
+      --line: #264139;
+      --panel: #101a18;
+      --field: #07110f;
+      --signal: #81f2b1;
+      --signal-faint: rgba(129, 242, 177, 0.15);
+      --warning: #f1b766;
+      --danger: #f27f72;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      min-width: 320px;
+      height: 100vh;
+      height: 100dvh;
+      margin: 0;
+      color: var(--ink);
+      background: #0b1211;
+      font-family: "Segoe UI", system-ui, sans-serif;
+      overflow: hidden;
+    }
+
+    .app {
+      width: min(1180px, calc(100% - 32px));
+      height: 100vh;
+      height: 100dvh;
+      margin: 0 auto;
+      padding: 28px 0 22px;
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      gap: 20px;
+    }
+
+    .topbar, .controls, .readout {
+      display: flex;
+      align-items: center;
+    }
+
+    .topbar {
+      justify-content: space-between;
+      gap: 18px;
+      padding-bottom: 18px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .mark {
+      width: 34px;
+      height: 34px;
+      display: grid;
+      place-items: center;
+      color: var(--signal);
+      border: 1px solid var(--signal);
+      font-family: Consolas, monospace;
+      font-size: 13px;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 650;
+      letter-spacing: 0;
+    }
+
+    .subtitle, .status, .axis, .readout { color: var(--muted); }
+
+    .subtitle {
+      margin: 3px 0 0;
+      font-size: 13px;
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      white-space: nowrap;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--warning);
+      box-shadow: 0 0 0 3px rgba(241, 183, 102, 0.12);
+    }
+
+    .status-dot.active {
+      background: var(--signal);
+      box-shadow: 0 0 0 3px var(--signal-faint);
+    }
+
+    .scope-shell {
+      min-height: 0;
+      position: relative;
+      overflow: hidden;
+      border: 1px solid var(--line);
+      background: var(--field);
+    }
+
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .axis {
+      position: absolute;
+      margin: 0;
+      font: 12px Consolas, monospace;
+      pointer-events: none;
+    }
+
+    .axis-x { right: 14px; bottom: 12px; }
+    .axis-y { top: 12px; left: 14px; writing-mode: vertical-rl; transform: rotate(180deg); }
+
+    .controls {
+      justify-content: space-between;
+      gap: 20px;
+      flex-wrap: wrap;
+    }
+
+    .transport, .gain-control { display: flex; align-items: center; gap: 10px; }
+
+    button {
+      min-height: 38px;
+      padding: 0 15px;
+      border: 1px solid #3f6254;
+      border-radius: 4px;
+      color: #07110f;
+      background: var(--signal);
+      font: inherit;
+      font-weight: 650;
+      cursor: pointer;
+    }
+
+    button:hover { background: #a5facb; }
+    button:focus-visible, input:focus-visible { outline: 2px solid #d5ffe4; outline-offset: 3px; }
+
+    button.secondary {
+      color: var(--ink);
+      background: transparent;
+      border-color: #466157;
+    }
+
+    button.secondary:hover { background: #192924; }
+    button:disabled { opacity: 0.45; cursor: not-allowed; }
+
+    .gain-control label { color: var(--muted); font-size: 13px; }
+    output { min-width: 42px; color: var(--ink); font: 13px Consolas, monospace; text-align: right; }
+
+    input[type="range"] {
+      width: min(190px, 38vw);
+      accent-color: var(--signal);
+    }
+
+    .readout {
+      justify-content: space-between;
+      gap: 12px;
+      padding-top: 14px;
+      border-top: 1px solid var(--line);
+      font: 12px Consolas, monospace;
+      flex-wrap: wrap;
+    }
+
+    .readout span { color: var(--ink); }
+    .error { color: var(--danger); }
+
+    @media (max-width: 620px) {
+      .app { width: min(100% - 24px, 1180px); padding-top: 18px; gap: 16px; }
+      .topbar { align-items: flex-start; }
+      .status { padding-top: 5px; }
+      .subtitle { display: none; }
+      .controls { align-items: flex-start; }
+      .gain-control { width: 100%; }
+      input[type="range"] { flex: 1; width: auto; }
+      .scope-shell { min-height: 0; }
+    }
+
+    @media (max-height: 700px) {
+      .app { padding: 14px 0; gap: 12px; }
+      .topbar { padding-bottom: 10px; }
+      .readout { padding-top: 10px; }
+    }
+
+    @media (max-height: 480px) {
+      .subtitle { display: none; }
+      .mark { width: 28px; height: 28px; font-size: 11px; }
+      h1 { font-size: 17px; }
+      .controls { gap: 10px; }
+      button { min-height: 32px; }
+    }
+  </style>
+</head>
+<body>
+  <main class="app">
+    <header class="topbar">
+      <div class="brand">
+        <div class="mark" aria-hidden="true">X/Y</div>
+        <div>
+          <h1>XY 示波器</h1>
+          <p class="subtitle">麦克风立体声输入</p>
+        </div>
+      </div>
+      <div class="status" aria-live="polite">
+        <i class="status-dot" id="statusDot"></i>
+        <span id="statusText">等待麦克风</span>
+      </div>
+    </header>
+
+    <section class="scope-shell" aria-label="XY 音频示波器">
+      <canvas id="scope"></canvas>
+      <p class="axis axis-y">Y · 右声道</p>
+      <p class="axis axis-x">X · 左声道</p>
+    </section>
+
+    <section class="controls" aria-label="示波器控制">
+      <div class="transport">
+        <button id="startButton" type="button">启用麦克风</button>
+        <button id="stopButton" class="secondary" type="button" disabled>停止</button>
+      </div>
+      <div class="gain-control">
+        <label for="gain">显示增益</label>
+        <input id="gain" type="range" min="0.25" max="5" value="1" step="0.05">
+        <output id="gainValue" for="gain">1.00x</output>
+      </div>
+    </section>
+
+    <footer class="readout">
+      <div>采样点 <span id="sampleCount">0</span></div>
+      <div id="message">X 轴使用左声道，Y 轴使用右声道</div>
+    </footer>
+  </main>
+
+  <script>
+    const canvas = document.querySelector('#scope');
+    const context = canvas.getContext('2d');
+    const startButton = document.querySelector('#startButton');
+    const stopButton = document.querySelector('#stopButton');
+    const gainInput = document.querySelector('#gain');
+    const gainValue = document.querySelector('#gainValue');
+    const statusDot = document.querySelector('#statusDot');
+    const statusText = document.querySelector('#statusText');
+    const sampleCount = document.querySelector('#sampleCount');
+    const message = document.querySelector('#message');
+
+    let audioContext;
+    let stream;
+    let leftAnalyser;
+    let rightAnalyser;
+    let leftSamples;
+    let rightSamples;
+    let animationFrame;
+    let displayGain = Number(gainInput.value);
+    const traceSamples = 512;
+
+    function resizeCanvas() {
+      const ratio = window.devicePixelRatio || 1;
+      const { width, height } = canvas.getBoundingClientRect();
+      canvas.width = Math.max(1, Math.round(width * ratio));
+      canvas.height = Math.max(1, Math.round(height * ratio));
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    }
+
+    function drawGrid(width, height) {
+      context.clearRect(0, 0, width, height);
+      context.fillStyle = '#07110f';
+      context.fillRect(0, 0, width, height);
+      context.strokeStyle = '#173029';
+      context.lineWidth = 1;
+
+      const divisions = 8;
+      for (let index = 0; index <= divisions; index += 1) {
+        const x = Math.round((width / divisions) * index) + 0.5;
+        const y = Math.round((height / divisions) * index) + 0.5;
+        context.beginPath();
+        context.moveTo(x, 0);
+        context.lineTo(x, height);
+        context.moveTo(0, y);
+        context.lineTo(width, y);
+        context.stroke();
+      }
+
+      context.strokeStyle = '#476b5b';
+      context.beginPath();
+      context.moveTo(width / 2, 0);
+      context.lineTo(width / 2, height);
+      context.moveTo(0, height / 2);
+      context.lineTo(width, height / 2);
+      context.stroke();
+    }
+
+    function render() {
+      const { width, height } = canvas.getBoundingClientRect();
+      drawGrid(width, height);
+
+      if (leftAnalyser && rightAnalyser) {
+        leftAnalyser.getFloatTimeDomainData(leftSamples);
+        rightAnalyser.getFloatTimeDomainData(rightSamples);
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const scale = Math.min(width, height) * 0.46 * displayGain;
+        let startIndex = 0;
+
+        // Start at a consistent phase point so complex input does not fill the entire display.
+        for (let index = 0; index < leftSamples.length; index += 1) {
+          const previousIndex = (index - 1 + leftSamples.length) % leftSamples.length;
+          if (leftSamples[previousIndex] <= 0 && leftSamples[index] > 0) {
+            startIndex = index;
+            break;
+          }
+        }
+
+        context.beginPath();
+        for (let index = 0; index < traceSamples; index += 1) {
+          const sampleIndex = (startIndex + index) % leftSamples.length;
+          const x = centerX - leftSamples[sampleIndex] * scale;
+          const y = centerY + rightSamples[sampleIndex] * scale;
+          if (index === 0) context.moveTo(x, y);
+          else context.lineTo(x, y);
+        }
+        context.strokeStyle = 'rgba(129, 242, 177, 0.88)';
+        context.lineWidth = 1;
+        context.stroke();
+        sampleCount.textContent = String(traceSamples);
+      }
+
+      animationFrame = requestAnimationFrame(render);
+    }
+
+    function setStatus(text, active, error = false) {
+      statusText.textContent = text;
+      statusDot.classList.toggle('active', active);
+      message.classList.toggle('error', error);
+    }
+
+    function stopMicrophone() {
+      cancelAnimationFrame(animationFrame);
+      animationFrame = undefined;
+      stream?.getTracks().forEach((track) => track.stop());
+      audioContext?.close();
+      stream = undefined;
+      audioContext = undefined;
+      leftAnalyser = undefined;
+      rightAnalyser = undefined;
+      sampleCount.textContent = '0';
+      startButton.disabled = false;
+      stopButton.disabled = true;
+      setStatus('等待麦克风', false);
+      message.textContent = 'X 轴使用左声道，Y 轴使用右声道';
+    }
+
+    async function startMicrophone() {
+      startButton.disabled = true;
+      setStatus('正在请求授权', false);
+      message.textContent = '请在浏览器中允许访问麦克风';
+
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({
+          audio: { channelCount: { ideal: 2 }, echoCancellation: false, noiseSuppression: false, autoGainControl: false }
+        });
+        audioContext = new AudioContext();
+        await audioContext.resume();
+
+        const source = audioContext.createMediaStreamSource(stream);
+        const splitter = audioContext.createChannelSplitter(2);
+        leftAnalyser = audioContext.createAnalyser();
+        rightAnalyser = audioContext.createAnalyser();
+        leftAnalyser.fftSize = traceSamples;
+        rightAnalyser.fftSize = traceSamples;
+        leftAnalyser.smoothingTimeConstant = 0;
+        rightAnalyser.smoothingTimeConstant = 0;
+        leftSamples = new Float32Array(leftAnalyser.fftSize);
+        rightSamples = new Float32Array(rightAnalyser.fftSize);
+
+        source.connect(splitter);
+        splitter.connect(leftAnalyser, 0);
+        splitter.connect(rightAnalyser, 1);
+        stream.getAudioTracks()[0].addEventListener('ended', stopMicrophone, { once: true });
+
+        stopButton.disabled = false;
+        setStatus('正在监听', true);
+        message.textContent = '实时绘制左右声道之间的相位关系';
+        if (!animationFrame) render();
+      } catch (error) {
+        startButton.disabled = false;
+        setStatus('无法访问麦克风', false, true);
+        message.textContent = error.name === 'NotAllowedError' ? '麦克风权限被拒绝' : '当前浏览器不支持或无法连接麦克风';
+      }
+    }
+
+    gainInput.addEventListener('input', () => {
+      displayGain = Number(gainInput.value);
+      gainValue.textContent = `${displayGain.toFixed(2)}x`;
+    });
+    startButton.addEventListener('click', startMicrophone);
+    stopButton.addEventListener('click', stopMicrophone);
+    window.addEventListener('resize', resizeCanvas);
+    window.addEventListener('beforeunload', stopMicrophone);
+
+    resizeCanvas();
+    render();
+  </script>
+</body>
+</html>
