From a8fbe3931d55e78260e54a01cde1f04966ba8775 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sat, 4 Jul 2026 23:21:26 +0800
Subject: [PATCH] =?UTF-8?q?chore(HTML):=20=E6=9B=B4=E6=96=B0=20audio-visua?=
 =?UTF-8?q?lization/2.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 HTML/audio-visualization/2.html | 1338 +++++++++----------------------
 1 file changed, 397 insertions(+), 941 deletions(-)
diff --git a/HTML/audio-visualization/2.html b/HTML/audio-visualization/2.html
index 706e399..b51292a 100644
--- a/HTML/audio-visualization/2.html
+++ b/HTML/audio-visualization/2.html
@@ -3,1033 +3,489 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>音频可视化 - Audio Visualizer</title>
+  <title>VFD 音频可视化</title>
   <style>
+    /* VFD（真空荧光显示屏）风格：深色底 + 青蓝荧光 */
+    :root {
+      --vfd-glow: #38f9d7;
+      --vfd-dim: #0a6b5c;
+      --vfd-bg: #030807;
+    }
+
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
+    html,
     body {
+      height: 100%;
       background: #000;
       overflow: hidden;
-      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-      color: #fff;
+      font-family: "Consolas", "Courier New", monospace;
+    }
+
+    #stage {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      /* 模拟玻璃外壳与暗角 */
+      background:
+        radial-gradient(ellipse at center, #061715 0%, var(--vfd-bg) 70%, #000 100%);
     }
 
     canvas {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
       display: block;
-      position: fixed;
-      top: 0;
-      left: 0;
     }
 
-    /* 控制面板 */
-    .controls {
-      position: fixed;
-      bottom: 24px;
-      left: 50%;
-      transform: translateX(-50%);
+    /* 荧光屏细扫描线覆盖层 */
+    #scanlines {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: repeating-linear-gradient(to bottom,
+          rgba(0, 0, 0, 0) 0px,
+          rgba(0, 0, 0, 0) 2px,
+          rgba(0, 0, 0, 0.18) 3px,
+          rgba(0, 0, 0, 0) 4px);
+      mix-blend-mode: multiply;
+    }
+
+    /* 纯文字操作按钮 */
+    #controls {
+      position: absolute;
+      right: 32px;
+      bottom: 26px;
       display: flex;
-      gap: 6px;
-      align-items: center;
-      z-index: 100;
-      padding: 6px 12px;
+      gap: 26px;
+      z-index: 10;
     }
 
     .btn {
-      padding: 6px 14px;
+      background: none;
       border: none;
-      border-radius: 4px;
       cursor: pointer;
-      font-size: 13px;
-      font-weight: 400;
-      transition: all 0.2s ease;
-      background: transparent;
-      color: rgba(255, 255, 255, 0.55);
-      outline: none;
-      letter-spacing: 0.5px;
-    }
-
-    .btn:hover {
-      color: rgba(255, 255, 255, 0.9);
-      background: rgba(255, 255, 255, 0.08);
-    }
-
-    .btn:active {
-      color: #fff;
-    }
-
-    .btn.active {
-      color: #fff;
-      background: rgba(255, 255, 255, 0.12);
-    }
-
-    .btn.mic-btn.active {
-      color: #7eb8ff;
-      animation: pulse 1.5s infinite;
-    }
-
-    @keyframes pulse {
-
-      0%,
-      100% {
-        opacity: 1;
-      }
-
-      50% {
-        opacity: 0.6;
-      }
-    }
-
-    input[type="file"] {
-      display: none;
-    }
-
-    /* 标题 */
-    .title {
-      position: fixed;
-      top: 24px;
-      left: 50%;
-      transform: translateX(-50%);
-      font-size: 13px;
-      font-weight: 400;
-      letter-spacing: 8px;
+      font-family: inherit;
+      font-size: 15px;
+      letter-spacing: 3px;
+      color: var(--vfd-dim);
       text-transform: uppercase;
-      z-index: 100;
-      color: rgba(255, 255, 255, 0.3);
+      padding: 4px 2px;
+      transition: color .2s, text-shadow .2s;
       user-select: none;
     }
 
-    /* 音量条 */
-    .volume-bar {
-      position: fixed;
-      right: 20px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 3px;
-      height: 120px;
-      background: rgba(255, 255, 255, 0.08);
-      border-radius: 2px;
-      overflow: hidden;
-      z-index: 100;
+    .btn::before {
+      content: "[ ";
     }
 
-    .volume-fill {
+    .btn::after {
+      content: " ]";
+    }
+
+    .btn:hover {
+      color: var(--vfd-glow);
+      text-shadow: 0 0 8px var(--vfd-glow), 0 0 18px var(--vfd-glow);
+    }
+
+    .btn.active {
+      color: var(--vfd-glow);
+      text-shadow: 0 0 6px var(--vfd-glow), 0 0 16px var(--vfd-glow);
+    }
+
+    #hint {
       position: absolute;
-      bottom: 0;
-      width: 100%;
-      background: rgba(126, 184, 255, 0.5);
-      border-radius: 2px;
-      transition: height 0.1s ease;
-    }
-
-    /* 提示文字 */
-    .hint {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 14px;
-      opacity: 0.25;
-      text-align: center;
-      z-index: 50;
-      pointer-events: none;
-      transition: opacity 0.5s ease;
-      letter-spacing: 3px;
-      font-weight: 300;
-    }
-
-    .hint.hidden {
-      opacity: 0;
-    }
-
-    /* 音频信息 */
-    .track-info {
-      position: fixed;
-      top: 55px;
+      top: 22px;
       left: 50%;
       transform: translateX(-50%);
+      color: var(--vfd-dim);
       font-size: 12px;
-      opacity: 0;
-      z-index: 100;
+      letter-spacing: 4px;
+      text-transform: uppercase;
+      z-index: 10;
       text-align: center;
-      transition: opacity 0.5s ease;
-      color: rgba(255, 255, 255, 0.4);
-    }
-
-    .track-info.visible {
-      opacity: 1;
-    }
-
-    /* 播放进度 */
-    .progress-container {
-      position: fixed;
-      bottom: 60px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 240px;
-      z-index: 100;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    .progress-container.visible {
-      opacity: 1;
-    }
-
-    .progress-bar {
-      width: 100%;
-      height: 2px;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 1px;
-      cursor: pointer;
-      position: relative;
-    }
-
-    .progress-fill {
-      height: 100%;
-      background: rgba(126, 184, 255, 0.5);
-      border-radius: 1px;
-      width: 0%;
-      transition: width 0.1s linear;
-    }
-
-    .time-display {
-      display: flex;
-      justify-content: space-between;
-      font-size: 10px;
-      opacity: 0.3;
-      margin-top: 4px;
-    }
-
-    /* 分割线 */
-    .divider {
-      width: 1px;
-      height: 14px;
-      background: rgba(255, 255, 255, 0.12);
-      margin: 0 4px;
+      transition: opacity .4s;
     }
   </style>
 </head>
 <body>
-  <canvas id="canvas"></canvas>
-
-  <div class="title">AUDIO VISUALIZER</div>
-  <div class="track-info" id="trackInfo"></div>
-
-  <div class="hint" id="hint">
-    请选择音频文件或开启麦克风
-  </div>
-
-  <div class="volume-bar">
-    <div class="volume-fill" id="volumeFill"></div>
-  </div>
-
-  <div class="progress-container" id="progressContainer">
-    <div class="progress-bar" id="progressBar">
-      <div class="progress-fill" id="progressFill"></div>
-    </div>
-    <div class="time-display">
-      <span id="currentTime">0:00</span>
-      <span id="totalTime">0:00</span>
+  <div id="stage">
+    <canvas id="vfd"></canvas>
+    <div id="scanlines"></div>
+    <div id="hint">按下 MIC 授权麦克风以开始</div>
+    <div id="controls">
+      <button class="btn" id="micBtn">MIC</button>
+      <button class="btn" id="fsBtn">FULL SCREEN</button>
     </div>
   </div>
-
-  <div class="controls">
-    <input type="file" id="fileInput" accept="audio/*">
-    <button class="btn" id="uploadBtn">打开文件</button>
-    <button class="btn mic-btn" id="micBtn">麦克风</button>
-
-    <div class="divider"></div>
-
-    <button class="btn" id="playBtn" style="display:none;">播放</button>
-
-    <div class="divider"></div>
-
-    <button class="btn" id="fullscreenBtn">全屏</button>
-  </div>
-
   <script>
-    // ==================== 初始化 ====================
-    const canvas = document.getElementById('canvas');
-    const ctx = canvas.getContext('2d');
+    (function () {
+      "use strict";
 
-    let width, height, centerX, centerY;
+      const canvas = document.getElementById("vfd");
+      const ctx = canvas.getContext("2d");
+      const stage = document.getElementById("stage");
+      const micBtn = document.getElementById("micBtn");
+      const fsBtn = document.getElementById("fsBtn");
+      const hint = document.getElementById("hint");
 
-    function resize() {
-      width = canvas.width = window.innerWidth;
-      height = canvas.height = window.innerHeight;
-      centerX = width / 2;
-      centerY = height / 2;
-      initStarfield();
-    }
-    window.addEventListener('resize', resize);
+      // VFD 荧光主色
+      const GLOW = "#38f9d7";
+      const DIM = "rgba(56, 249, 215, 0.14)";
 
-    // ==================== 音频相关 ====================
-    let audioContext;
-    let analyser;
-    let source;
-    let audio = new Audio();
-    let dataArray;
-    let bufferLength;
-    let isPlaying = false;
-    let isMicActive = false;
-    let micStream;
-    let animationId;
+      let W = 0, H = 0, DPR = 1;
 
-    // 初始化音频上下文
-    function initAudio() {
-      if (audioContext) return;
-      audioContext = new (window.AudioContext || window.webkitAudioContext)();
-      analyser = audioContext.createAnalyser();
-      analyser.fftSize = 256;
-      analyser.smoothingTimeConstant = 0.82;
-      bufferLength = analyser.frequencyBinCount;
-      dataArray = new Uint8Array(bufferLength);
-    }
+      function resize() {
+        DPR = Math.min(window.devicePixelRatio || 1, 2);
+        W = stage.clientWidth;
+        H = stage.clientHeight;
+        canvas.width = W * DPR;
+        canvas.height = H * DPR;
+        ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+      }
+      window.addEventListener("resize", resize);
+      resize();
 
-    // 播放音频文件
-    function playFile(file) {
-      initAudio();
+      // ---------- 音频 ----------
+      let audioCtx = null, analyser = null, freqData = null, timeData = null;
+      let running = false;
+      let sampleRate = 44100;   // 采样率，用于频率/音符换算
 
-      if (audioContext.state === 'suspended') {
-        audioContext.resume();
+      async function initMic() {
+        if (running) return;
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+          const src = audioCtx.createMediaStreamSource(stream);
+          analyser = audioCtx.createAnalyser();
+          analyser.fftSize = 512;
+          analyser.smoothingTimeConstant = 0.8;
+          analyser.minDecibels = -85;   // 拓宽动态范围，避免频谱条轻易撑满
+          analyser.maxDecibels = -10;
+          src.connect(analyser);
+          sampleRate = audioCtx.sampleRate;
+          freqData = new Uint8Array(analyser.frequencyBinCount);
+          timeData = new Uint8Array(analyser.fftSize);
+          running = true;
+          micBtn.classList.add("active");
+          hint.style.opacity = "0";
+        } catch (e) {
+          hint.textContent = "麦克风访问被拒绝";
+          hint.style.opacity = "1";
+        }
       }
 
-      stopMic();
+      micBtn.addEventListener("click", initMic);
 
-      const url = URL.createObjectURL(file);
-      audio.src = url;
-
-      if (source) {
-        source.disconnect();
-      }
-
-      source = audioContext.createMediaElementSource(audio);
-      source.connect(analyser);
-      analyser.connect(audioContext.destination);
-
-      audio.play();
-      isPlaying = true;
-
-      document.getElementById('playBtn').style.display = 'inline-block';
-      document.getElementById('playBtn').textContent = '暂停';
-      document.getElementById('hint').classList.add('hidden');
-      document.getElementById('progressContainer').classList.add('visible');
-      document.getElementById('trackInfo').classList.add('visible');
-      document.getElementById('trackInfo').textContent = file.name.replace(/\.[^/.]+$/, '');
-
-      audio.addEventListener('loadedmetadata', () => {
-        document.getElementById('totalTime').textContent = formatTime(audio.duration);
+      // ---------- 全屏 ----------
+      fsBtn.addEventListener("click", () => {
+        if (!document.fullscreenElement) {
+          stage.requestFullscreen && stage.requestFullscreen();
+        } else {
+          document.exitFullscreen && document.exitFullscreen();
+        }
       });
-    }
-
-    // 使用麦克风
-    async function toggleMic() {
-      if (isMicActive) {
-        stopMic();
-        return;
-      }
-
-      initAudio();
-
-      if (audioContext.state === 'suspended') {
-        audioContext.resume();
-      }
-
-      try {
-        micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
-        audio.pause();
-        isPlaying = false;
-        if (source) source.disconnect();
-
-        source = audioContext.createMediaStreamSource(micStream);
-        source.connect(analyser);
-
-        isMicActive = true;
-        document.getElementById('micBtn').classList.add('active');
-        document.getElementById('hint').classList.add('hidden');
-        document.getElementById('playBtn').style.display = 'none';
-        document.getElementById('progressContainer').classList.remove('visible');
-        document.getElementById('trackInfo').classList.add('visible');
-        document.getElementById('trackInfo').textContent = '麦克风输入';
-      } catch (err) {
-        alert('无法访问麦克风，请检查权限设置。');
-        console.error(err);
-      }
-    }
-
-    function stopMic() {
-      if (micStream) {
-        micStream.getTracks().forEach(track => track.stop());
-        micStream = null;
-      }
-      isMicActive = false;
-      document.getElementById('micBtn').classList.remove('active');
-    }
-
-    // 格式化时间
-    function formatTime(seconds) {
-      if (isNaN(seconds)) return '0:00';
-      const mins = Math.floor(seconds / 60);
-      const secs = Math.floor(seconds % 60);
-      return `${mins}:${secs.toString().padStart(2, '0')}`;
-    }
-
-    // ==================== 星空系统 ====================
-    // 三层视差星空
-    let starLayers = [[], [], []];
-    const STAR_COUNTS = [300, 200, 100]; // 远、中、近
-    const STAR_SPEEDS = [0.05, 0.15, 0.4]; // 视差速度
-    const STAR_SIZES = [[0.3, 1.0], [0.8, 1.8], [1.2, 2.8]]; // 大小范围
-
-    function initStarfield() {
-      starLayers = [[], [], []];
-      for (let layer = 0; layer < 3; layer++) {
-        for (let i = 0; i < STAR_COUNTS[layer]; i++) {
-          starLayers[layer].push({
-            x: Math.random() * width,
-            y: Math.random() * height,
-            size: Math.random() * (STAR_SIZES[layer][1] - STAR_SIZES[layer][0]) + STAR_SIZES[layer][0],
-            brightness: Math.random() * 0.6 + 0.4,
-            twinkleSpeed: Math.random() * 0.03 + 0.005,
-            twinklePhase: Math.random() * Math.PI * 2,
-            // 用于极速穿梭时的原始位置
-            baseX: 0,
-            baseY: 0
-          });
-        }
-      }
-    }
-    resize();
-
-    // 星云粒子
-    let nebulaParticles = [];
-    const NEBULA_COUNT = 80;
-
-    function initNebula() {
-      nebulaParticles = [];
-      for (let i = 0; i < NEBULA_COUNT; i++) {
-        nebulaParticles.push({
-          angle: Math.random() * Math.PI * 2,
-          radius: Math.random() * Math.min(width, height) * 0.4 + 80,
-          speed: (Math.random() - 0.5) * 0.002 + 0.0005,
-          size: Math.random() * 60 + 30,
-          hue: Math.random() * 80 + 200, // 蓝紫色调
-          opacity: Math.random() * 0.08 + 0.02
-        });
-      }
-    }
-    initNebula();
-
-    // 流星
-    let meteors = [];
-
-    function spawnMeteor(intensity) {
-      const startX = Math.random() * width;
-      const startY = Math.random() * height * 0.3;
-      const angle = Math.PI * 0.25 + (Math.random() - 0.5) * 0.3; // 斜向右下
-      const speed = 8 + intensity * 15 + Math.random() * 6;
-      const length = 40 + intensity * 80 + Math.random() * 30;
-      meteors.push({
-        x: startX,
-        y: startY,
-        vx: Math.cos(angle) * speed,
-        vy: Math.sin(angle) * speed,
-        length: length,
-        life: 1,
-        decay: 0.008 + Math.random() * 0.008,
-        hue: 200 + Math.random() * 60,
-        width: 1.5 + Math.random() * 1.5
+      document.addEventListener("fullscreenchange", () => {
+        fsBtn.classList.toggle("active", !!document.fullscreenElement);
+        resize();
       });
-    }
 
-    // 粒子（用于爆发和星座连线）
-    let particles = [];
+      // ---------- 频段分组：将 FFT 频谱映射为若干 VFD 条 ----------
+      const BAR_COUNT = 28;          // 频谱条数量
+      const SEG_MAX = 24;            // 每条最大段数（VFD 分段）
+      const peaks = new Array(BAR_COUNT).fill(0);   // 峰值保持（段数）
+      const levels = new Array(BAR_COUNT).fill(0);  // 当前平滑电平
 
-    class StarParticle {
-      constructor(x, y, vx, vy, hue, size, life) {
-        this.x = x;
-        this.y = y;
-        this.vx = vx;
-        this.vy = vy;
-        this.hue = hue;
-        this.size = size || (Math.random() * 2 + 1);
-        this.life = life || 1;
-        this.decay = Math.random() * 0.015 + 0.008;
+      // 对数分布采样索引，低频更细腻
+      function buildBands(bins) {
+        const bands = [];
+        const minF = 2, maxF = bins * 0.72;
+        for (let i = 0; i <= BAR_COUNT; i++) {
+          const t = i / BAR_COUNT;
+          bands.push(Math.floor(minF * Math.pow(maxF / minF, t)));
+        }
+        return bands;
+      }
+      let bands = null;
+
+      // ---------- 绘制 ----------
+      function draw() {
+        requestAnimationFrame(draw);
+        ctx.clearRect(0, 0, W, H);
+
+        if (running) {
+          analyser.getByteFrequencyData(freqData);
+          analyser.getByteTimeDomainData(timeData);
+          if (!bands) bands = buildBands(freqData.length);
+        }
+
+        drawFrame();
+        drawSpectrum();
+        drawWaveform();
+        drawLevelMeter();
+        drawStatusBar();
       }
 
-      update() {
-        this.x += this.vx;
-        this.y += this.vy;
-        this.vx *= 0.985;
-        this.vy *= 0.985;
-        this.life -= this.decay;
-        this.size *= 0.995;
+      // 屏幕布局参数
+      function layout() {
+        const pad = Math.max(24, W * 0.04);
+        const specTop = pad + 46;
+        const specH = H * 0.40;
+        const specBottom = specTop + specH;
+        const reflectH = specH * 0.20;         // 频谱倒影高度
+        const waveTop = specBottom + reflectH + 30;
+        const waveH = H * 0.14;
+        const statusY = H - pad * 0.5 - 34;    // 底部状态栏基线
+        return { pad, specTop, specH, specBottom, reflectH, waveTop, waveH, statusY };
       }
 
-      draw() {
+      // 外框 + 标题（纯文字标签，营造仪器面板感）
+      function drawFrame() {
+        const { pad } = layout();
         ctx.save();
-        ctx.globalAlpha = this.life;
-        ctx.fillStyle = `hsl(${this.hue}, 80%, 70%)`;
-        ctx.shadowBlur = 10;
-        ctx.shadowColor = `hsl(${this.hue}, 90%, 60%)`;
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-        ctx.fill();
+        ctx.strokeStyle = DIM;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(pad * 0.5, pad * 0.5, W - pad, H - pad);
+
+        ctx.fillStyle = GLOW;
+        ctx.shadowColor = GLOW;
+        ctx.shadowBlur = 12;
+        ctx.font = "600 16px Consolas, monospace";
+        ctx.textBaseline = "top";
+        ctx.globalAlpha = 0.9;
+        ctx.fillText("V F D   S P E C T R U M", pad, pad * 0.5 + 14);
+
+        ctx.font = "12px Consolas, monospace";
+        ctx.textAlign = "right";
+        ctx.fillText(running ? "● LIVE" : "○ IDLE", W - pad, pad * 0.5 + 16);
+        ctx.textAlign = "left";
         ctx.restore();
       }
-    }
 
-    // 上一拍检测
-    let beatThreshold = 0.5;
-    let beatHistory = [];
-    let beatCooldown = 0;
+      // 分段式频谱条（VFD 经典分段柱）
+      function drawSpectrum() {
+        const { pad, specTop, specH, specBottom, reflectH } = layout();
+        const usableW = W - pad * 2;
+        const gap = usableW / BAR_COUNT * 0.22;
+        const barW = usableW / BAR_COUNT - gap;
+        const segGap = 2;
+        const segH = (specH / SEG_MAX) - segGap;
 
-    function detectBeat(bass) {
-      beatHistory.push(bass);
-      if (beatHistory.length > 30) beatHistory.shift();
-      const avg = beatHistory.reduce((a, b) => a + b, 0) / beatHistory.length;
-      const variance = beatHistory.reduce((a, b) => a + (b - avg) ** 2, 0) / beatHistory.length;
-      const threshold = avg + Math.sqrt(variance) * 1.3;
-      if (beatCooldown > 0) {
-        beatCooldown--;
-        return false;
-      }
-      if (bass > threshold && bass > beatThreshold) {
-        beatCooldown = 8;
-        return true;
-      }
-      return false;
-    }
-
-    // ==================== 颜色工具 ====================
-    function hsl(h, s, l, a) {
-      return `hsla(${h}, ${s}%, ${l}%, ${a})`;
-    }
-
-    // ==================== 渲染函数 ====================
-
-    // 绘制视差星空
-    function drawStarfield(time, avgVolume, bass) {
-      // 极速模式时星星拉伸
-      const warpFactor = Math.max(0, avgVolume - 0.3) * 2.5;
-
-      for (let layer = 0; layer < 3; layer++) {
-        const stars = starLayers[layer];
-        const speed = STAR_SPEEDS[layer] * (1 + warpFactor * 3);
-
-        for (const star of stars) {
-          // 闪烁
-          const twinkle = Math.sin(time * star.twinkleSpeed + star.twinklePhase) * 0.3 + 0.7;
-          const alpha = star.brightness * twinkle;
-
-          // 缓慢移动（模拟飞船前进）
-          star.y += speed;
-          star.x += speed * 0.1;
-          if (star.y > height) {
-            star.y = -5;
-            star.x = Math.random() * width;
-          }
-          if (star.x > width) star.x = 0;
-
-          ctx.save();
-          ctx.globalAlpha = alpha;
-
-          if (warpFactor > 0.5 && layer === 2) {
-            // 近层星星在高音量时产生拖尾效果
-            const trailLen = warpFactor * 20;
-            const grad = ctx.createLinearGradient(star.x, star.y, star.x - speed * 2, star.y - trailLen);
-            grad.addColorStop(0, `rgba(200, 220, 255, ${alpha})`);
-            grad.addColorStop(1, 'rgba(200, 220, 255, 0)');
-            ctx.strokeStyle = grad;
-            ctx.lineWidth = star.size * 0.8;
-            ctx.lineCap = 'round';
-            ctx.beginPath();
-            ctx.moveTo(star.x, star.y);
-            ctx.lineTo(star.x - speed * 2, star.y - trailLen);
-            ctx.stroke();
+        for (let i = 0; i < BAR_COUNT; i++) {
+          let target = 0;
+          if (running && bands) {
+            const start = bands[i], end = Math.max(bands[i + 1], start + 1);
+            let sum = 0;
+            for (let j = start; j < end; j++) sum += freqData[j];
+            const avg = sum / (end - start) / 255;
+            // gamma > 1 压低中低电平，减缓撑满；轻微高频补偿
+            const tilt = 1 + (i / BAR_COUNT) * 0.35;
+            target = Math.pow(avg, 1.6) * tilt;
+            target = Math.min(1, target);
           }
 
-          // 星星主体
-          ctx.fillStyle = layer === 2 ? 'rgba(220, 235, 255, 1)' :
-            layer === 1 ? 'rgba(200, 220, 255, 1)' : 'rgba(180, 200, 240, 1)';
-          ctx.shadowBlur = star.size * 3;
-          ctx.shadowColor = 'rgba(180, 210, 255, 0.5)';
-          ctx.beginPath();
-          ctx.arc(star.x, star.y, star.size * (1 + bass * 0.5 * (layer === 2 ? 1 : 0.3)), 0, Math.PI * 2);
-          ctx.fill();
-          ctx.restore();
-        }
-      }
-    }
+          // 平滑上升/下降
+          if (target > levels[i]) levels[i] += (target - levels[i]) * 0.55;
+          else levels[i] += (target - levels[i]) * 0.14;
 
-    // 绘制星云
-    function drawNebula(time, mid, treble) {
-      ctx.save();
-      ctx.globalCompositeOperation = 'screen';
-      for (const np of nebulaParticles) {
-        np.angle += np.speed * (1 + mid * 2);
-        const wobble = Math.sin(time * 0.001 + np.angle * 3) * 20;
-        const x = centerX + Math.cos(np.angle) * np.radius + wobble;
-        const y = centerY + Math.sin(np.angle) * np.radius * 0.8 + wobble * 0.5;
-        const r = np.size * (1 + mid * 1.5);
-        const hueShift = treble * 30;
+          const litSeg = Math.round(levels[i] * SEG_MAX);
 
-        const grad = ctx.createRadialGradient(x, y, 0, x, y, r);
-        grad.addColorStop(0, hsl(np.hue + hueShift, 70, 50, np.opacity * (1 + mid)));
-        grad.addColorStop(0.5, hsl(np.hue + hueShift + 20, 60, 30, np.opacity * 0.5 * (1 + mid)));
-        grad.addColorStop(1, 'rgba(0,0,0,0)');
-        ctx.fillStyle = grad;
-        ctx.beginPath();
-        ctx.arc(x, y, r, 0, Math.PI * 2);
-        ctx.fill();
-      }
-      ctx.restore();
-    }
+          // 峰值保持并缓慢下落
+          if (litSeg > peaks[i]) peaks[i] = litSeg;
+          else peaks[i] = Math.max(0, peaks[i] - 0.15);
 
-    // 绘制星系核心（脉冲星）
-    function drawGalacticCore(bass, mid, treble, time) {
-      const baseRadius = Math.min(width, height) * 0.06;
-      const coreRadius = baseRadius + bass * 80;
+          const x = pad + i * (barW + gap);
 
-      // 外层光晕
-      ctx.save();
-      const outerGlow = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, coreRadius * 4);
-      outerGlow.addColorStop(0, hsl(220, 80, 70, bass * 0.25));
-      outerGlow.addColorStop(0.2, hsl(250, 70, 50, bass * 0.1));
-      outerGlow.addColorStop(0.5, hsl(270, 60, 30, bass * 0.03));
-      outerGlow.addColorStop(1, 'rgba(0,0,0,0)');
-      ctx.fillStyle = outerGlow;
-      ctx.fillRect(0, 0, width, height);
-      ctx.restore();
+          for (let s = 0; s < SEG_MAX; s++) {
+            const y = specTop + specH - (s + 1) * (segH + segGap);
+            const on = s < litSeg;
+            const isPeak = Math.round(peaks[i]) === s + 1;
 
-      // 核心光芒
-      ctx.save();
-      const coreGrad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, coreRadius);
-      coreGrad.addColorStop(0, hsl(200, 100, 95, 0.9 + bass * 0.1));
-      coreGrad.addColorStop(0.3, hsl(220, 90, 75, 0.6 + mid * 0.2));
-      coreGrad.addColorStop(0.6, hsl(250, 80, 55, 0.3));
-      coreGrad.addColorStop(1, hsl(270, 60, 40, 0));
-      ctx.fillStyle = coreGrad;
-      ctx.shadowBlur = 40 + bass * 30;
-      ctx.shadowColor = hsl(220, 100, 70, 0.8);
-      ctx.beginPath();
-      ctx.arc(centerX, centerY, coreRadius, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.restore();
-
-      // 旋转光环（环带）
-      const ringCount = 3;
-      for (let r = 0; r < ringCount; r++) {
-        const ringRadius = coreRadius * (1.5 + r * 0.8) + mid * 30;
-        const rotationSpeed = 0.0003 * (r % 2 === 0 ? 1 : -1);
-        ctx.save();
-        ctx.translate(centerX, centerY);
-        ctx.rotate(time * rotationSpeed + r * 1.2);
-        ctx.strokeStyle = hsl(220 + r * 20, 70, 60, 0.15 + mid * 0.2);
-        ctx.lineWidth = 1 + r * 0.5;
-        ctx.shadowBlur = 15;
-        ctx.shadowColor = hsl(220, 80, 60, 0.3);
-
-        // 椭圆环（星系盘效果）
-        ctx.beginPath();
-        ctx.ellipse(0, 0, ringRadius, ringRadius * 0.3, 0, 0, Math.PI * 2);
-        ctx.stroke();
-        ctx.restore();
-      }
-    }
-
-    // 绘制频谱环（星系旋臂）
-    function drawFrequencyArms(time, bass, mid, treble) {
-      const arms = 5;
-      const baseRadius = Math.min(width, height) * 0.08;
-      const maxBarLen = Math.min(width, height) * 0.3;
-      const barsPerArm = 60;
-      const spiralTightness = 3.5;
-
-      for (let arm = 0; arm < arms; arm++) {
-        const armOffset = (arm / arms) * Math.PI * 2;
-
-        ctx.save();
-        ctx.translate(centerX, centerY);
-        ctx.rotate(time * 0.0002 * (arm % 2 === 0 ? 1 : -1) + armOffset);
-
-        for (let i = 0; i < barsPerArm; i++) {
-          const dataIndex = Math.floor((i / barsPerArm) * (bufferLength / 2));
-          const value = dataArray[dataIndex] || 0;
-          const percent = value / 255;
-
-          // 螺旋角度
-          const t = i / barsPerArm;
-          const spiralAngle = t * spiralTightness * Math.PI;
-          const radius = baseRadius + t * maxBarLen * 0.6;
-
-          const barLength = percent * maxBarLen * 0.4 + 2;
-          const x = Math.cos(spiralAngle) * radius;
-          const y = Math.sin(spiralAngle) * radius;
-          const prevX = Math.cos(spiralAngle - 0.02) * radius;
-          const prevY = Math.sin(spiralAngle - 0.02) * radius;
-
-          const hue = 220 + t * 80 - arm * 15; // 从蓝到紫到粉
-          const saturation = 70 + percent * 20;
-          const lightness = 40 + percent * 25;
-          const alpha = percent * 0.7 + 0.1;
-
-          ctx.strokeStyle = hsl(hue, saturation, lightness, alpha);
-          ctx.lineWidth = 1.5 + percent * 2;
-          ctx.lineCap = 'round';
-          ctx.shadowBlur = 8 + percent * 10;
-          ctx.shadowColor = hsl(hue, saturation, lightness + 10, alpha * 0.5);
-
-          ctx.beginPath();
-          ctx.moveTo(prevX, prevY);
-          ctx.lineTo(x + Math.cos(spiralAngle) * barLength,
-            y + Math.sin(spiralAngle) * barLength);
-          ctx.stroke();
-
-          // 在强拍处生成粒子
-          if (percent > 0.7 && Math.random() < 0.1) {
-            const px = centerX + x + Math.cos(spiralAngle) * barLength;
-            const py = centerY + y + Math.sin(spiralAngle) * barLength;
-            const vx = Math.cos(spiralAngle) * (1 + Math.random() * 2);
-            const vy = Math.sin(spiralAngle) * (1 + Math.random() * 2);
-            particles.push(new StarParticle(px, py, vx, vy, hue, 1 + Math.random() * 2));
-          }
-        }
-        ctx.restore();
-      }
-    }
-
-    // 绘制圆形频谱（轨道圈）
-    function drawOrbitalRings(bass, mid, treble, time) {
-      const rings = 3;
-      for (let r = 0; r < rings; r++) {
-        const ringRadius = Math.min(width, height) * (0.15 + r * 0.08) + bass * 40;
-        const bars = 80 + r * 20;
-        const step = (Math.PI * 2) / bars;
-
-        ctx.save();
-        for (let i = 0; i < bars; i++) {
-          const dataIndex = Math.floor((i / bars) * bufferLength);
-          const value = dataArray[dataIndex] || 0;
-          const percent = value / 255;
-
-          // 旋转偏移
-          const rotOffset = time * 0.0002 * (r % 2 === 0 ? 1 : -1) + r * 0.5;
-          const angle = i * step + rotOffset;
-
-          const innerR = ringRadius;
-          const outerR = ringRadius + percent * 30 + 2;
-
-          const x1 = centerX + Math.cos(angle) * innerR;
-          const y1 = centerY + Math.sin(angle) * innerR;
-          const x2 = centerX + Math.cos(angle) * outerR;
-          const y2 = centerY + Math.sin(angle) * outerR;
-
-          const hue = 220 + r * 30 + (i / bars) * 40;
-          ctx.strokeStyle = hsl(hue, 80, 50 + percent * 20, percent * 0.6 + 0.1);
-          ctx.lineWidth = 1.5;
-          ctx.lineCap = 'round';
-          ctx.shadowBlur = 6;
-          ctx.shadowColor = hsl(hue, 90, 60, percent * 0.3);
-
-          ctx.beginPath();
-          ctx.moveTo(x1, y1);
-          ctx.lineTo(x2, y2);
-          ctx.stroke();
-        }
-        ctx.restore();
-      }
-    }
-
-    // 绘制流星
-    function drawMeteors() {
-      for (let i = meteors.length - 1; i >= 0; i--) {
-        const m = meteors[i];
-        m.x += m.vx;
-        m.y += m.vy;
-        m.life -= m.decay;
-
-        if (m.life <= 0 || m.x > width + 100 || m.y > height + 100) {
-          meteors.splice(i, 1);
-          continue;
-        }
-
-        ctx.save();
-        // 流星尾迹
-        const tailX = m.x - m.vx * (m.length / Math.sqrt(m.vx * m.vx + m.vy * m.vy)) * 0.8;
-        const tailY = m.y - m.vy * (m.length / Math.sqrt(m.vx * m.vx + m.vy * m.vy)) * 0.8;
-
-        const grad = ctx.createLinearGradient(m.x, m.y, tailX, tailY);
-        grad.addColorStop(0, hsl(m.hue, 80, 80, m.life));
-        grad.addColorStop(0.3, hsl(m.hue, 70, 60, m.life * 0.5));
-        grad.addColorStop(1, hsl(m.hue, 60, 40, 0));
-
-        ctx.strokeStyle = grad;
-        ctx.lineWidth = m.width;
-        ctx.lineCap = 'round';
-        ctx.shadowBlur = 15;
-        ctx.shadowColor = hsl(m.hue, 90, 70, m.life * 0.6);
-        ctx.beginPath();
-        ctx.moveTo(m.x, m.y);
-        ctx.lineTo(tailX, tailY);
-        ctx.stroke();
-
-        // 流星头部亮点
-        ctx.fillStyle = hsl(m.hue, 60, 90, m.life);
-        ctx.shadowBlur = 20;
-        ctx.beginPath();
-        ctx.arc(m.x, m.y, m.width * 1.2, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.restore();
-
-        // 流星经过时偶尔留下粒子
-        if (Math.random() < 0.3) {
-          particles.push(new StarParticle(
-            m.x, m.y,
-            (Math.random() - 0.5) * 2,
-            (Math.random() - 0.5) * 2,
-            m.hue,
-            Math.random() * 1.5 + 0.5,
-            0.6
-          ));
-        }
-      }
-    }
-
-    // 绘制粒子与星座连线
-    function drawParticlesAndConstellations(mid) {
-      // 星座连线
-      if (mid > 0.2) {
-        const maxDist = 100 + mid * 80;
-        const maxDistSq = maxDist * maxDist;
-        const limit = Math.min(particles.length, 60);
-        ctx.save();
-        for (let i = 0; i < limit; i++) {
-          for (let j = i + 1; j < Math.min(i + 10, limit); j++) {
-            const dx = particles[i].x - particles[j].x;
-            const dy = particles[i].y - particles[j].y;
-            const distSq = dx * dx + dy * dy;
-            if (distSq < maxDistSq) {
-              const dist = Math.sqrt(distSq);
-              ctx.strokeStyle = hsl(220, 60, 70, (1 - dist / maxDist) * mid * 0.2);
-              ctx.lineWidth = 0.5;
-              ctx.beginPath();
-              ctx.moveTo(particles[i].x, particles[i].y);
-              ctx.lineTo(particles[j].x, particles[j].y);
-              ctx.stroke();
+            if (on || isPeak) {
+              // 顶部区段偏暖（红），中部青，底部亮青 —— 荧光渐层
+              let color = GLOW;
+              const ratio = s / SEG_MAX;
+              if (ratio > 0.82) color = "#ff5b6b";
+              else if (ratio > 0.62) color = "#ffd24a";
+              ctx.fillStyle = color;
+              ctx.shadowColor = color;
+              ctx.shadowBlur = isPeak ? 16 : 10;
+              ctx.globalAlpha = isPeak ? 1 : 0.92;
+            } else {
+              // 未点亮段：暗格（VFD 空段的微弱残影）
+              ctx.fillStyle = DIM;
+              ctx.shadowBlur = 0;
+              ctx.globalAlpha = 1;
             }
+            ctx.fillRect(x, y, barW, segH);
+          }
+
+          // 底部镜像倒影（渐隐，营造荧光玻璃反射）
+          const litH = litSeg * (segH + segGap);
+          if (litH > 0) {
+            const grad = ctx.createLinearGradient(0, specBottom, 0, specBottom + reflectH);
+            grad.addColorStop(0, "rgba(56, 249, 215, 0.22)");
+            grad.addColorStop(1, "rgba(56, 249, 215, 0)");
+            ctx.fillStyle = grad;
+            ctx.shadowBlur = 0;
+            ctx.globalAlpha = 1;
+            const rH = Math.min(reflectH, litH * 0.5);
+            ctx.fillRect(x, specBottom + 2, barW, rH);
           }
         }
+        ctx.globalAlpha = 1;
+        ctx.shadowBlur = 0;
+      }
+
+      // 底部波形（示波器式点阵）
+      function drawWaveform() {
+        const { pad, waveTop, waveH } = layout();
+        const usableW = W - pad * 2;
+        const mid = waveTop + waveH / 2;
+
+        ctx.save();
+        // 中线
+        ctx.strokeStyle = DIM;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(pad, mid);
+        ctx.lineTo(W - pad, mid);
+        ctx.stroke();
+
+        ctx.strokeStyle = GLOW;
+        ctx.shadowColor = GLOW;
+        ctx.shadowBlur = 8;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+
+        const n = 128;
+        for (let i = 0; i < n; i++) {
+          let v = 0.5;
+          if (running) {
+            const idx = Math.floor(i / n * timeData.length);
+            v = timeData[idx] / 255;
+          }
+          const x = pad + (i / (n - 1)) * usableW;
+          const y = mid + (v - 0.5) * waveH;
+          if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+        }
+        ctx.stroke();
         ctx.restore();
       }
 
-      // 更新和绘制粒子
-      for (let i = particles.length - 1; i >= 0; i--) {
-        particles[i].update();
-        particles[i].draw();
-        if (particles[i].life <= 0) {
-          particles.splice(i, 1);
+      // 右上角总电平条（VU 感）
+      function drawLevelMeter() {
+        if (!running) return;
+        let sum = 0;
+        for (let i = 0; i < freqData.length; i++) sum += freqData[i];
+        const avg = sum / freqData.length / 255;
+
+        const { pad } = layout();
+        const barW = 160, barH = 8;
+        const x = W - pad - barW;
+        const y = pad * 0.5 + 40;
+        const segs = 20;
+        const lit = Math.round(avg * 2.2 * segs);
+
+        for (let s = 0; s < segs; s++) {
+          const sx = x + s * (barW / segs);
+          const on = s < lit;
+          let color = GLOW;
+          if (s / segs > 0.8) color = "#ff5b6b";
+          else if (s / segs > 0.6) color = "#ffd24a";
+          ctx.fillStyle = on ? color : DIM;
+          ctx.shadowColor = color;
+          ctx.shadowBlur = on ? 10 : 0;
+          ctx.fillRect(sx, y, barW / segs - 3, barH);
         }
+        ctx.shadowBlur = 0;
       }
 
-      // 限制粒子数量
-      if (particles.length > 150) {
-        particles = particles.slice(-150);
+      // 频率 → 音名换算（用于状态栏显示主频音符）
+      const NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+      function freqToNote(f) {
+        if (f <= 0) return "--";
+        const n = Math.round(12 * Math.log2(f / 440) + 69);
+        const name = NOTE_NAMES[((n % 12) + 12) % 12];
+        const octave = Math.floor(n / 12) - 1;
+        return name + octave;
       }
-    }
 
-    // ==================== 主渲染循环 ====================
-    function render(time) {
-      animationId = requestAnimationFrame(render);
+      // 计算主频（能量最大的频点对应频率）
+      function dominantFreq() {
+        if (!running) return 0;
+        let maxV = 0, maxI = 0;
+        for (let i = 1; i < freqData.length; i++) {
+          if (freqData[i] > maxV) { maxV = freqData[i]; maxI = i; }
+        }
+        if (maxV < 20) return 0;
+        return maxI * sampleRate / analyser.fftSize;
+      }
 
-      // 清屏（带拖影效果，模拟深空）
-      ctx.fillStyle = 'rgba(2, 3, 12, 0.2)';
-      ctx.fillRect(0, 0, width, height);
+      // 底部数字状态栏（时钟 / 主频 / 音符 / dB），纯文字仪表读数
+      function drawStatusBar() {
+        const { pad, statusY } = layout();
+        const usableW = W - pad * 2;
 
-      // 获取音频数据
-      let bass = 0, mid = 0, treble = 0, avgVolume = 0;
-
-      if (analyser) {
-        analyser.getByteFrequencyData(dataArray);
-
-        let bSum = 0, mSum = 0, tSum = 0, total = 0;
-        const bEnd = Math.floor(bufferLength * 0.1);
-        const mEnd = Math.floor(bufferLength * 0.45);
-
-        for (let i = 0; i < bufferLength; i++) {
-          const v = dataArray[i] / 255;
-          total += v;
-          if (i < bEnd) bSum += v;
-          else if (i < mEnd) mSum += v;
-          else tSum += v;
+        // RMS → dB
+        let db = -Infinity;
+        if (running) {
+          let sum = 0;
+          for (let i = 0; i < timeData.length; i++) {
+            const v = (timeData[i] - 128) / 128;
+            sum += v * v;
+          }
+          const rms = Math.sqrt(sum / timeData.length);
+          db = rms > 0 ? 20 * Math.log10(rms) : -Infinity;
         }
 
-        bass = bSum / bEnd;
-        mid = mSum / (mEnd - bEnd);
-        treble = tSum / (bufferLength - mEnd);
-        avgVolume = total / bufferLength;
-      } else {
-        // 无音频时的默认安静动画
-        const bLen = 128;
-        if (!dataArray || dataArray.length !== bLen) {
-          dataArray = new Uint8Array(bLen);
-          bufferLength = bLen;
-        }
-        for (let i = 0; i < bLen; i++) {
-          dataArray[i] = (Math.sin(time * 0.001 + i * 0.15) * 15 + 20 + Math.sin(time * 0.0005 + i * 0.05) * 10);
-        }
-        bass = Math.sin(time * 0.001) * 0.1 + 0.15;
-        mid = Math.sin(time * 0.0015) * 0.08 + 0.12;
-        treble = Math.sin(time * 0.002) * 0.05 + 0.1;
-        avgVolume = 0.15;
+        const f = dominantFreq();
+        const now = new Date();
+        const clock = now.toTimeString().slice(0, 8);
+
+        const cells = [
+          ["TIME", clock],
+          ["PEAK", f > 0 ? f.toFixed(0) + " Hz" : "--- Hz"],
+          ["NOTE", running ? freqToNote(f) : "--"],
+          ["LEVEL", isFinite(db) ? db.toFixed(1) + " dB" : "-inf dB"],
+          ["FFT", running ? analyser.fftSize + "" : "----"]
+        ];
+
+        ctx.save();
+        // 分隔线
+        ctx.strokeStyle = DIM;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(pad, statusY - 8);
+        ctx.lineTo(W - pad, statusY - 8);
+        ctx.stroke();
+
+        ctx.textBaseline = "top";
+        const cellW = (usableW * 0.78) / cells.length;   // 右侧留白给操作按钮
+        cells.forEach((c, i) => {
+          const cx = pad + i * cellW;
+          // 标签
+          ctx.font = "11px Consolas, monospace";
+          ctx.fillStyle = DIM;
+          ctx.shadowBlur = 0;
+          ctx.fillText(c[0], cx, statusY);
+          // 数值
+          ctx.font = "600 18px Consolas, monospace";
+          ctx.fillStyle = GLOW;
+          ctx.shadowColor = GLOW;
+          ctx.shadowBlur = 10;
+          ctx.fillText(c[1], cx, statusY + 14);
+        });
+        ctx.restore();
       }
 
-      // 检测节拍
-      const isBeat = detectBeat(bass);
-
-      // 节拍触发流星和爆发
-      if (isBeat && bass > 0.45) {
-        spawnMeteor(bass);
-        // 核心爆发粒子
-        const burstCount = Math.floor(bass * 15) + 5;
-        for (let i = 0; i < burstCount; i++) {
-          const angle = Math.random() * Math.PI * 2;
-          const speed = 2 + bass * 6 + Math.random() * 3;
-          const hue = 200 + Math.random() * 80;
-          const p = new StarParticle(
-            centerX, centerY,
-            Math.cos(angle) * speed,
-            Math.sin(angle) * speed,
-            hue,
-            1.5 + Math.random() * 2,
-            0.8 + Math.random() * 0.4
-          );
-          particles.push(p);
-        }
-      }
-
-      // 随机流星
-      if (Math.random() < 0.005 + avgVolume * 0.02) {
-        spawnMeteor(avgVolume);
-      }
-
-      // 绘制顺序：星空 → 星云 → 星系核心 → 轨道环 → 旋臂频谱 → 流星 → 粒子/星座
-      drawStarfield(time, avgVolume, bass);
-      drawNebula(time, mid, treble);
-      drawGalacticCore(bass, mid, treble, time);
-      drawOrbitalRings(bass, mid, treble, time);
-      drawFrequencyArms(time, bass, mid, treble);
-      drawMeteors();
-      drawParticlesAndConstellations(mid);
-
-      // 更新音量条
-      const fill = document.getElementById('volumeFill');
-      if (fill) {
-        fill.style.height = `${Math.min(avgVolume * 100 * 3, 100)}%`;
-      }
-
-      // 更新进度条
-      if (!isMicActive && audio.duration) {
-        const progress = (audio.currentTime / audio.duration) * 100;
-        document.getElementById('progressFill').style.width = `${progress}%`;
-        document.getElementById('currentTime').textContent = formatTime(audio.currentTime);
-      }
-    }
-
-    // ==================== 事件绑定 ====================
-
-    // 文件上传
-    document.getElementById('uploadBtn').addEventListener('click', () => {
-      document.getElementById('fileInput').click();
-    });
-
-    document.getElementById('fileInput').addEventListener('change', (e) => {
-      const file = e.target.files[0];
-      if (file) {
-        playFile(file);
-      }
-    });
-
-    // 麦克风
-    document.getElementById('micBtn').addEventListener('click', toggleMic);
-
-    // 播放/暂停
-    document.getElementById('playBtn').addEventListener('click', () => {
-      if (isPlaying) {
-        audio.pause();
-        isPlaying = false;
-        document.getElementById('playBtn').textContent = '播放';
-      } else {
-        audio.play();
-        isPlaying = true;
-        document.getElementById('playBtn').textContent = '暂停';
-      }
-    });
-
-    audio.addEventListener('ended', () => {
-      isPlaying = false;
-      document.getElementById('playBtn').textContent = '播放';
-    });
-
-    // 进度条点击跳转
-    document.getElementById('progressBar').addEventListener('click', (e) => {
-      if (!audio.duration) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const percent = (e.clientX - rect.left) / rect.width;
-      audio.currentTime = percent * audio.duration;
-    });
-
-    // 拖拽文件
-    document.addEventListener('dragover', (e) => {
-      e.preventDefault();
-    });
-
-    document.addEventListener('drop', (e) => {
-      e.preventDefault();
-      const file = e.dataTransfer.files[0];
-      if (file && file.type.startsWith('audio/')) {
-        playFile(file);
-      }
-    });
-
-    // 全屏切换
-    const fullscreenBtn = document.getElementById('fullscreenBtn');
-
-    function toggleFullscreen() {
-      if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen().catch(() => { });
-        fullscreenBtn.textContent = '退出全屏';
-      } else {
-        document.exitFullscreen();
-        fullscreenBtn.textContent = '全屏';
-      }
-    }
-
-    fullscreenBtn.addEventListener('click', toggleFullscreen);
-
-    document.addEventListener('fullscreenchange', () => {
-      fullscreenBtn.textContent = document.fullscreenElement ? '退出全屏' : '全屏';
-    });
-
-    // 键盘快捷键
-    document.addEventListener('keydown', (e) => {
-      if (e.code === 'Space') {
-        e.preventDefault();
-        if (!isMicActive && audio.src) {
-          document.getElementById('playBtn').click();
-        }
-      } else if (e.code === 'KeyF') {
-        toggleFullscreen();
-      }
-    });
-
-    // 启动渲染
-    render(0);
+      draw();
+    })();
   </script>
 </body>
 </html>
