diff --git a/HTML/audio-visualization/1.html b/HTML/audio-visualization/1.html
new file mode 100644
index 0000000..c21a726
--- /dev/null
+++ b/HTML/audio-visualization/1.html
@@ -0,0 +1,994 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>音频可视化 - Audio Visualizer</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      background: #000;
+      overflow: hidden;
+      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+      color: #fff;
+    }
+
+    canvas {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    /* 控制面板 */
+    .controls {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      z-index: 100;
+      padding: 6px 12px;
+    }
+
+    .btn {
+      padding: 6px 14px;
+      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: #f5576c;
+      animation: pulse 1.5s infinite;
+    }
+
+    @keyframes pulse {
+
+      0%,
+      100% {
+        opacity: 1;
+      }
+
+      50% {
+        opacity: 0.6;
+      }
+    }
+
+    input[type="file"] {
+      display: none;
+    }
+
+    /* 模式切换 */
+    .mode-switch {
+      display: flex;
+      gap: 2px;
+      align-items: center;
+    }
+
+    .mode-label {
+      font-size: 12px;
+      opacity: 0.35;
+      margin-right: 6px;
+      letter-spacing: 1px;
+    }
+
+    .mode-btn {
+      padding: 6px 10px;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: rgba(255, 255, 255, 0.4);
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      letter-spacing: 0.5px;
+    }
+
+    .mode-btn:hover {
+      color: rgba(255, 255, 255, 0.75);
+      background: rgba(255, 255, 255, 0.06);
+    }
+
+    .mode-btn.active {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    /* 标题 */
+    .title {
+      position: fixed;
+      top: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 13px;
+      font-weight: 400;
+      letter-spacing: 6px;
+      text-transform: uppercase;
+      z-index: 100;
+      color: rgba(255, 255, 255, 0.3);
+      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;
+    }
+
+    .volume-fill {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.4);
+      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;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 12px;
+      opacity: 0;
+      z-index: 100;
+      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(255, 255, 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;
+    }
+  </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>
+  </div>
+
+  <div class="controls">
+    <input type="file" id="fileInput" accept="audio/*">
+    <button class="btn" id="uploadBtn">打开文件</button>
+    <button class="btn" id="micBtn">麦克风</button>
+
+    <div class="divider"></div>
+
+    <button class="btn" id="playBtn" style="display:none;">播放</button>
+
+    <div class="divider"></div>
+
+    <div class="mode-switch">
+      <button class="mode-btn active" data-mode="0">频谱</button>
+      <button class="mode-btn" data-mode="1">波纹</button>
+      <button class="mode-btn" data-mode="2">粒子</button>
+      <button class="mode-btn" data-mode="3">组合</button>
+    </div>
+
+    <div class="divider"></div>
+
+    <button class="btn" id="fullscreenBtn">全屏</button>
+  </div>
+
+  <script>
+    // ==================== 初始化 ====================
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+
+    let width, height, centerX, centerY;
+
+    function resize() {
+      width = canvas.width = window.innerWidth;
+      height = canvas.height = window.innerHeight;
+      centerX = width / 2;
+      centerY = height / 2;
+    }
+    resize();
+    window.addEventListener('resize', resize);
+
+    // ==================== 音频相关 ====================
+    let audioContext;
+    let analyser;
+    let source;
+    let audio = new Audio();
+    let dataArray;
+    let bufferLength;
+    let isPlaying = false;
+    let isMicActive = false;
+    let micStream;
+    let currentMode = 0;
+    let animationId;
+
+    // 粒子系统
+    let particles = [];
+    let stars = [];
+
+    // 初始化星空背景
+    function initStars() {
+      stars = [];
+      const count = 200;
+      for (let i = 0; i < count; i++) {
+        stars.push({
+          x: Math.random() * width,
+          y: Math.random() * height,
+          radius: Math.random() * 1.5 + 0.5,
+          opacity: Math.random() * 0.8 + 0.2,
+          speed: Math.random() * 0.5 + 0.1,
+          twinkleSpeed: Math.random() * 0.02 + 0.01
+        });
+      }
+    }
+    initStars();
+
+    // 初始化音频上下文
+    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 playFile(file) {
+      initAudio();
+
+      if (audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+
+      stopMic();
+
+      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);
+      });
+    }
+
+    // 使用麦克风
+    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')}`;
+    }
+
+    // ==================== 粒子类 ====================
+    class Particle {
+      constructor(x, y, color) {
+        this.x = x;
+        this.y = y;
+        this.color = color;
+        this.vx = (Math.random() - 0.5) * 5;
+        this.vy = (Math.random() - 0.5) * 5;
+        this.life = 1;
+        this.decay = Math.random() * 0.02 + 0.012;
+        this.size = Math.random() * 3 + 1.5;
+      }
+
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.vx *= 0.98;
+        this.vy *= 0.98;
+        this.life -= this.decay;
+        this.size *= 0.99;
+      }
+
+      draw() {
+        ctx.save();
+        ctx.globalAlpha = this.life;
+        ctx.fillStyle = this.color;
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = this.color;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+
+    // ==================== 颜色工具 ====================
+    function hslToColor(h, s, l, alpha) {
+      return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
+    }
+
+    // ==================== 可视化模式 ====================
+
+    // 模式0：频谱柱状图（居中对称 + 镜像）
+    function drawSpectrum() {
+      const barCount = bufferLength / 2;
+      const barWidth = (width * 0.8) / barCount;
+      const gap = 2;
+      const maxBarHeight = height * 0.35;
+      const startX = width * 0.1;
+      const baseY = centerY + 50;
+
+      let totalVolume = 0;
+
+      for (let i = 0; i < barCount; i++) {
+        const value = dataArray[i];
+        const percent = value / 255;
+        totalVolume += percent;
+
+        const barHeight = percent * maxBarHeight;
+        const x = startX + i * barWidth;
+        const hue = (i / barCount) * 280 + 180; // 蓝到紫到红
+        const saturation = 80 + percent * 20;
+        const lightness = 50 + percent * 15;
+
+        const color = hslToColor(hue, saturation, lightness, 0.9);
+        const glowColor = hslToColor(hue, saturation, lightness, 0.3);
+
+        // 上半部分
+        ctx.save();
+        ctx.fillStyle = color;
+        ctx.shadowBlur = 15;
+        ctx.shadowColor = glowColor;
+        const w = barWidth - gap;
+        ctx.fillRect(x, baseY - barHeight, w, barHeight);
+        // 镜像（下半部分，稍暗）
+        ctx.globalAlpha = 0.3;
+        ctx.fillRect(x, baseY, w, barHeight * 0.5);
+        ctx.restore();
+
+        // 顶部亮块
+        if (barHeight > 5) {
+          ctx.save();
+          ctx.fillStyle = hslToColor(hue, saturation, lightness + 20, 1);
+          ctx.shadowBlur = 20;
+          ctx.shadowColor = hslToColor(hue, 90, 70, 1);
+          ctx.fillRect(x, baseY - barHeight - 3, w, 3);
+          ctx.restore();
+        }
+      }
+
+      // 粒子喷发
+      const avgVolume = totalVolume / barCount;
+      if (avgVolume > 0.5 && Math.random() < avgVolume * 0.2) {
+        const randomI = Math.floor(Math.random() * barCount);
+        const rx = startX + randomI * barWidth;
+        const rhue = (randomI / barCount) * 280 + 180;
+        particles.push(new Particle(rx, baseY - (dataArray[randomI] / 255) * maxBarHeight,
+          hslToColor(rhue, 90, 60, 1)));
+      }
+
+      return totalVolume / barCount;
+    }
+
+    // 模式1：圆形波纹
+    function drawCircle() {
+      const radius = Math.min(width, height) * 0.2;
+      const bars = 180;
+      const step = (Math.PI * 2) / bars;
+
+      let totalVolume = 0;
+
+      for (let i = 0; i < bars; i++) {
+        const dataIndex = Math.floor((i / bars) * (bufferLength / 2));
+        const value = dataArray[dataIndex];
+        const percent = value / 255;
+        totalVolume += percent;
+
+        const barLength = percent * radius * 1.2 + 5;
+        const angle = i * step - Math.PI / 2;
+
+        const innerX = centerX + Math.cos(angle) * radius;
+        const innerY = centerY + Math.sin(angle) * radius;
+        const outerX = centerX + Math.cos(angle) * (radius + barLength);
+        const outerY = centerY + Math.sin(angle) * (radius + barLength);
+
+        const hue = (i / bars) * 360;
+        const color = hslToColor(hue, 90, 50 + percent * 20, 0.8);
+
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 3;
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = color;
+        ctx.lineCap = 'round';
+        ctx.beginPath();
+        ctx.moveTo(innerX, innerY);
+        ctx.lineTo(outerX, outerY);
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      // 内圆
+      const avgVolume = totalVolume / bars;
+      const innerRadius = radius * 0.7 + avgVolume * 30;
+
+      ctx.save();
+      const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, innerRadius);
+      gradient.addColorStop(0, 'rgba(102, 126, 234, 0.1)');
+      gradient.addColorStop(0.5, 'rgba(118, 75, 162, 0.05)');
+      gradient.addColorStop(1, 'rgba(102, 126, 234, 0.01)');
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
+      ctx.fill();
+
+      // 内圆环
+      ctx.strokeStyle = `rgba(102, 126, 234, ${0.3 + avgVolume * 0.4})`;
+      ctx.lineWidth = 2;
+      ctx.shadowBlur = 20;
+      ctx.shadowColor = 'rgba(102, 126, 234, 0.8)';
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.restore();
+
+      // 波形环
+      ctx.save();
+      ctx.strokeStyle = 'rgba(240, 147, 251, 0.4)';
+      ctx.lineWidth = 2;
+      ctx.shadowBlur = 15;
+      ctx.shadowColor = 'rgba(240, 147, 251, 0.6)';
+      ctx.beginPath();
+      for (let i = 0; i <= bufferLength; i++) {
+        const angle = (i / bufferLength) * Math.PI * 2 - Math.PI / 2;
+        const waveR = innerRadius * 0.85 + (dataArray[i % bufferLength] / 255) * 20;
+        const wx = centerX + Math.cos(angle) * waveR;
+        const wy = centerY + Math.sin(angle) * waveR;
+        if (i === 0) ctx.moveTo(wx, wy);
+        else ctx.lineTo(wx, wy);
+      }
+      ctx.closePath();
+      ctx.stroke();
+      ctx.restore();
+
+      // 粒子
+      if (avgVolume > 0.4 && Math.random() < avgVolume * 0.15) {
+        const angle = Math.random() * Math.PI * 2;
+        const pr = innerRadius + Math.random() * 20;
+        const px = centerX + Math.cos(angle) * pr;
+        const py = centerY + Math.sin(angle) * pr;
+        const hue = (angle / (Math.PI * 2)) * 360;
+        particles.push(new Particle(px, py, hslToColor(hue, 90, 60, 1)));
+      }
+
+      return avgVolume;
+    }
+
+    // 模式2：粒子星空
+    function drawParticles() {
+      let totalVolume = 0;
+      let bass = 0, mid = 0, treble = 0;
+
+      for (let i = 0; i < bufferLength; i++) {
+        const v = dataArray[i] / 255;
+        totalVolume += v;
+        if (i < bufferLength * 0.15) bass += v;
+        else if (i < bufferLength * 0.5) mid += v;
+        else treble += v;
+      }
+
+      const avgVolume = totalVolume / bufferLength;
+      bass /= bufferLength * 0.15;
+      mid /= bufferLength * 0.35;
+      treble /= bufferLength * 0.5;
+
+      // 中心光晕
+      const glowRadius = 100 + bass * 200;
+      ctx.save();
+      const glow = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, glowRadius);
+      glow.addColorStop(0, `rgba(245, 87, 108, ${bass * 0.3})`);
+      glow.addColorStop(0.3, `rgba(240, 147, 251, ${mid * 0.15})`);
+      glow.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = glow;
+      ctx.fillRect(0, 0, width, height);
+      ctx.restore();
+
+      // 生成新粒子（跟随低音）
+      const particleCount = Math.floor(bass * 4) + 1;
+      for (let i = 0; i < particleCount; i++) {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = 2 + bass * 6 + Math.random() * 3;
+        const hue = treble > mid ? 180 + Math.random() * 120 : 260 + Math.random() * 100;
+        const p = new Particle(centerX, centerY, hslToColor(hue, 90, 60, 1));
+        p.vx = Math.cos(angle) * speed;
+        p.vy = Math.sin(angle) * speed;
+        p.decay = 0.012 + Math.random() * 0.012;
+        p.size = 2 + bass * 3 + Math.random() * 2;
+        particles.push(p);
+      }
+
+      // 连接线（中音强时，限制检测数量优化性能）
+      if (mid > 0.3) {
+        const maxDist = 80 + mid * 60;
+        const maxDistSq = maxDist * maxDist;
+        const lineLimit = Math.min(particles.length, 80);
+        ctx.save();
+        for (let i = 0; i < lineLimit; i++) {
+          // 只与后续少量粒子比较，避免 O(n²) 过大
+          const checkLimit = Math.min(i + 12, lineLimit);
+          for (let j = i + 1; j < checkLimit; 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 = `rgba(102, 126, 234, ${(1 - dist / maxDist) * mid * 0.25})`;
+              ctx.lineWidth = 0.5;
+              ctx.beginPath();
+              ctx.moveTo(particles[i].x, particles[i].y);
+              ctx.lineTo(particles[j].x, particles[j].y);
+              ctx.stroke();
+            }
+          }
+        }
+        ctx.restore();
+      }
+
+      return avgVolume;
+    }
+
+    // 模式3：组合模式（圆形 + 频谱 + 粒子）
+    function drawCombined() {
+      // 底部频谱
+      const barCount = 64;
+      const barWidth = width / barCount;
+      const maxHeight = height * 0.2;
+      let totalVolume = 0;
+
+      for (let i = 0; i < barCount; i++) {
+        const dataIndex = Math.floor((i / barCount) * (bufferLength / 2));
+        const value = dataArray[dataIndex];
+        const percent = value / 255;
+        totalVolume += percent;
+
+        const barHeight = percent * maxHeight;
+        const x = i * barWidth;
+        const hue = (i / barCount) * 60 + 200;
+
+        ctx.save();
+        const gradient = ctx.createLinearGradient(0, height - barHeight, 0, height);
+        gradient.addColorStop(0, hslToColor(hue, 90, 60, 0.8));
+        gradient.addColorStop(1, hslToColor(hue, 90, 30, 0.2));
+        ctx.fillStyle = gradient;
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = hslToColor(hue, 90, 60, 0.5);
+        ctx.fillRect(x + 1, height - barHeight, barWidth - 2, barHeight);
+        ctx.restore();
+      }
+
+      // 中心圆形
+      const radius = Math.min(width, height) * 0.12;
+      const avgVolume = totalVolume / barCount;
+      const circleBars = 120;
+
+      ctx.save();
+      for (let i = 0; i < circleBars; i++) {
+        const dataIndex = Math.floor((i / circleBars) * (bufferLength / 2));
+        const value = dataArray[dataIndex];
+        const percent = value / 255;
+        const barLength = percent * radius * 1.5 + 3;
+        const angle = (i / circleBars) * Math.PI * 2 - Math.PI / 2 + performance.now() * 0.0003;
+
+        const x1 = centerX + Math.cos(angle) * radius;
+        const y1 = centerY - 30 + Math.sin(angle) * radius;
+        const x2 = centerX + Math.cos(angle) * (radius + barLength);
+        const y2 = centerY - 30 + Math.sin(angle) * (radius + barLength);
+
+        const hue = (i / circleBars) * 360 + performance.now() * 0.05;
+        ctx.strokeStyle = hslToColor(hue % 360, 90, 55 + percent * 15, 0.7);
+        ctx.lineWidth = 2;
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = hslToColor(hue % 360, 90, 60, 0.5);
+        ctx.lineCap = 'round';
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+      }
+      ctx.restore();
+
+      // 中心圆
+      const coreR = radius * 0.6 + avgVolume * 25;
+      ctx.save();
+      const coreGrad = ctx.createRadialGradient(centerX, centerY - 30, 0, centerX, centerY - 30, coreR);
+      coreGrad.addColorStop(0, `rgba(255, 255, 255, ${0.3 + avgVolume * 0.3})`);
+      coreGrad.addColorStop(0.3, 'rgba(240, 147, 251, 0.3)');
+      coreGrad.addColorStop(1, 'rgba(102, 126, 234, 0)');
+      ctx.fillStyle = coreGrad;
+      ctx.beginPath();
+      ctx.arc(centerX, centerY - 30, coreR, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+
+      // 粒子
+      if (avgVolume > 0.4 && Math.random() < avgVolume * 0.2) {
+        const angle = Math.random() * Math.PI * 2;
+        const pr = radius + Math.random() * 30;
+        const px = centerX + Math.cos(angle) * pr;
+        const py = centerY - 30 + Math.sin(angle) * pr;
+        const hue = Math.random() * 360;
+        particles.push(new Particle(px, py, hslToColor(hue, 90, 65, 1)));
+      }
+
+      return avgVolume;
+    }
+
+    // ==================== 绘制星空背景 ====================
+    function drawStars(time) {
+      for (const star of stars) {
+        const twinkle = Math.sin(time * star.twinkleSpeed + star.x) * 0.3 + 0.7;
+        ctx.save();
+        ctx.globalAlpha = star.opacity * twinkle;
+        ctx.fillStyle = '#fff';
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+
+        // 缓慢移动
+        star.y += star.speed;
+        if (star.y > height) {
+          star.y = 0;
+          star.x = Math.random() * width;
+        }
+      }
+    }
+
+    // ==================== 主渲染循环 ====================
+    function render(time) {
+      animationId = requestAnimationFrame(render);
+
+      // 清屏（带拖影效果）
+      ctx.fillStyle = 'rgba(0, 0, 8, 0.15)';
+      ctx.fillRect(0, 0, width, height);
+
+      // 星空
+      drawStars(time);
+
+      // 获取音频数据
+      let avgVolume = 0;
+      if (analyser) {
+        analyser.getByteFrequencyData(dataArray);
+      } else {
+        // 无音频时的默认动画
+        dataArray = new Uint8Array(bufferLength || 128);
+        for (let i = 0; i < dataArray.length; i++) {
+          dataArray[i] = Math.sin(time * 0.002 + i * 0.1) * 30 + 30;
+        }
+        bufferLength = dataArray.length;
+      }
+
+      // 绘制当前模式
+      switch (currentMode) {
+        case 0: avgVolume = drawSpectrum(); break;
+        case 1: avgVolume = drawCircle(); break;
+        case 2: avgVolume = drawParticles(); break;
+        case 3: avgVolume = drawCombined(); break;
+      }
+
+      // 更新和绘制粒子
+      for (let i = particles.length - 1; i >= 0; i--) {
+        particles[i].update();
+        particles[i].draw();
+        if (particles[i].life <= 0) {
+          particles.splice(i, 1);
+        }
+      }
+
+      // 限制粒子数量
+      if (particles.length > 200) {
+        particles = particles.slice(-200);
+      }
+
+      // 更新音量条
+      const fill = document.getElementById('volumeFill');
+      if (fill) {
+        fill.style.height = `${Math.min(avgVolume * 100 * 2.5, 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.querySelectorAll('.mode-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentMode = parseInt(btn.dataset.mode);
+        particles = []; // 切换模式时清空粒子
+      });
+    });
+
+    // 进度条点击跳转
+    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();
+      } else if (e.code >= 'Digit1' && e.code <= 'Digit4') {
+        const mode = parseInt(e.code.slice(-1)) - 1;
+        document.querySelectorAll('.mode-btn')[mode]?.click();
+      }
+    });
+
+    // 启动渲染
+    render(0);
+  </script>
+</body>
+</html>
diff --git a/HTML/audio-visualization/2.html b/HTML/audio-visualization/2.html
new file mode 100644
index 0000000..706e399
--- /dev/null
+++ b/HTML/audio-visualization/2.html
@@ -0,0 +1,1035 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>音频可视化 - Audio Visualizer</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      background: #000;
+      overflow: hidden;
+      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+      color: #fff;
+    }
+
+    canvas {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    /* 控制面板 */
+    .controls {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      z-index: 100;
+      padding: 6px 12px;
+    }
+
+    .btn {
+      padding: 6px 14px;
+      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;
+      text-transform: uppercase;
+      z-index: 100;
+      color: rgba(255, 255, 255, 0.3);
+      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;
+    }
+
+    .volume-fill {
+      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;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 12px;
+      opacity: 0;
+      z-index: 100;
+      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;
+    }
+  </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>
+  </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');
+
+    let width, height, centerX, centerY;
+
+    function resize() {
+      width = canvas.width = window.innerWidth;
+      height = canvas.height = window.innerHeight;
+      centerX = width / 2;
+      centerY = height / 2;
+      initStarfield();
+    }
+    window.addEventListener('resize', resize);
+
+    // ==================== 音频相关 ====================
+    let audioContext;
+    let analyser;
+    let source;
+    let audio = new Audio();
+    let dataArray;
+    let bufferLength;
+    let isPlaying = false;
+    let isMicActive = false;
+    let micStream;
+    let animationId;
+
+    // 初始化音频上下文
+    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 playFile(file) {
+      initAudio();
+
+      if (audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+
+      stopMic();
+
+      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);
+      });
+    }
+
+    // 使用麦克风
+    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
+      });
+    }
+
+    // 粒子（用于爆发和星座连线）
+    let particles = [];
+
+    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;
+      }
+
+      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;
+      }
+
+      draw() {
+        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.restore();
+      }
+    }
+
+    // 上一拍检测
+    let beatThreshold = 0.5;
+    let beatHistory = [];
+    let beatCooldown = 0;
+
+    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();
+          }
+
+          // 星星主体
+          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();
+        }
+      }
+    }
+
+    // 绘制星云
+    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 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();
+    }
+
+    // 绘制星系核心（脉冲星）
+    function drawGalacticCore(bass, mid, treble, time) {
+      const baseRadius = Math.min(width, height) * 0.06;
+      const coreRadius = baseRadius + bass * 80;
+
+      // 外层光晕
+      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();
+
+      // 核心光芒
+      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();
+            }
+          }
+        }
+        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);
+        }
+      }
+
+      // 限制粒子数量
+      if (particles.length > 150) {
+        particles = particles.slice(-150);
+      }
+    }
+
+    // ==================== 主渲染循环 ====================
+    function render(time) {
+      animationId = requestAnimationFrame(render);
+
+      // 清屏（带拖影效果，模拟深空）
+      ctx.fillStyle = 'rgba(2, 3, 12, 0.2)';
+      ctx.fillRect(0, 0, width, height);
+
+      // 获取音频数据
+      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;
+        }
+
+        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 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);
+  </script>
+</body>
+</html>
diff --git a/HTML/audio-visualization/3.html b/HTML/audio-visualization/3.html
new file mode 100644
index 0000000..0be6474
--- /dev/null
+++ b/HTML/audio-visualization/3.html
@@ -0,0 +1,842 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>音频可视化 - Audio Visualizer</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      background: #000;
+      overflow: hidden;
+      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+      color: #fff;
+    }
+
+    canvas {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    /* 控制面板 */
+    .controls {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      z-index: 100;
+      padding: 6px 12px;
+    }
+
+    .btn {
+      padding: 6px 14px;
+      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: #4da6ff;
+      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;
+      text-transform: uppercase;
+      z-index: 100;
+      color: rgba(255, 255, 255, 0.3);
+      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;
+    }
+
+    .volume-fill {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: rgba(77, 166, 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;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 12px;
+      opacity: 0;
+      z-index: 100;
+      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(77, 166, 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;
+    }
+
+    /* 震动效果 */
+    .shake {
+      animation: shake 0.15s ease-out;
+    }
+
+    @keyframes shake {
+      0%, 100% { transform: translate(0, 0); }
+      25% { transform: translate(-3px, 2px); }
+      50% { transform: translate(2px, -3px); }
+      75% { transform: translate(-2px, -1px); }
+    }
+  </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>
+  </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');
+
+    let width, height;
+
+    function resize() {
+      width = canvas.width = window.innerWidth;
+      height = canvas.height = window.innerHeight;
+      initStars();
+    }
+    window.addEventListener('resize', resize);
+
+    // ==================== 音频相关 ====================
+    let audioContext;
+    let analyser;
+    let source;
+    let audio = new Audio();
+    let dataArray;
+    let bufferLength;
+    let isPlaying = false;
+    let isMicActive = false;
+    let micStream;
+    let animationId;
+
+    // 初始化音频上下文
+    function initAudio() {
+      if (audioContext) return;
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      analyser.smoothingTimeConstant = 0.8;
+      bufferLength = analyser.frequencyBinCount;
+      dataArray = new Uint8Array(bufferLength);
+    }
+
+    // 播放音频文件
+    function playFile(file) {
+      initAudio();
+
+      if (audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+
+      stopMic();
+
+      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);
+      });
+    }
+
+    // 使用麦克风
+    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 stars = [];
+    const STAR_COUNT = 200;
+
+    function initStars() {
+      stars = [];
+      for (let i = 0; i < STAR_COUNT; i++) {
+        stars.push({
+          x: Math.random() * width,
+          y: Math.random() * height,
+          size: Math.random() * 1.2 + 0.3,
+          brightness: Math.random() * 0.5 + 0.3,
+          twinkleSpeed: Math.random() * 0.02 + 0.005,
+          twinklePhase: Math.random() * Math.PI * 2
+        });
+      }
+    }
+
+    function drawStars(time) {
+      for (const star of stars) {
+        const twinkle = Math.sin(time * star.twinkleSpeed + star.twinklePhase) * 0.3 + 0.7;
+        const alpha = star.brightness * twinkle;
+
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = 'rgba(220, 230, 255, 1)';
+        ctx.shadowBlur = star.size * 2;
+        ctx.shadowColor = 'rgba(180, 200, 255, 0.4)';
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+
+    // ==================== 流星系统 ====================
+    let meteors = [];
+
+    class Meteor {
+      constructor(options = {}) {
+        // 流星起始位置（固定从右上角飞入）
+        this.x = width * 0.5 + Math.random() * width * 0.8;
+        this.y = -20 - Math.random() * height * 0.3;
+
+        // 飞行角度（固定从右上到左下，略有随机偏移）
+        this.angle = Math.PI * 3 / 4 + (Math.random() - 0.5) * 0.2; // 约135°方向（左下），偏移±11°
+
+        this.speed = options.speed || (6 + Math.random() * 8);
+        this.vx = Math.cos(this.angle) * this.speed;
+        this.vy = Math.sin(this.angle) * this.speed;
+
+        // 外观属性
+        this.hue = options.hue !== undefined ? options.hue : (200 + Math.random() * 40); // 蓝色调为主
+        this.size = options.size || (1.5 + Math.random() * 2);
+        this.tailLength = options.tailLength || (80 + Math.random() * 120);
+        this.life = 1;
+        this.decay = options.decay || (0.003 + Math.random() * 0.004);
+
+        // 尾迹粒子
+        this.trailParticles = [];
+        this.trailTimer = 0;
+      }
+
+      update(intensity) {
+        // 速度受音频强度影响
+        const speedMult = 1 + intensity * 2.5;
+        this.x += this.vx * speedMult;
+        this.y += this.vy * speedMult;
+
+        // 产生尾迹粒子
+        this.trailTimer++;
+        if (this.trailTimer >= 1) {
+          this.trailTimer = 0;
+          this.trailParticles.push({
+            x: this.x,
+            y: this.y,
+            vx: -this.vx * 0.1 + (Math.random() - 0.5) * 0.5,
+            vy: -this.vy * 0.1 + (Math.random() - 0.5) * 0.5,
+            size: this.size * (0.3 + Math.random() * 0.4),
+            life: 1,
+            decay: 0.02 + Math.random() * 0.03
+          });
+        }
+
+        // 更新尾迹粒子
+        for (let i = this.trailParticles.length - 1; i >= 0; i--) {
+          const p = this.trailParticles[i];
+          p.x += p.vx;
+          p.y += p.vy;
+          p.vx *= 0.96;
+          p.vy *= 0.96;
+          p.life -= p.decay;
+          p.size *= 0.97;
+          if (p.life <= 0) {
+            this.trailParticles.splice(i, 1);
+          }
+        }
+
+        // 生命周期衰减
+        this.life -= this.decay;
+
+        // 超出屏幕（左下方向）时加速消亡
+        if (this.x < -200 || this.y > height + 200) {
+          this.life = Math.min(this.life, 0.3);
+          this.decay = Math.max(this.decay, 0.02);
+        }
+      }
+
+      draw() {
+        // 绘制尾迹粒子
+        for (const p of this.trailParticles) {
+          ctx.save();
+          ctx.globalAlpha = p.life * this.life * 0.6;
+          ctx.fillStyle = `hsl(${this.hue}, 90%, ${60 + p.life * 20}%)`;
+          ctx.shadowBlur = 6;
+          ctx.shadowColor = `hsl(${this.hue}, 100%, 60%)`;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.restore();
+        }
+
+        // 绘制流星拖尾（渐变线）
+        const tailX = this.x - Math.cos(this.angle) * this.tailLength * this.life;
+        const tailY = this.y - Math.sin(this.angle) * this.tailLength * this.life;
+
+        const tailGrad = ctx.createLinearGradient(this.x, this.y, tailX, tailY);
+        tailGrad.addColorStop(0, `hsla(${this.hue}, 100%, 85%, ${this.life})`);
+        tailGrad.addColorStop(0.1, `hsla(${this.hue}, 95%, 70%, ${this.life * 0.7})`);
+        tailGrad.addColorStop(0.5, `hsla(${this.hue}, 80%, 55%, ${this.life * 0.3})`);
+        tailGrad.addColorStop(1, `hsla(${this.hue}, 60%, 40%, 0)`);
+
+        ctx.save();
+        ctx.strokeStyle = tailGrad;
+        ctx.lineWidth = this.size * 2;
+        ctx.lineCap = 'round';
+        ctx.shadowBlur = 15;
+        ctx.shadowColor = `hsl(${this.hue}, 100%, 60%)`;
+        ctx.beginPath();
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(tailX, tailY);
+        ctx.stroke();
+        ctx.restore();
+
+        // 绘制流星头部（明亮光点）
+        ctx.save();
+        const headGrad = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 6);
+        headGrad.addColorStop(0, `hsla(${this.hue}, 100%, 95%, ${this.life})`);
+        headGrad.addColorStop(0.2, `hsla(${this.hue}, 100%, 75%, ${this.life * 0.8})`);
+        headGrad.addColorStop(0.5, `hsla(${this.hue}, 90%, 55%, ${this.life * 0.3})`);
+        headGrad.addColorStop(1, `hsla(${this.hue}, 80%, 40%, 0)`);
+        ctx.fillStyle = headGrad;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size * 6, 0, Math.PI * 2);
+        ctx.fill();
+
+        // 头部核心
+        ctx.fillStyle = `hsla(${this.hue}, 100%, 95%, ${this.life})`;
+        ctx.shadowBlur = 20;
+        ctx.shadowColor = `hsl(${this.hue}, 100%, 70%)`;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+
+      isDead() {
+        return this.life <= 0;
+      }
+    }
+
+    // ==================== 爆发粒子（流星撞击/消散效果） ====================
+    let burstParticles = [];
+
+    function spawnBurst(x, y, hue, count, intensity) {
+      for (let i = 0; i < count; i++) {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = (1 + Math.random() * 4) * (1 + intensity);
+        burstParticles.push({
+          x: x,
+          y: y,
+          vx: Math.cos(angle) * speed,
+          vy: Math.sin(angle) * speed,
+          size: Math.random() * 2.5 + 0.8,
+          life: 1,
+          decay: 0.01 + Math.random() * 0.02,
+          hue: hue + (Math.random() - 0.5) * 30,
+          gravity: 0.02 + Math.random() * 0.03
+        });
+      }
+    }
+
+    function updateBurstParticles() {
+      for (let i = burstParticles.length - 1; i >= 0; i--) {
+        const p = burstParticles[i];
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vy += p.gravity;
+        p.vx *= 0.98;
+        p.vy *= 0.98;
+        p.life -= p.decay;
+        p.size *= 0.985;
+        if (p.life <= 0) {
+          burstParticles.splice(i, 1);
+        }
+      }
+    }
+
+    function drawBurstParticles() {
+      for (const p of burstParticles) {
+        ctx.save();
+        ctx.globalAlpha = p.life;
+        ctx.fillStyle = `hsl(${p.hue}, 90%, ${50 + p.life * 30}%)`;
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = `hsl(${p.hue}, 100%, 60%)`;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+
+    // ==================== 地面辉光 ====================
+    function drawGroundGlow(bass, mid, treble) {
+      const gradient = ctx.createLinearGradient(0, height - 200, 0, height);
+      const glowIntensity = bass * 0.4 + mid * 0.2;
+      gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+      gradient.addColorStop(0.5, `hsla(210, 60%, 15%, ${glowIntensity * 0.3})`);
+      gradient.addColorStop(1, `hsla(220, 70%, 10%, ${glowIntensity * 0.5})`);
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, height - 200, width, 200);
+
+      // 地平线光带
+      ctx.save();
+      ctx.fillStyle = `hsla(210, 80%, 35%, ${glowIntensity * 0.15})`;
+      ctx.fillRect(0, height - 3, width, 3);
+      ctx.restore();
+    }
+
+    // ==================== 节拍检测 ====================
+    let beatHistory = [];
+    let beatCooldown = 0;
+
+    function detectBeat(bass) {
+      beatHistory.push(bass);
+      if (beatHistory.length > 40) 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.4;
+      if (beatCooldown > 0) {
+        beatCooldown--;
+        return false;
+      }
+      if (bass > threshold && bass > 0.35) {
+        beatCooldown = 6;
+        return true;
+      }
+      return false;
+    }
+
+    // ==================== 频率分析 ====================
+    function getFrequencyData() {
+      if (!analyser) return { bass: 0, mid: 0, treble: 0, avg: 0 };
+
+      analyser.getByteFrequencyData(dataArray);
+
+      // 划分频段
+      const bassEnd = Math.floor(bufferLength * 0.1);
+      const midEnd = Math.floor(bufferLength * 0.4);
+
+      let bassSum = 0, midSum = 0, trebleSum = 0, totalSum = 0;
+
+      for (let i = 0; i < bufferLength; i++) {
+        totalSum += dataArray[i];
+        if (i < bassEnd) bassSum += dataArray[i];
+        else if (i < midEnd) midSum += dataArray[i];
+        else trebleSum += dataArray[i];
+      }
+
+      return {
+        bass: bassSum / bassEnd / 255,
+        mid: midSum / (midEnd - bassEnd) / 255,
+        treble: trebleSum / (bufferLength - midEnd) / 255,
+        avg: totalSum / bufferLength / 255
+      };
+    }
+
+    // ==================== 主渲染循环 ====================
+    let lastTime = 0;
+    let meteorSpawnTimer = 0;
+
+    function render(time) {
+      animationId = requestAnimationFrame(render);
+
+      const dt = time - lastTime;
+      lastTime = time;
+
+      // 获取音频数据
+      const { bass, mid, treble, avg } = getFrequencyData();
+
+      // 节拍检测
+      const isBeat = detectBeat(bass);
+
+      // 更新音量条
+      document.getElementById('volumeFill').style.height = `${avg * 100}%`;
+
+      // 更新播放进度
+      if (isPlaying && audio.duration) {
+        const progress = (audio.currentTime / audio.duration) * 100;
+        document.getElementById('progressFill').style.width = `${progress}%`;
+        document.getElementById('currentTime').textContent = formatTime(audio.currentTime);
+      }
+
+      // 清除画布（带有微弱拖尾效果）
+      ctx.fillStyle = 'rgba(5, 5, 15, 0.2)';
+      ctx.fillRect(0, 0, width, height);
+
+      // 绘制背景星星
+      drawStars(time);
+
+      // 绘制地面辉光
+      drawGroundGlow(bass, mid, treble);
+
+      // 生成流星
+      meteorSpawnTimer += dt;
+      const baseSpawnRate = 400; // 基础生成间隔（毫秒）
+      const spawnRate = baseSpawnRate / (1 + avg * 3); // 音频越强流星越密集
+      if (meteorSpawnTimer > spawnRate) {
+        meteorSpawnTimer = 0;
+        const hue = 190 + Math.random() * 50; // 蓝色调（深蓝到浅蓝青）
+        meteors.push(new Meteor({ hue }));
+
+        // 中高频时额外生成小型流星
+        if (mid > 0.4 && Math.random() < 0.5) {
+          meteors.push(new Meteor({
+            size: 1 + Math.random() * 1,
+            tailLength: 40 + Math.random() * 60,
+            speed: 8 + Math.random() * 10,
+            decay: 0.005 + Math.random() * 0.005,
+            hue: 200 + Math.random() * 40
+          }));
+        }
+      }
+
+      // 节拍爆发：流星雨
+      if (isBeat) {
+        const burstCount = Math.floor(3 + bass * 8);
+        for (let i = 0; i < burstCount; i++) {
+          const hue = 190 + Math.random() * 50;
+          meteors.push(new Meteor({
+            size: 2 + Math.random() * 2,
+            tailLength: 100 + Math.random() * 150,
+            speed: 10 + Math.random() * 12 + bass * 8,
+            hue: hue
+          }));
+        }
+
+        // 屏幕微震
+        if (bass > 0.5) {
+          document.body.classList.add('shake');
+          setTimeout(() => document.body.classList.remove('shake'), 150);
+        }
+      }
+
+      // 更新和绘制流星
+      for (let i = meteors.length - 1; i >= 0; i--) {
+        const m = meteors[i];
+        m.update(avg);
+
+        // 流星消亡时产生爆发粒子
+        if (m.life < 0.1 && m.life > 0.05 && !m.burst) {
+          m.burst = true;
+          const burstIntensity = avg * (isBeat ? 2 : 1);
+          spawnBurst(m.x, m.y, m.hue, Math.floor(5 + avg * 15), burstIntensity);
+        }
+
+        m.draw();
+
+        if (m.isDead()) {
+          meteors.splice(i, 1);
+        }
+      }
+
+      // 更新和绘制爆发粒子
+      updateBurstParticles();
+      drawBurstParticles();
+
+      // 强拍时的闪光效果
+      if (isBeat && bass > 0.4) {
+        ctx.save();
+        ctx.fillStyle = `rgba(100, 180, 255, ${bass * 0.06})`;
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+      }
+    }
+
+    resize();
+    requestAnimationFrame(render);
+
+    // ==================== 事件绑定 ====================
+
+    // 文件上传
+    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 (audio.paused) {
+        audio.play();
+        isPlaying = true;
+        document.getElementById('playBtn').textContent = '暂停';
+      } else {
+        audio.pause();
+        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;
+    });
+
+    // 全屏
+    const fullscreenBtn = document.getElementById('fullscreenBtn');
+    fullscreenBtn.addEventListener('click', () => {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    });
+    document.addEventListener('fullscreenchange', () => {
+      fullscreenBtn.textContent = document.fullscreenElement ? '退出全屏' : '全屏';
+    });
+
+    // 音频结束
+    audio.addEventListener('ended', () => {
+      isPlaying = false;
+      document.getElementById('playBtn').textContent = '播放';
+    });
+  </script>
+</body>
+</html>
diff --git a/HTML/audio-visualization/4.html b/HTML/audio-visualization/4.html
new file mode 100644
index 0000000..280c9ff
--- /dev/null
+++ b/HTML/audio-visualization/4.html
@@ -0,0 +1,997 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>音频可视化 - Audio Visualizer</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      background: #000;
+      overflow: hidden;
+      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+      color: #fff;
+    }
+
+    canvas {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+    }
+
+    /* 控制面板 */
+    .controls {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      z-index: 100;
+      padding: 6px 12px;
+    }
+
+    .btn {
+      padding: 6px 14px;
+      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: #fff;
+      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;
+      text-transform: uppercase;
+      z-index: 100;
+      color: rgba(255, 255, 255, 0.3);
+      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;
+    }
+
+    .volume-fill {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 2px;
+      transition: height 0.1s ease;
+    }
+
+    /* 速度指示器 */
+    .speed-indicator {
+      position: fixed;
+      left: 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;
+    }
+
+    .speed-fill {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.6);
+      border-radius: 2px;
+      transition: height 0.08s ease;
+    }
+
+    .speed-label {
+      position: fixed;
+      left: 20px;
+      top: calc(50% + 70px);
+      transform: translateX(-50%);
+      font-size: 9px;
+      letter-spacing: 2px;
+      color: rgba(255, 255, 255, 0.4);
+      z-index: 100;
+      writing-mode: vertical-rl;
+    }
+
+    /* 提示文字 */
+    .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;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 12px;
+      opacity: 0;
+      z-index: 100;
+      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(255, 255, 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;
+    }
+
+    /* 曲速闪光 */
+    .warp-flash {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 90;
+      opacity: 0;
+      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
+      transition: opacity 0.1s ease;
+    }
+  </style>
+</head>
+<body>
+  <canvas id="canvas"></canvas>
+  <div class="warp-flash" id="warpFlash"></div>
+
+  <div class="title">AUDIO VISUALIZER</div>
+  <div class="track-info" id="trackInfo"></div>
+
+  <div class="hint" id="hint">
+    请选择音频文件或开启麦克风
+  </div>
+
+  <!-- 速度指示器 -->
+  <div class="speed-indicator">
+    <div class="speed-fill" id="speedFill"></div>
+  </div>
+  <div class="speed-label">WARP</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>
+  </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');
+
+    let width, height;
+    let cx, cy; // 中心点（消失点）
+
+    function resize() {
+      width = canvas.width = window.innerWidth;
+      height = canvas.height = window.innerHeight;
+      cx = width / 2;
+      cy = height / 2;
+      initStars();
+      initNebula();
+    }
+    window.addEventListener('resize', resize);
+
+    // ==================== 音频相关 ====================
+    let audioContext;
+    let analyser;
+    let source;
+    let audio = new Audio();
+    let dataArray;
+    let bufferLength;
+    let isPlaying = false;
+    let isMicActive = false;
+    let micStream;
+    let animationId;
+
+    // 初始化音频上下文
+    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 playFile(file) {
+      initAudio();
+
+      if (audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+
+      stopMic();
+
+      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);
+      });
+    }
+
+    // 使用麦克风
+    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')}`;
+    }
+
+    // ==================== 频率分析 ====================
+    function getFrequencyData() {
+      if (!analyser) return { bass: 0, mid: 0, treble: 0, avg: 0 };
+
+      analyser.getByteFrequencyData(dataArray);
+
+      const bassEnd = Math.floor(bufferLength * 0.08);
+      const midEnd = Math.floor(bufferLength * 0.35);
+
+      let bassSum = 0, midSum = 0, trebleSum = 0, totalSum = 0;
+
+      for (let i = 0; i < bufferLength; i++) {
+        totalSum += dataArray[i];
+        if (i < bassEnd) bassSum += dataArray[i];
+        else if (i < midEnd) midSum += dataArray[i];
+        else trebleSum += dataArray[i];
+      }
+
+      return {
+        bass: bassSum / bassEnd / 255,
+        mid: midSum / (midEnd - bassEnd) / 255,
+        treble: trebleSum / (bufferLength - midEnd) / 255,
+        avg: totalSum / bufferLength / 255
+      };
+    }
+
+    // ==================== 节拍检测 ====================
+    let beatHistory = [];
+    let beatCooldown = 0;
+    let warpBurst = 0; // 曲速爆发强度（0~1 衰减）
+
+    function detectBeat(bass) {
+      beatHistory.push(bass);
+      if (beatHistory.length > 40) 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 > 0.3) {
+        beatCooldown = 5;
+        return true;
+      }
+      return false;
+    }
+
+    // ==================== 星云背景 ====================
+    let nebulaCanvas, nebulaCtx;
+
+    function initNebula() {
+      nebulaCanvas = document.createElement('canvas');
+      nebulaCanvas.width = width;
+      nebulaCanvas.height = height;
+      nebulaCtx = nebulaCanvas.getContext('2d');
+      drawNebula();
+    }
+
+    function drawNebula() {
+      const nc = nebulaCtx;
+      nc.clearRect(0, 0, width, height);
+
+      // 深空底色
+      const bgGrad = nc.createRadialGradient(cx, cy, 0, cx, cy, Math.max(width, height) * 0.7);
+      bgGrad.addColorStop(0, 'rgba(10, 10, 15, 1)');
+      bgGrad.addColorStop(0.5, 'rgba(5, 5, 8, 1)');
+      bgGrad.addColorStop(1, 'rgba(2, 2, 4, 1)');
+      nc.fillStyle = bgGrad;
+      nc.fillRect(0, 0, width, height);
+
+      // 多层星云（灰白色调）
+      const nebulaColors = [
+        { x: cx * 0.3, y: cy * 0.4, r: Math.max(width, height) * 0.4, color: 'rgba(100, 100, 120, 0.08)' },
+        { x: cx * 1.6, y: cy * 0.6, r: Math.max(width, height) * 0.35, color: 'rgba(80, 90, 110, 0.07)' },
+        { x: cx * 0.7, y: cy * 1.5, r: Math.max(width, height) * 0.3, color: 'rgba(120, 120, 140, 0.06)' },
+        { x: cx * 1.3, y: cy * 1.3, r: Math.max(width, height) * 0.25, color: 'rgba(90, 100, 120, 0.05)' },
+        { x: cx * 0.5, y: cy * 1.0, r: Math.max(width, height) * 0.2, color: 'rgba(140, 140, 160, 0.04)' },
+      ];
+
+      for (const n of nebulaColors) {
+        const grad = nc.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r);
+        grad.addColorStop(0, n.color);
+        grad.addColorStop(1, 'rgba(0,0,0,0)');
+        nc.fillStyle = grad;
+        nc.fillRect(0, 0, width, height);
+      }
+    }
+
+    // ==================== 星星系统（3D 星际飞行） ====================
+    const STAR_COUNT = 600;
+    const MAX_DEPTH = 1000;
+    let stars = [];
+
+    function initStars() {
+      stars = [];
+      for (let i = 0; i < STAR_COUNT; i++) {
+        stars.push(createStar(true));
+      }
+    }
+
+    function createStar(randomDepth = false) {
+      // 星星在3D空间中的位置，以屏幕中心为原点
+      const angle = Math.random() * Math.PI * 2;
+      // 初始分布：一部分从边缘开始，一部分随机分布
+      const spread = randomDepth ? Math.random() : 1;
+      const radius = (0.2 + spread * 0.8) * Math.max(width, height) * 0.8;
+      return {
+        x: Math.cos(angle) * radius,
+        y: Math.sin(angle) * radius,
+        z: randomDepth ? Math.random() * MAX_DEPTH : MAX_DEPTH, // z=MAX_DEPTH 最远，z=0 最近
+        pz: 0, // 上一帧的 z 值，用于绘制拖尾
+        size: Math.random() * 0.8 + 0.3,
+        hue: 200 + Math.random() * 40, // 冷白色调
+        saturation: 5 + Math.random() * 15, // 低饱和度，接近白色
+        twinkle: Math.random() * Math.PI * 2
+      };
+    }
+
+    function updateAndDrawStars(speed, bass, mid, treble, isBeat) {
+      const baseSpeed = 2;
+      const audioSpeed = speed * (3 + bass * 12 + mid * 5);
+      const currentSpeed = baseSpeed + audioSpeed + warpBurst * 25;
+
+      for (let i = 0; i < stars.length; i++) {
+        const s = stars[i];
+        s.pz = s.z;
+
+        // 星星飞向观察者（z 值减小）
+        s.z -= currentSpeed;
+        s.twinkle += 0.03;
+
+        // 当星星飞出屏幕（z <= 0），重新放到远处
+        if (s.z <= 0) {
+          stars[i] = createStar(false);
+          stars[i].pz = stars[i].z;
+          continue;
+        }
+
+        // 3D 到 2D 投影
+        const k = 200; // 焦距
+        const sx = (s.x / s.z) * k + cx;
+        const sy = (s.y / s.z) * k + cy;
+        const psx = (s.x / s.pz) * k + cx;
+        const psy = (s.y / s.pz) * k + cy;
+
+        // 星星大小和亮度随距离变化（越近越亮越大）
+        const depthRatio = 1 - s.z / MAX_DEPTH; // 0=最远, 1=最近
+        const size = s.size * (0.5 + depthRatio * 3) * (1 + treble * 0.5);
+        const brightness = Math.min(1, 0.3 + depthRatio * 1.2);
+        const twinkleFactor = 0.8 + Math.sin(s.twinkle) * 0.2 * (treble + 0.3);
+
+        // 颜色根据音频偏移
+        const hueShift = mid * 30; // 中频使色调偏移
+        const hue = s.hue + hueShift;
+        const lightness = 50 + brightness * 40 + bass * 10;
+
+        // 绘制拖尾线（从上次位置到当前位置）
+        const trailLength = Math.sqrt((sx - psx) ** 2 + (sy - psy) ** 2);
+        if (trailLength > 1 && s.z < MAX_DEPTH * 0.9) {
+          const trailAlpha = brightness * twinkleFactor * (0.4 + depthRatio * 0.6);
+          const trailWidth = size * 0.5 + depthRatio * 1.5;
+
+          ctx.save();
+          // 拖尾渐变
+          const trailGrad = ctx.createLinearGradient(psx, psy, sx, sy);
+          trailGrad.addColorStop(0, `hsla(${hue}, ${s.saturation}%, ${lightness - 20}%, 0)`);
+          trailGrad.addColorStop(0.3, `hsla(${hue}, ${s.saturation}%, ${lightness - 10}%, ${trailAlpha * 0.3})`);
+          trailGrad.addColorStop(1, `hsla(${hue}, ${s.saturation}%, ${lightness}%, ${trailAlpha})`);
+
+          ctx.strokeStyle = trailGrad;
+          ctx.lineWidth = trailWidth;
+          ctx.lineCap = 'round';
+          ctx.shadowBlur = 8 + depthRatio * 12;
+          ctx.shadowColor = `rgba(255, 255, 255, ${trailAlpha * 0.5})`;
+          ctx.beginPath();
+          ctx.moveTo(psx, psy);
+          ctx.lineTo(sx, sy);
+          ctx.stroke();
+          ctx.restore();
+        }
+
+        // 绘制星星光点
+        if (sx > -50 && sx < width + 50 && sy > -50 && sy < height + 50) {
+          ctx.save();
+          const alpha = brightness * twinkleFactor;
+          const coreSize = size * (0.5 + depthRatio);
+
+          // 外层光晕
+          if (depthRatio > 0.3) {
+            const glowGrad = ctx.createRadialGradient(sx, sy, 0, sx, sy, coreSize * 6);
+            glowGrad.addColorStop(0, `hsla(${hue}, ${s.saturation}%, ${lightness + 10}%, ${alpha * 0.3})`);
+            glowGrad.addColorStop(0.5, `hsla(${hue}, ${s.saturation}%, ${lightness}%, ${alpha * 0.1})`);
+            glowGrad.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = glowGrad;
+            ctx.beginPath();
+            ctx.arc(sx, sy, coreSize * 6, 0, Math.PI * 2);
+            ctx.fill();
+          }
+
+          // 核心亮点
+          ctx.fillStyle = `hsla(${hue}, ${Math.min(30, s.saturation + 10)}%, ${Math.min(95, lightness + 20)}%, ${alpha})`;
+          ctx.shadowBlur = 6 + depthRatio * 15;
+          ctx.shadowColor = `rgba(255, 255, 255, ${alpha * 0.8})`;
+          ctx.beginPath();
+          ctx.arc(sx, sy, coreSize, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.restore();
+        }
+      }
+    }
+
+    // ==================== 速度线（曲速效果） ====================
+    let warpLines = [];
+
+    function spawnWarpLines(count, intensity) {
+      for (let i = 0; i < count; i++) {
+        const angle = Math.random() * Math.PI * 2;
+        const minR = Math.max(width, height) * 0.1;
+        const maxR = Math.max(width, height) * 0.6;
+        const r = minR + Math.random() * (maxR - minR);
+        warpLines.push({
+          angle: angle,
+          r: r,
+          length: 20 + Math.random() * 60 * intensity,
+          life: 1,
+          decay: 0.02 + Math.random() * 0.03,
+          width: 0.5 + Math.random() * 1.5,
+          hue: 200 + Math.random() * 20,
+          speed: 1 + Math.random() * 2
+        });
+      }
+    }
+
+    function updateAndDrawWarpLines(bass, treble) {
+      for (let i = warpLines.length - 1; i >= 0; i--) {
+        const w = warpLines[i];
+        w.r += w.length * w.speed * (1 + bass * 3);
+        w.life -= w.decay;
+
+        if (w.life <= 0 || w.r > Math.max(width, height) * 0.9) {
+          warpLines.splice(i, 1);
+          continue;
+        }
+
+        const x1 = cx + Math.cos(w.angle) * w.r;
+        const y1 = cy + Math.sin(w.angle) * w.r;
+        const x2 = cx + Math.cos(w.angle) * (w.r - w.length);
+        const y2 = cy + Math.sin(w.angle) * (w.r - w.length);
+
+        ctx.save();
+        const alpha = w.life * (0.3 + treble * 0.4);
+        const grad = ctx.createLinearGradient(x2, y2, x1, y1);
+        grad.addColorStop(0, 'rgba(200, 210, 230, 0)');
+        grad.addColorStop(0.5, `rgba(220, 230, 245, ${alpha * 0.5})`);
+        grad.addColorStop(1, `rgba(255, 255, 255, ${alpha})`);
+
+        ctx.strokeStyle = grad;
+        ctx.lineWidth = w.width * w.life;
+        ctx.lineCap = 'round';
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = `rgba(255, 255, 255, ${alpha * 0.5})`;
+        ctx.beginPath();
+        ctx.moveTo(x2, y2);
+        ctx.lineTo(x1, y1);
+        ctx.stroke();
+        ctx.restore();
+      }
+    }
+
+    // ==================== 中心辉光（消失点） ====================
+    function drawCenterGlow(bass, mid, treble, isBeat) {
+      const baseRadius = 30;
+      const beatRadius = isBeat ? 50 + bass * 80 : 0;
+      const audioRadius = baseRadius + bass * 40 + mid * 20;
+      const totalRadius = audioRadius + beatRadius;
+      const intensity = 0.15 + bass * 0.25 + mid * 0.1 + treble * 0.05;
+
+      // 外层大光晕
+      const outerGlow = ctx.createRadialGradient(cx, cy, 0, cx, cy, totalRadius * 3);
+      outerGlow.addColorStop(0, `rgba(200, 210, 230, ${intensity * 0.15})`);
+      outerGlow.addColorStop(0.3, `rgba(150, 160, 180, ${intensity * 0.08})`);
+      outerGlow.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = outerGlow;
+      ctx.beginPath();
+      ctx.arc(cx, cy, totalRadius * 3, 0, Math.PI * 2);
+      ctx.fill();
+
+      // 内层亮光核心
+      const innerGlow = ctx.createRadialGradient(cx, cy, 0, cx, cy, totalRadius);
+      innerGlow.addColorStop(0, `rgba(255, 255, 255, ${intensity * 0.8})`);
+      innerGlow.addColorStop(0.2, `rgba(230, 235, 245, ${intensity * 0.4})`);
+      innerGlow.addColorStop(0.5, `rgba(180, 190, 210, ${intensity * 0.15})`);
+      innerGlow.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = innerGlow;
+      ctx.beginPath();
+      ctx.arc(cx, cy, totalRadius, 0, Math.PI * 2);
+      ctx.fill();
+
+      // 核心白热点
+      if (bass > 0.2 || isBeat) {
+        const whiteRadius = 3 + bass * 8 + (isBeat ? 15 : 0);
+        const whiteGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, whiteRadius);
+        whiteGrad.addColorStop(0, `rgba(255, 255, 255, ${0.6 + bass * 0.4})`);
+        whiteGrad.addColorStop(0.5, `rgba(240, 245, 255, ${0.3 + bass * 0.3})`);
+        whiteGrad.addColorStop(1, 'rgba(0,0,0,0)');
+        ctx.fillStyle = whiteGrad;
+        ctx.beginPath();
+        ctx.arc(cx, cy, whiteRadius, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+
+    // ==================== 粒子爆发（曲速跳跃特效） ====================
+    let particles = [];
+
+    function spawnParticles(intensity) {
+      const count = Math.floor(20 + intensity * 40);
+      for (let i = 0; i < count; i++) {
+        const angle = Math.random() * Math.PI * 2;
+        const speed = 2 + Math.random() * 8 * intensity;
+        const dist = 5 + Math.random() * 30;
+        particles.push({
+          x: cx + Math.cos(angle) * dist,
+          y: cy + Math.sin(angle) * dist,
+          vx: Math.cos(angle) * speed,
+          vy: Math.sin(angle) * speed,
+          size: Math.random() * 2 + 0.5,
+          life: 1,
+          decay: 0.01 + Math.random() * 0.025,
+          hue: 200 + Math.random() * 20
+        });
+      }
+    }
+
+    function updateAndDrawParticles() {
+      for (let i = particles.length - 1; i >= 0; i--) {
+        const p = particles[i];
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vx *= 0.97;
+        p.vy *= 0.97;
+        p.life -= p.decay;
+        p.size *= 0.98;
+
+        if (p.life <= 0) {
+          particles.splice(i, 1);
+          continue;
+        }
+
+        ctx.save();
+        ctx.globalAlpha = p.life;
+        ctx.fillStyle = `hsl(${p.hue}, 15%, ${60 + p.life * 35}%)`;
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = `rgba(255, 255, 255, ${p.life * 0.5})`;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+    }
+
+    // ==================== 扫描环（速度感环） ====================
+    let rings = [];
+
+    function spawnRing() {
+      rings.push({
+        radius: 10,
+        maxRadius: Math.max(width, height) * 0.8,
+        life: 1,
+        decay: 0.008,
+        hue: 200 + Math.random() * 20,
+        width: 2 + Math.random() * 2
+      });
+    }
+
+    function updateAndDrawRings(bass) {
+      for (let i = rings.length - 1; i >= 0; i--) {
+        const r = rings[i];
+        r.radius += 8 + bass * 15;
+        r.life -= r.decay;
+
+        if (r.life <= 0 || r.radius > r.maxRadius) {
+          rings.splice(i, 1);
+          continue;
+        }
+
+        ctx.save();
+        ctx.globalAlpha = r.life * 0.3;
+        ctx.strokeStyle = `hsl(${r.hue}, 15%, 70%)`;
+        ctx.lineWidth = r.width * r.life;
+        ctx.shadowBlur = 15;
+        ctx.shadowColor = 'rgba(255, 255, 255, 0.4)';
+        ctx.beginPath();
+        ctx.arc(cx, cy, r.radius, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.restore();
+      }
+    }
+
+    // ==================== 主渲染循环 ====================
+    let lastTime = 0;
+    let ringTimer = 0;
+    let warpLineTimer = 0;
+    let speedValue = 0;
+
+    function render(time) {
+      animationId = requestAnimationFrame(render);
+
+      const dt = time - lastTime;
+      lastTime = time;
+
+      // 获取音频数据
+      const { bass, mid, treble, avg } = getFrequencyData();
+
+      // 节拍检测
+      const isBeat = detectBeat(bass);
+
+      // 曲速爆发衰减
+      if (isBeat) {
+        warpBurst = Math.min(1, warpBurst + 0.5 + bass * 0.5);
+      }
+      warpBurst *= 0.94;
+
+      // 计算速度值（用于UI显示）
+      const targetSpeed = Math.min(1, avg * 0.5 + bass * 0.8 + warpBurst * 0.5);
+      speedValue += (targetSpeed - speedValue) * 0.1;
+
+      // 更新UI
+      document.getElementById('volumeFill').style.height = `${avg * 100}%`;
+      document.getElementById('speedFill').style.height = `${speedValue * 100}%`;
+
+      // 更新播放进度
+      if (isPlaying && audio.duration) {
+        const progress = (audio.currentTime / audio.duration) * 100;
+        document.getElementById('progressFill').style.width = `${progress}%`;
+        document.getElementById('currentTime').textContent = formatTime(audio.currentTime);
+      }
+
+      // 曲速闪光效果
+      const warpFlash = document.getElementById('warpFlash');
+      warpFlash.style.opacity = warpBurst * 0.8;
+
+      // 绘制星云背景
+      ctx.drawImage(nebulaCanvas, 0, 0);
+
+      // 半透明覆盖产生轻微拖尾（当速度快时拖尾更明显）
+      const trailAlpha = 0.15 + speedValue * 0.2;
+      ctx.fillStyle = `rgba(3, 3, 6, ${trailAlpha})`;
+      ctx.fillRect(0, 0, width, height);
+
+      // 绘制中心辉光
+      drawCenterGlow(bass, mid, treble, isBeat);
+
+      // 绘制星星（3D飞行效果）
+      updateAndDrawStars(speedValue, bass, mid, treble, isBeat);
+
+      // 生成和绘制速度线
+      warpLineTimer += dt;
+      const warpLineInterval = Math.max(30, 100 - avg * 80);
+      if (warpLineTimer > warpLineInterval) {
+        warpLineTimer = 0;
+        spawnWarpLines(Math.floor(2 + avg * 4), 0.5 + avg);
+      }
+      if (isBeat) {
+        spawnWarpLines(Math.floor(8 + bass * 15), 1 + bass);
+      }
+      updateAndDrawWarpLines(bass, treble);
+
+      // 生成和绘制扫描环（无声音时不生成）
+      if (avg > 0.03) {
+        ringTimer += dt;
+        const ringInterval = Math.max(200, 800 - avg * 500 - bass * 300);
+        if (ringTimer > ringInterval) {
+          ringTimer = 0;
+          spawnRing();
+        }
+        if (isBeat && bass > 0.4) {
+          spawnRing();
+        }
+      }
+      updateAndDrawRings(bass);
+
+      // 节拍粒子爆发
+      if (isBeat && bass > 0.3) {
+        spawnParticles(0.5 + bass);
+      }
+      updateAndDrawParticles();
+
+      // 边缘暗角效果
+      drawVignette(speedValue);
+    }
+
+    // ==================== 暗角效果 ====================
+    function drawVignette(speed) {
+      const vignetteStrength = 0.4 + speed * 0.3;
+      const grad = ctx.createRadialGradient(cx, cy, Math.min(width, height) * 0.3, cx, cy, Math.max(width, height) * 0.7);
+      grad.addColorStop(0, 'rgba(0,0,0,0)');
+      grad.addColorStop(1, `rgba(0,0,0,${vignetteStrength})`);
+      ctx.fillStyle = grad;
+      ctx.fillRect(0, 0, width, height);
+    }
+
+    resize();
+    requestAnimationFrame(render);
+
+    // ==================== 事件绑定 ====================
+
+    // 文件上传
+    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 (audio.paused) {
+        audio.play();
+        isPlaying = true;
+        document.getElementById('playBtn').textContent = '暂停';
+      } else {
+        audio.pause();
+        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;
+    });
+
+    // 全屏
+    const fullscreenBtn = document.getElementById('fullscreenBtn');
+    fullscreenBtn.addEventListener('click', () => {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    });
+    document.addEventListener('fullscreenchange', () => {
+      fullscreenBtn.textContent = document.fullscreenElement ? '退出全屏' : '全屏';
+    });
+
+    // 音频结束
+    audio.addEventListener('ended', () => {
+      isPlaying = false;
+      document.getElementById('playBtn').textContent = '播放';
+    });
+  </script>
+</body>
+</html>
diff --git a/HTML/audio-visualization/5.html b/HTML/audio-visualization/5.html
new file mode 100644
index 0000000..2a51344
--- /dev/null
+++ b/HTML/audio-visualization/5.html
@@ -0,0 +1,1130 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>梦境音频可视化</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 100%; height: 100%;
+    overflow: hidden;
+    background: #050210;
+    font-family: 'Segoe UI', 'PingFang SC', sans-serif;
+  }
+  canvas {
+    display: block;
+    position: absolute;
+    top: 0; left: 0;
+  }
+  #ui {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+  #source-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  #drop-zone {
+    padding: 14px 32px;
+    border: 1.5px solid rgba(180, 140, 255, 0.3);
+    border-radius: 40px;
+    background: rgba(20, 10, 40, 0.5);
+    backdrop-filter: blur(10px);
+    color: rgba(220, 200, 255, 0.8);
+    font-size: 14px;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    user-select: none;
+  }
+  #drop-zone:hover {
+    border-color: rgba(200, 160, 255, 0.6);
+    background: rgba(40, 20, 70, 0.6);
+    color: #fff;
+    box-shadow: 0 0 25px rgba(160, 100, 255, 0.2);
+  }
+  #drop-zone.dragover {
+    border-color: rgba(220, 180, 255, 0.8);
+    background: rgba(60, 30, 100, 0.6);
+    box-shadow: 0 0 40px rgba(180, 120, 255, 0.3);
+  }
+  #mic-btn {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: 1.5px solid rgba(180, 140, 255, 0.3);
+    background: rgba(20, 10, 40, 0.5);
+    backdrop-filter: blur(10px);
+    color: rgba(220, 200, 255, 0.7);
+    font-size: 20px;
+    line-height: 1;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+  }
+  #mic-btn:hover {
+    border-color: rgba(200, 160, 255, 0.6);
+    color: #fff;
+    box-shadow: 0 0 25px rgba(160, 100, 255, 0.2);
+  }
+  #mic-btn.active {
+    border-color: rgba(255, 120, 150, 0.7);
+    background: rgba(60, 15, 35, 0.6);
+    color: #ff8fa3;
+    box-shadow: 0 0 20px rgba(255, 100, 130, 0.3);
+    animation: micPulse 2s ease-in-out infinite;
+  }
+  @keyframes micPulse {
+    0%, 100% { box-shadow: 0 0 20px rgba(255, 100, 130, 0.3); }
+    50% { box-shadow: 0 0 35px rgba(255, 100, 130, 0.5); }
+  }
+  #fs-btn {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: 1.5px solid rgba(180, 140, 255, 0.3);
+    background: rgba(20, 10, 40, 0.5);
+    backdrop-filter: blur(10px);
+    color: rgba(220, 200, 255, 0.7);
+    font-size: 20px;
+    line-height: 1;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+  }
+  #fs-btn:hover {
+    border-color: rgba(200, 160, 255, 0.6);
+    color: #fff;
+    box-shadow: 0 0 25px rgba(160, 100, 255, 0.2);
+  }
+  #file-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 1.5px solid rgba(180, 140, 255, 0.4);
+    background: rgba(30, 15, 55, 0.6);
+    backdrop-filter: blur(8px);
+    color: rgba(220, 200, 255, 0.8);
+    font-size: 14px;
+    line-height: 1;
+    padding: 0;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+  }
+  #file-btn:hover {
+    border-color: rgba(200, 160, 255, 0.7);
+    color: #fff;
+    box-shadow: 0 0 15px rgba(160, 100, 255, 0.3);
+  }
+  #audio-file { display: none; }
+  #title {
+    position: fixed;
+    top: 28px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: rgba(200, 180, 255, 0.5);
+    font-size: 13px;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    z-index: 10;
+    pointer-events: none;
+  }
+  #controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+  }
+  #controls.visible { opacity: 1; }
+  #play-btn {
+    width: 42px; height: 42px;
+    border-radius: 50%;
+    border: 1.5px solid rgba(180, 140, 255, 0.4);
+    background: rgba(30, 15, 55, 0.6);
+    color: rgba(220, 200, 255, 0.9);
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(8px);
+  }
+  #play-btn:hover {
+    border-color: rgba(220, 180, 255, 0.7);
+    box-shadow: 0 0 20px rgba(180, 120, 255, 0.3);
+  }
+  #progress-bar {
+    width: 200px;
+    height: 3px;
+    background: rgba(100, 70, 150, 0.3);
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+    overflow: visible;
+  }
+  #progress-fill {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, #c77dff, #e0aaff, #7b9cff);
+    border-radius: 2px;
+    transition: width 0.1s linear;
+  }
+  #time-display {
+    color: rgba(200, 180, 255, 0.6);
+    font-size: 11px;
+    min-width: 80px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  #volume-wrap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  #volume-slider {
+    -webkit-appearance: none;
+    width: 70px;
+    height: 3px;
+    background: rgba(100, 70, 150, 0.3);
+    border-radius: 2px;
+    outline: none;
+  }
+  #volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 10px; height: 10px;
+    border-radius: 50%;
+    background: #c77dff;
+    cursor: pointer;
+    box-shadow: 0 0 8px rgba(199, 125, 255, 0.5);
+  }
+</style>
+</head>
+<body>
+
+<div id="title">✦ DREAMSCAPE VISUALIZER ✦</div>
+
+<canvas id="canvas"></canvas>
+
+<div id="ui">
+  <div id="controls">
+    <button id="play-btn">▶</button>
+    <div id="progress-bar"><div id="progress-fill"></div></div>
+    <span id="time-display">0:00 / 0:00</span>
+    <div id="volume-wrap">
+      <span style="color:rgba(200,180,255,0.6);font-size:12px;">🔊</span>
+      <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.7">
+    </div>
+    <button id="file-btn" title="选择文件">📁</button>
+  </div>
+  <div id="source-row">
+    <div id="drop-zone">选择音频文件或拖拽到此处</div>
+    <button id="mic-btn" title="使用麦克风">🎤</button>
+    <button id="fs-btn" title="全屏切换">⛶</button>
+  </div>
+</div>
+<input type="file" id="audio-file" accept="audio/*">
+
+<script>
+// ============================================================
+//  梦境音频可视化 — Dreamscape Audio Visualizer
+// ============================================================
+
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+let W, H, CX, CY;
+
+function resize() {
+  W = canvas.width = window.innerWidth;
+  H = canvas.height = window.innerHeight;
+  CX = W / 2;
+  CY = H / 2;
+}
+resize();
+window.addEventListener('resize', resize);
+
+// ---------- 音频系统 ----------
+let audioCtx, analyser, source, gainNode, audioEl;
+let micStream, micSource;
+let freqData, timeData;
+let audioLoaded = false;
+let isPlaying = false;
+let micActive = false;
+
+const dropZone = document.getElementById('drop-zone');
+const fileInput = document.getElementById('audio-file');
+const controls = document.getElementById('controls');
+const playBtn = document.getElementById('play-btn');
+const progressBar = document.getElementById('progress-bar');
+const progressFill = document.getElementById('progress-fill');
+const timeDisplay = document.getElementById('time-display');
+const volumeSlider = document.getElementById('volume-slider');
+const micBtn = document.getElementById('mic-btn');
+const fsBtn = document.getElementById('fs-btn');
+const fileBtn = document.getElementById('file-btn');
+const volumeWrap = document.getElementById('volume-wrap');
+
+function initAudio() {
+  if (audioCtx) return;
+  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  analyser = audioCtx.createAnalyser();
+  analyser.fftSize = 512;
+  analyser.smoothingTimeConstant = 0.82;
+  gainNode = audioCtx.createGain();
+  gainNode.gain.value = 0.7;
+  gainNode.connect(analyser);
+  analyser.connect(audioCtx.destination);
+  freqData = new Uint8Array(analyser.frequencyBinCount);
+  timeData = new Uint8Array(analyser.frequencyBinCount);
+}
+
+function loadAudio(file) {
+  initAudio();
+  // 如果麦克风正在使用，先停止
+  if (micActive) {
+    stopMic();
+    progressBar.style.display = '';
+    playBtn.style.display = '';
+    volumeWrap.style.display = '';
+    timeDisplay.style.color = '';
+  }
+  if (audioEl) {
+    audioEl.pause();
+    audioEl.src = '';
+  }
+  audioEl = new Audio();
+  audioEl.src = URL.createObjectURL(file);
+  audioEl.crossOrigin = 'anonymous';
+
+  disconnectSource();
+  source = audioCtx.createMediaElementSource(audioEl);
+  source.connect(gainNode);
+
+  audioEl.addEventListener('loadedmetadata', () => {
+    audioLoaded = true;
+    controls.classList.add('visible');
+    dropZone.style.display = 'none';
+    fileBtn.style.display = 'flex';
+    audioEl.play();
+    isPlaying = true;
+    playBtn.textContent = '❚❚';
+    timeDisplay.textContent = formatTime(audioEl.currentTime) + ' / ' + formatTime(audioEl.duration);
+  });
+
+  audioEl.addEventListener('ended', () => {
+    isPlaying = false;
+    playBtn.textContent = '▶';
+  });
+
+  audioEl.addEventListener('timeupdate', () => {
+    if (!audioEl.duration) return;
+    const pct = (audioEl.currentTime / audioEl.duration) * 100;
+    progressFill.style.width = pct + '%';
+    timeDisplay.textContent = formatTime(audioEl.currentTime) + ' / ' + formatTime(audioEl.duration);
+  });
+}
+
+function formatTime(s) {
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return m + ':' + (sec < 10 ? '0' : '') + sec;
+}
+
+// 文件选择
+dropZone.addEventListener('click', () => fileInput.click());
+fileInput.addEventListener('change', (e) => {
+  if (e.target.files[0]) loadAudio(e.target.files[0]);
+});
+
+// 拖拽
+dropZone.addEventListener('dragover', (e) => {
+  e.preventDefault();
+  dropZone.classList.add('dragover');
+});
+dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+dropZone.addEventListener('drop', (e) => {
+  e.preventDefault();
+  dropZone.classList.remove('dragover');
+  const file = e.dataTransfer.files[0];
+  if (file && file.type.startsWith('audio/')) loadAudio(file);
+});
+
+// 页面级拖拽（文件加载后也可拖拽更换）
+document.addEventListener('dragover', (e) => {
+  e.preventDefault();
+});
+document.addEventListener('drop', (e) => {
+  e.preventDefault();
+  // 如果是在 dropZone 上的 drop，已由上面处理
+  if (e.target === dropZone || dropZone.contains(e.target)) return;
+  const file = e.dataTransfer.files[0];
+  if (file && file.type.startsWith('audio/') && !micActive) loadAudio(file);
+});
+
+// 播放控制
+playBtn.addEventListener('click', () => {
+  if (!audioEl) return;
+  if (audioCtx.state === 'suspended') audioCtx.resume();
+  if (isPlaying) {
+    audioEl.pause();
+    isPlaying = false;
+    playBtn.textContent = '▶';
+  } else {
+    audioEl.play();
+    isPlaying = true;
+    playBtn.textContent = '❚❚';
+  }
+});
+
+// 进度条点击
+progressBar.addEventListener('click', (e) => {
+  if (!audioEl || !audioEl.duration) return;
+  const rect = progressBar.getBoundingClientRect();
+  const pct = (e.clientX - rect.left) / rect.width;
+  audioEl.currentTime = pct * audioEl.duration;
+});
+
+// 音量
+volumeSlider.addEventListener('input', (e) => {
+  if (gainNode) gainNode.gain.value = parseFloat(e.target.value);
+});
+
+// ---------- 断开当前音频源 ----------
+function disconnectSource() {
+  if (source) {
+    try { source.disconnect(); } catch(e) {}
+    source = null;
+  }
+}
+
+function stopMic() {
+  if (micActive) {
+    if (micSource) {
+      try { micSource.disconnect(); } catch(e) {}
+      micSource = null;
+    }
+    if (micStream) {
+      micStream.getTracks().forEach(track => track.stop());
+      micStream = null;
+    }
+    micActive = false;
+    micBtn.classList.remove('active');
+    // 恢复 analyser → destination 连接（文件模式需要出声）
+    try { analyser.connect(audioCtx.destination); } catch(e) {}
+  }
+}
+
+// ---------- 麦克风功能 ----------
+async function startMic() {
+  initAudio();
+  if (audioCtx.state === 'suspended') audioCtx.resume();
+
+  try {
+    // 暂停文件播放但不断开源连接
+    if (audioEl) {
+      audioEl.pause();
+      isPlaying = false;
+      playBtn.textContent = '▶';
+    }
+
+    // 断开 analyser 到扬声器的连接，防止麦克风信号经 analyser 输出造成回授啸叫
+    try { analyser.disconnect(); } catch(e) {}
+    // 重新建立 gainNode → analyser（analyser.disconnect 只断开输出不影响输入，但安全起见确保连接）
+    // 注意：initAudio 中已经连接了 gainNode→analyser，disconnect 不会断开输入，所以不需要重连
+
+    micStream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: false,
+        noiseSuppression: false,
+        autoGainControl: false
+      }
+    });
+
+    micSource = audioCtx.createMediaStreamSource(micStream);
+    // 麦克风 → analyser（无路径到扬声器）
+    micSource.connect(analyser);
+
+    micActive = true;
+    micBtn.classList.add('active');
+
+    // 显示控制栏（麦克风模式下隐藏进度条、播放按钮和音量控制）
+    controls.classList.add('visible');
+    dropZone.style.display = 'none';
+    progressBar.style.display = 'none';
+    playBtn.style.display = 'none';
+    volumeWrap.style.display = 'none';
+    fileBtn.style.display = 'none';
+    timeDisplay.style.display = '';
+    timeDisplay.textContent = '🎤 麦克风输入中';
+    timeDisplay.style.color = 'rgba(255, 140, 160, 0.7)';
+
+  } catch (err) {
+    console.error('麦克风访问失败:', err);
+    micBtn.classList.remove('active');
+    // 恢复音频链路（analyser.disconnect 只断开输出，只需重连 analyser→destination）
+    try { analyser.connect(audioCtx.destination); } catch(e) {}
+    alert('无法访问麦克风，请检查浏览器权限设置。');
+  }
+}
+
+function stopMicAndReturn() {
+  stopMic();
+  // 恢复文件模式的UI
+  progressBar.style.display = '';
+  playBtn.style.display = '';
+  volumeWrap.style.display = '';
+  timeDisplay.style.color = '';
+  if (!audioLoaded) {
+    dropZone.style.display = '';
+    controls.classList.remove('visible');
+    fileBtn.style.display = 'none';
+    timeDisplay.textContent = '0:00 / 0:00';
+  } else {
+    fileBtn.style.display = 'flex';
+    timeDisplay.textContent = formatTime(audioEl.currentTime) + ' / ' + formatTime(audioEl.duration);
+  }
+}
+
+micBtn.addEventListener('click', () => {
+  if (micActive) {
+    stopMicAndReturn();
+  } else {
+    startMic();
+  }
+});
+
+// 文件重新选择按钮
+fileBtn.addEventListener('click', () => {
+  fileInput.click();
+});
+
+// 全屏切换
+function toggleFullscreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen().catch(() => {});
+    fsBtn.textContent = '⛶';
+  } else {
+    document.exitFullscreen();
+  }
+}
+fsBtn.addEventListener('click', toggleFullscreen);
+document.addEventListener('fullscreenchange', () => {
+  fsBtn.textContent = document.fullscreenElement ? '🗗' : '⛶';
+});
+
+// ---------- 音频数据工具 ----------
+function getAvgFreq(start, end) {
+  if (!freqData) return 0;
+  let sum = 0, count = end - start;
+  for (let i = start; i < end && i < freqData.length; i++) sum += freqData[i];
+  return sum / count / 255;
+}
+
+function getBass()   { return getAvgFreq(1, 8); }
+function getLowMid() { return getAvgFreq(8, 32); }
+function getMid()    { return getAvgFreq(32, 96); }
+function getHighMid(){ return getAvgFreq(96, 200); }
+function getHigh()   { return getAvgFreq(200, 400); }
+
+// 节拍检测
+let beatHistory = [];
+let beatThreshold = 0.5;
+let beatCooldown = 0;
+function detectBeat() {
+  const bass = getBass();
+  beatHistory.push(bass);
+  if (beatHistory.length > 30) beatHistory.shift();
+  const avg = beatHistory.reduce((a,b)=>a+b,0) / beatHistory.length;
+  beatCooldown = Math.max(0, beatCooldown - 1);
+  if (bass > avg * 1.35 && bass > beatThreshold && beatCooldown === 0) {
+    beatCooldown = 10;
+    return bass;
+  }
+  return 0;
+}
+
+// ---------- 星空背景 ----------
+const stars = [];
+const STAR_COUNT = 260;
+for (let i = 0; i < STAR_COUNT; i++) {
+  stars.push({
+    x: Math.random() * W,
+    y: Math.random() * H,
+    r: Math.random() * 1.4 + 0.2,
+    phase: Math.random() * Math.PI * 2,
+    speed: Math.random() * 0.015 + 0.005,
+    depth: Math.random() * 0.7 + 0.3, // 视差深度
+    hue: Math.random() < 0.15 ? (Math.random() * 60 + 240) : (Math.random() * 40 + 250)
+  });
+}
+
+function drawStars(t) {
+  for (const s of stars) {
+    const twinkle = Math.sin(t * s.speed + s.phase) * 0.5 + 0.5;
+    const alpha = (0.2 + twinkle * 0.8) * s.depth;
+    ctx.beginPath();
+    ctx.arc(s.x, s.y, s.r * (0.6 + twinkle * 0.6), 0, Math.PI * 2);
+    ctx.fillStyle = `hsla(${s.hue}, 60%, ${70 + twinkle * 30}%, ${alpha})`;
+    ctx.fill();
+  }
+}
+
+// ---------- 星云粒子 ----------
+const nebulaParticles = [];
+const NEBULA_COUNT = 500;
+for (let i = 0; i < NEBULA_COUNT; i++) {
+  const angle = Math.random() * Math.PI * 2;
+  const dist = Math.random() * Math.random() * 380 + 30;
+  nebulaParticles.push({
+    angle: angle,
+    dist: dist,
+    baseDist: dist,
+    speed: (Math.random() * 0.0008 + 0.0002) * (Math.random() < 0.5 ? 1 : -1),
+    size: Math.random() * 3 + 0.5,
+    hue: Math.random() * 80 + 250,  // 250-330 蓝紫到粉红
+    phase: Math.random() * Math.PI * 2,
+    orbSpeed: Math.random() * 0.003 + 0.001,
+    freqBand: Math.floor(Math.random() * 128) + 1
+  });
+}
+
+function drawNebula(t, bass, mid, high) {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+
+  // 星云核心光晕
+  const coreRadius = 120 + bass * 200;
+  const grad1 = ctx.createRadialGradient(CX, CY, 0, CX, CY, coreRadius);
+  grad1.addColorStop(0, `rgba(140, 80, 255, ${0.15 + bass * 0.25})`);
+  grad1.addColorStop(0.3, `rgba(100, 60, 220, ${0.08 + bass * 0.12})`);
+  grad1.addColorStop(0.7, `rgba(60, 30, 160, ${0.03 + mid * 0.05})`);
+  grad1.addColorStop(1, 'rgba(20, 10, 60, 0)');
+  ctx.fillStyle = grad1;
+  ctx.fillRect(0, 0, W, H);
+
+  // 第二个星云层（偏粉红）
+  const ox = Math.sin(t * 0.0003) * 60;
+  const oy = Math.cos(t * 0.00025) * 40;
+  const coreR2 = 90 + mid * 150;
+  const grad2 = ctx.createRadialGradient(CX + ox, CY + oy, 0, CX + ox, CY + oy, coreR2);
+  grad2.addColorStop(0, `rgba(255, 100, 200, ${0.1 + mid * 0.15})`);
+  grad2.addColorStop(0.4, `rgba(200, 60, 180, ${0.05 + mid * 0.08})`);
+  grad2.addColorStop(1, 'rgba(80, 20, 100, 0)');
+  ctx.fillStyle = grad2;
+  ctx.fillRect(0, 0, W, H);
+
+  // 第三个星云层（青色）
+  const ox2 = Math.cos(t * 0.0002) * 80;
+  const oy2 = Math.sin(t * 0.00035) * 50;
+  const coreR3 = 100 + high * 130;
+  const grad3 = ctx.createRadialGradient(CX + ox2, CY + oy2, 0, CX + ox2, CY + oy2, coreR3);
+  grad3.addColorStop(0, `rgba(80, 200, 255, ${0.08 + high * 0.1})`);
+  grad3.addColorStop(0.5, `rgba(40, 120, 220, ${0.03 + high * 0.05})`);
+  grad3.addColorStop(1, 'rgba(10, 30, 80, 0)');
+  ctx.fillStyle = grad3;
+  ctx.fillRect(0, 0, W, H);
+
+  // 轨道粒子
+  for (const p of nebulaParticles) {
+    p.angle += p.speed * (1 + getAvgFreq(p.freqBand, p.freqBand + 3) * 2);
+    const freqVal = freqData ? (freqData[p.freqBand] / 255) : 0;
+    const distPulse = 1 + freqVal * 0.4;
+    const px = CX + Math.cos(p.angle) * p.baseDist * distPulse;
+    const py = CY + Math.sin(p.angle) * p.baseDist * distPulse;
+    const breathe = Math.sin(t * p.orbSpeed + p.phase) * 0.3 + 0.7;
+    const size = p.size * (0.5 + freqVal * 2.5) * breathe;
+    const alpha = (0.15 + freqVal * 0.7) * breathe;
+
+    ctx.beginPath();
+    ctx.arc(px, py, size, 0, Math.PI * 2);
+    ctx.fillStyle = `hsla(${p.hue + freqVal * 30}, 80%, ${60 + freqVal * 30}%, ${alpha})`;
+    ctx.fill();
+  }
+
+  ctx.restore();
+}
+
+// ---------- 扩散光环 ----------
+const rings = [];
+
+function spawnRing(strength) {
+  rings.push({
+    radius: 50,
+    maxRadius: 350 + strength * 200,
+    alpha: 0.5 + strength * 0.4,
+    speed: 2 + strength * 3,
+    hue: Math.random() * 60 + 260,
+    width: 1.5 + strength * 2
+  });
+}
+
+function drawRings() {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+  for (let i = rings.length - 1; i >= 0; i--) {
+    const r = rings[i];
+    r.radius += r.speed;
+    r.alpha *= 0.985;
+
+    if (r.alpha < 0.005 || r.radius > r.maxRadius) {
+      rings.splice(i, 1);
+      continue;
+    }
+
+    ctx.beginPath();
+    ctx.arc(CX, CY, r.radius, 0, Math.PI * 2);
+    ctx.strokeStyle = `hsla(${r.hue}, 80%, 70%, ${r.alpha})`;
+    ctx.lineWidth = r.width;
+    ctx.stroke();
+
+    // 柔和外环
+    ctx.beginPath();
+    ctx.arc(CX, CY, r.radius + r.width * 2, 0, Math.PI * 2);
+    ctx.strokeStyle = `hsla(${r.hue}, 70%, 60%, ${r.alpha * 0.2})`;
+    ctx.lineWidth = r.width * 3;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// ---------- 极光波纹 ----------
+const auroraBands = [];
+for (let i = 0; i < 5; i++) {
+  auroraBands.push({
+    y: H * (0.2 + i * 0.15),
+    baseY: H * (0.2 + i * 0.15),
+    amplitude: 30 + i * 15,
+    frequency: 0.005 + i * 0.001,
+    speed: 0.0003 + i * 0.0001,
+    hue: 160 + i * 30, // 青绿到紫
+    width: 60 + i * 20,
+    phase: i * 1.2
+  });
+}
+
+function drawAurora(t, mid, high) {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+
+  for (const band of auroraBands) {
+    const yOff = Math.sin(t * band.speed * 0.5 + band.phase) * 40;
+    const bandY = band.baseY + yOff;
+    const amp = band.amplitude * (1 + mid * 1.5);
+
+    ctx.beginPath();
+    ctx.moveTo(-20, H);
+
+    const points = [];
+    for (let x = -20; x <= W + 20; x += 8) {
+      const wave1 = Math.sin(x * band.frequency + t * band.speed + band.phase) * amp;
+      const wave2 = Math.sin(x * band.frequency * 2.3 + t * band.speed * 1.7 + band.phase) * amp * 0.4;
+      const audioWave = getAvgFreq(Math.floor(x / W * 128) + 10, Math.floor(x / W * 128) + 14) * 60;
+      const y = bandY + wave1 + wave2 - audioWave;
+      points.push({ x, y });
+      ctx.lineTo(x, y);
+    }
+
+    ctx.lineTo(W + 20, H);
+    ctx.closePath();
+
+    const grad = ctx.createLinearGradient(0, bandY - band.width, 0, bandY + band.width);
+    grad.addColorStop(0, `hsla(${band.hue}, 80%, 60%, 0)`);
+    grad.addColorStop(0.3, `hsla(${band.hue}, 85%, 65%, ${0.04 + high * 0.08})`);
+    grad.addColorStop(0.5, `hsla(${band.hue + 20}, 90%, 70%, ${0.06 + mid * 0.1})`);
+    grad.addColorStop(0.7, `hsla(${band.hue}, 85%, 60%, ${0.03 + high * 0.05})`);
+    grad.addColorStop(1, `hsla(${band.hue}, 70%, 50%, 0)`);
+    ctx.fillStyle = grad;
+    ctx.fill();
+
+    // 极光边缘亮线
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      ctx.lineTo(points[i].x, points[i].y);
+    }
+    ctx.strokeStyle = `hsla(${band.hue + 30}, 90%, 80%, ${0.05 + high * 0.12})`;
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+  }
+
+  ctx.restore();
+}
+
+// ---------- 流星 ----------
+const meteors = [];
+
+function spawnMeteor(strength) {
+  const startX = Math.random() * W * 0.6;
+  const startY = Math.random() * H * 0.3;
+  const angle = Math.PI / 4 + (Math.random() * 0.4 - 0.2);
+  const speed = 8 + strength * 12;
+  meteors.push({
+    x: startX,
+    y: startY,
+    vx: Math.cos(angle) * speed,
+    vy: Math.sin(angle) * speed,
+    len: 80 + strength * 100,
+    life: 1,
+    hue: Math.random() < 0.5 ? 280 : 200,
+    width: 1.5 + strength
+  });
+}
+
+function drawMeteors() {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+  for (let i = meteors.length - 1; i >= 0; i--) {
+    const m = meteors[i];
+    m.x += m.vx;
+    m.y += m.vy;
+    m.life -= 0.012;
+
+    if (m.life <= 0 || m.x > W + 100 || m.y > H + 100) {
+      meteors.splice(i, 1);
+      continue;
+    }
+
+    const tailX = m.x - m.vx / Math.hypot(m.vx, m.vy) * m.len * m.life;
+    const tailY = m.y - m.vy / Math.hypot(m.vx, m.vy) * m.len * m.life;
+
+    const grad = ctx.createLinearGradient(tailX, tailY, m.x, m.y);
+    grad.addColorStop(0, `hsla(${m.hue}, 80%, 70%, 0)`);
+    grad.addColorStop(0.7, `hsla(${m.hue + 20}, 90%, 80%, ${m.life * 0.4})`);
+    grad.addColorStop(1, `hsla(${m.hue + 40}, 100%, 90%, ${m.life * 0.9})`);
+
+    ctx.beginPath();
+    ctx.moveTo(tailX, tailY);
+    ctx.lineTo(m.x, m.y);
+    ctx.strokeStyle = grad;
+    ctx.lineWidth = m.width * m.life;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+
+    // 头部光点
+    ctx.beginPath();
+    ctx.arc(m.x, m.y, m.width * 2 * m.life, 0, Math.PI * 2);
+    ctx.fillStyle = `hsla(${m.hue + 40}, 100%, 95%, ${m.life * 0.8})`;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+
+// ---------- 花瓣/花朵绽放 ----------
+function drawBloom(t, bass, lowMid) {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.translate(CX, CY);
+
+  const petalCount = 8;
+  const bloomSize = 40 + bass * 80 + Math.sin(t * 0.001) * 10;
+  const rotation = t * 0.0002;
+  ctx.rotate(rotation);
+
+  for (let i = 0; i < petalCount; i++) {
+    const angle = (Math.PI * 2 / petalCount) * i;
+    ctx.save();
+    ctx.rotate(angle);
+
+    // 外层花瓣
+    const petalLen = bloomSize * (1 + lowMid * 0.6);
+    const petalWidth = 15 + lowMid * 20;
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.bezierCurveTo(
+      petalWidth, petalLen * 0.3,
+      petalWidth * 0.5, petalLen * 0.7,
+      0, petalLen
+    );
+    ctx.bezierCurveTo(
+      -petalWidth * 0.5, petalLen * 0.7,
+      -petalWidth, petalLen * 0.3,
+      0, 0
+    );
+    const hue = 280 + i * 12 + Math.sin(t * 0.001) * 20;
+    const petalGrad = ctx.createRadialGradient(0, petalLen * 0.4, 0, 0, petalLen * 0.4, petalLen);
+    petalGrad.addColorStop(0, `hsla(${hue}, 80%, 75%, ${0.15 + bass * 0.2})`);
+    petalGrad.addColorStop(0.5, `hsla(${hue + 20}, 85%, 65%, ${0.08 + lowMid * 0.1})`);
+    petalGrad.addColorStop(1, `hsla(${hue - 20}, 70%, 50%, 0)`);
+    ctx.fillStyle = petalGrad;
+    ctx.fill();
+
+    ctx.restore();
+  }
+
+  // 中心光球
+  const coreSize = 8 + bass * 25;
+  const coreGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, coreSize);
+  coreGrad.addColorStop(0, `rgba(255, 240, 255, ${0.6 + bass * 0.3})`);
+  coreGrad.addColorStop(0.4, `rgba(220, 160, 255, ${0.3 + bass * 0.2})`);
+  coreGrad.addColorStop(1, 'rgba(150, 80, 220, 0)');
+  ctx.beginPath();
+  ctx.arc(0, 0, coreSize, 0, Math.PI * 2);
+  ctx.fillStyle = coreGrad;
+  ctx.fill();
+
+  ctx.restore();
+}
+
+// ---------- 频率光柱 ----------
+function drawFreqBars(high) {
+  if (!freqData) return;
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+
+  const barCount = 64;
+  const barWidth = W / barCount * 0.6;
+  const gap = W / barCount * 0.4;
+
+  for (let i = 0; i < barCount; i++) {
+    const freqIdx = Math.floor(i / barCount * (freqData.length * 0.6));
+    const val = freqData[freqIdx] / 255;
+    const barH = val * H * 0.35;
+    const x = i * (barWidth + gap) + gap * 0.5;
+
+    // 底部光柱
+    const grad = ctx.createLinearGradient(x, H, x, H - barH);
+    const hue = 240 + val * 100;
+    grad.addColorStop(0, `hsla(${hue}, 80%, 60%, ${val * 0.3})`);
+    grad.addColorStop(1, `hsla(${hue + 20}, 90%, 80%, 0)`);
+    ctx.fillStyle = grad;
+    ctx.fillRect(x, H - barH, barWidth, barH);
+
+    // 顶部光点
+    if (val > 0.1) {
+      ctx.beginPath();
+      ctx.arc(x + barWidth / 2, H - barH, 2 + val * 3, 0, Math.PI * 2);
+      ctx.fillStyle = `hsla(${hue + 30}, 100%, 85%, ${val * 0.6})`;
+      ctx.fill();
+    }
+  }
+
+  ctx.restore();
+}
+
+// ---------- 浮动光球 ----------
+const orbs = [];
+const ORB_COUNT = 12;
+for (let i = 0; i < ORB_COUNT; i++) {
+  orbs.push({
+    x: Math.random() * W,
+    y: Math.random() * H,
+    vx: (Math.random() - 0.5) * 0.5,
+    vy: (Math.random() - 0.5) * 0.3,
+    r: Math.random() * 60 + 20,
+    hue: Math.random() * 100 + 220,
+    phase: Math.random() * Math.PI * 2,
+    speed: Math.random() * 0.001 + 0.0005,
+    freqIdx: Math.floor(Math.random() * 80) + 5
+  });
+}
+
+function drawOrbs(t, mid, high) {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+
+  for (const o of orbs) {
+    o.x += o.vx;
+    o.y += o.vy;
+    // 边界反弹
+    if (o.x < -o.r) o.x = W + o.r;
+    if (o.x > W + o.r) o.x = -o.r;
+    if (o.y < -o.r) o.y = H + o.r;
+    if (o.y > H + o.r) o.y = -o.r;
+
+    const freqVal = freqData ? (freqData[o.freqIdx] / 255) : 0;
+    const breathe = Math.sin(t * o.speed + o.phase) * 0.2 + 0.8;
+    const r = o.r * (0.6 + freqVal * 1.2) * breathe;
+    const alpha = (0.04 + freqVal * 0.15) * breathe;
+
+    const grad = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, r);
+    grad.addColorStop(0, `hsla(${o.hue}, 80%, 75%, ${alpha * 2})`);
+    grad.addColorStop(0.4, `hsla(${o.hue + 10}, 75%, 60%, ${alpha})`);
+    grad.addColorStop(1, `hsla(${o.hue - 10}, 60%, 40%, 0)`);
+    ctx.fillStyle = grad;
+    ctx.beginPath();
+    ctx.arc(o.x, o.y, r, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  ctx.restore();
+}
+
+// ---------- 梦境漩涡 ----------
+let swirlAngle = 0;
+function drawSwirl(t, mid, high) {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.translate(CX, CY);
+
+  swirlAngle += 0.002 + mid * 0.005;
+  const arms = 4;
+  const maxR = 200 + mid * 150;
+
+  for (let arm = 0; arm < arms; arm++) {
+    ctx.beginPath();
+    const baseAngle = swirlAngle + (Math.PI * 2 / arms) * arm;
+    for (let r = 20; r < maxR; r += 3) {
+      const spiralAngle = baseAngle + r * 0.02;
+      const freqVal = freqData ? (freqData[Math.floor(r / maxR * 100) + 20] / 255) : 0;
+      const wobble = Math.sin(r * 0.05 + t * 0.002) * (3 + freqVal * 15);
+      const x = Math.cos(spiralAngle) * r + Math.cos(spiralAngle + Math.PI/2) * wobble;
+      const y = Math.sin(spiralAngle) * r + Math.sin(spiralAngle + Math.PI/2) * wobble;
+      if (r === 20) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    const hue = 270 + arm * 25 + high * 30;
+    ctx.strokeStyle = `hsla(${hue}, 80%, 70%, ${0.06 + mid * 0.15})`;
+    ctx.lineWidth = 2 + mid * 4;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+  }
+
+  ctx.restore();
+}
+
+// ---------- 萤火虫粒子 ----------
+const fireflies = [];
+const FIREFLY_COUNT = 60;
+for (let i = 0; i < FIREFLY_COUNT; i++) {
+  fireflies.push({
+    x: Math.random() * W,
+    y: Math.random() * H,
+    vx: (Math.random() - 0.5) * 0.3,
+    vy: (Math.random() - 0.5) * 0.3,
+    r: Math.random() * 2 + 0.5,
+    phase: Math.random() * Math.PI * 2,
+    speed: Math.random() * 0.003 + 0.001,
+    hue: Math.random() * 40 + 40 // 金黄到绿色
+  });
+}
+
+function drawFireflies(t, high) {
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+
+  for (const f of fireflies) {
+    f.x += f.vx + Math.sin(t * f.speed + f.phase) * 0.5;
+    f.y += f.vy + Math.cos(t * f.speed * 0.8 + f.phase) * 0.3;
+
+    if (f.x < 0) f.x = W;
+    if (f.x > W) f.x = 0;
+    if (f.y < 0) f.y = H;
+    if (f.y > H) f.y = 0;
+
+    const glow = Math.sin(t * f.speed * 2 + f.phase) * 0.5 + 0.5;
+    const alpha = (0.2 + glow * 0.6) * (0.5 + high * 0.8);
+    const r = f.r * (0.5 + glow * 1.5 + high * 2);
+
+    // 光晕
+    const grad = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, r * 6);
+    grad.addColorStop(0, `hsla(${f.hue}, 90%, 80%, ${alpha})`);
+    grad.addColorStop(0.3, `hsla(${f.hue + 10}, 80%, 60%, ${alpha * 0.3})`);
+    grad.addColorStop(1, `hsla(${f.hue}, 70%, 50%, 0)`);
+    ctx.fillStyle = grad;
+    ctx.beginPath();
+    ctx.arc(f.x, f.y, r * 6, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  ctx.restore();
+}
+
+// ---------- 主渲染循环 ----------
+let lastBeatTime = 0;
+let ringTimer = 0;
+let meteorTimer = 0;
+let t = 0;
+
+function render() {
+  requestAnimationFrame(render);
+  t += 1;
+
+  // 获取音频数据
+  let bass = 0, lowMid = 0, mid = 0, highMid = 0, high = 0;
+  if (analyser && (isPlaying || micActive)) {
+    analyser.getByteFrequencyData(freqData);
+    bass = getBass();
+    lowMid = getLowMid();
+    mid = getMid();
+    highMid = getHighMid();
+    high = getHigh();
+  }
+
+  // 节拍检测
+  const beat = detectBeat();
+  if (beat > 0 && t - lastBeatTime > 15) {
+    spawnRing(beat);
+    if (Math.random() < 0.4) spawnMeteor(beat);
+    lastBeatTime = t;
+  }
+
+  // 自动生成一些流星和光环（无音频时也有氛围）
+  ringTimer++;
+  meteorTimer++;
+  if (!isPlaying) {
+    if (ringTimer > 120) {
+      spawnRing(0.2 + Math.random() * 0.2);
+      ringTimer = 0;
+    }
+    if (meteorTimer > 200 + Math.random() * 200) {
+      spawnMeteor(0.3);
+      meteorTimer = 0;
+    }
+  } else {
+    if (meteorTimer > 300 + Math.random() * 400 && high > 0.3) {
+      spawnMeteor(0.3 + high * 0.4);
+      meteorTimer = 0;
+    }
+  }
+
+  // 清屏（带残影效果）
+  ctx.fillStyle = 'rgba(5, 2, 16, 0.15)';
+  ctx.fillRect(0, 0, W, H);
+
+  // 绘制顺序：由远及近
+  drawStars(t);
+  drawOrbs(t, mid, high);
+  drawAurora(t, mid, high);
+  drawFreqBars(high);
+  drawFireflies(t, high);
+  drawNebula(t, bass, mid, high);
+  drawSwirl(t, mid, high);
+  drawBloom(t, bass, lowMid);
+  drawRings();
+  drawMeteors();
+
+  // 暗角效果
+  const vignette = ctx.createRadialGradient(CX, CY, Math.min(W, H) * 0.3, CX, CY, Math.max(W, H) * 0.75);
+  vignette.addColorStop(0, 'rgba(0,0,0,0)');
+  vignette.addColorStop(1, 'rgba(5,2,16,0.5)');
+  ctx.fillStyle = vignette;
+  ctx.fillRect(0, 0, W, H);
+}
+
+// 初始背景
+ctx.fillStyle = '#050210';
+ctx.fillRect(0, 0, W, H);
+
+render();
+</script>
+</body>
+</html>
diff --git a/HTML/audio-visualization/6.html b/HTML/audio-visualization/6.html
new file mode 100644
index 0000000..641bf72
--- /dev/null
+++ b/HTML/audio-visualization/6.html
@@ -0,0 +1,542 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>梦幻星云 · 音频可视化</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 100%; height: 100%;
+    overflow: hidden;
+    background: #05020e;
+    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+    color: #e0d4ff;
+  }
+  canvas {
+    display: block;
+    width: 100%; height: 100%;
+    position: fixed; top: 0; left: 0;
+  }
+  /* 操作栏 */
+  .controls {
+    position: fixed;
+    top: 24px; left: 50%;
+    transform: translateX(-50%);
+    display: flex; gap: 28px;
+    z-index: 10;
+    user-select: none;
+  }
+  .controls span {
+    font-size: 14px;
+    letter-spacing: 2px;
+    cursor: pointer;
+    opacity: 0.55;
+    transition: opacity 0.3s, text-shadow 0.3s, color 0.3s;
+    text-shadow: 0 0 8px rgba(180, 140, 255, 0.3);
+  }
+  .controls span:hover {
+    opacity: 1;
+    text-shadow: 0 0 16px rgba(200, 160, 255, 0.8);
+  }
+  .controls span.active {
+    opacity: 1;
+    color: #ffb4f0;
+    text-shadow: 0 0 18px rgba(255, 150, 240, 0.9);
+  }
+  /* 提示文字 */
+  .hint {
+    position: fixed;
+    bottom: 28px; left: 50%;
+    transform: translateX(-50%);
+    font-size: 12px;
+    letter-spacing: 3px;
+    opacity: 0.35;
+    z-index: 10;
+    pointer-events: none;
+  }
+</style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<div class="controls">
+  <span id="btnMic">开启麦克风</span>
+  <span id="btnFullscreen">全屏</span>
+</div>
+<div class="hint" id="hint">点击"开启麦克风"开始梦境之旅</div>
+
+<script>
+(function () {
+  /* ========== 基础设置 ========== */
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0, CX = 0, CY = 0, DPR = window.devicePixelRatio || 1;
+
+  function resize() {
+    W = window.innerWidth;
+    H = window.innerHeight;
+    CX = W / 2;
+    CY = H / 2;
+    canvas.width = W * DPR;
+    canvas.height = H * DPR;
+    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+  }
+  resize();
+  window.addEventListener('resize', resize);
+
+  /* ========== 音频相关 ========== */
+  let audioCtx = null;
+  let analyser = null;
+  let dataArray = null;       // 时域
+  let freqArray = null;       // 频域
+  let micStream = null;
+  let isMicOn = false;
+  let smoothedVol = 0;        // 平滑音量
+  let smoothedBass = 0;       // 平滑低频
+  let smoothedMid = 0;        // 平滑中频
+  let smoothedTreble = 0;     // 平滑高频
+
+  async function toggleMic() {
+    const btn = document.getElementById('btnMic');
+    const hint = document.getElementById('hint');
+    if (isMicOn) {
+      // 关闭
+      if (micStream) micStream.getTracks().forEach(t => t.stop());
+      if (audioCtx) audioCtx.close();
+      audioCtx = null; analyser = null; dataArray = null; freqArray = null;
+      micStream = null;
+      isMicOn = false;
+      btn.textContent = '开启麦克风';
+      btn.classList.remove('active');
+      hint.textContent = '麦克风已关闭';
+      smoothedVol = smoothedBass = smoothedMid = smoothedTreble = 0;
+      return;
+    }
+    try {
+      micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      const source = audioCtx.createMediaStreamSource(micStream);
+      analyser = audioCtx.createAnalyser();
+      analyser.fftSize = 512;
+      analyser.smoothingTimeConstant = 0.82;
+      source.connect(analyser);
+      dataArray = new Uint8Array(analyser.fftSize);
+      freqArray = new Uint8Array(analyser.frequencyBinCount);
+      isMicOn = true;
+      btn.textContent = '关闭麦克风';
+      btn.classList.add('active');
+      hint.textContent = '在梦境中呼吸…';
+      setTimeout(() => { hint.style.opacity = '0'; }, 3000);
+    } catch (e) {
+      hint.textContent = '无法访问麦克风：' + e.message;
+      hint.style.opacity = '1';
+    }
+  }
+
+  function analyseAudio() {
+    if (!analyser) {
+      smoothedVol *= 0.95;
+      smoothedBass *= 0.95;
+      smoothedMid *= 0.95;
+      smoothedTreble *= 0.95;
+      return;
+    }
+    analyser.getByteTimeDomainData(dataArray);
+    analyser.getByteFrequencyData(freqArray);
+
+    // 计算音量（RMS）
+    let sum = 0;
+    for (let i = 0; i < dataArray.length; i++) {
+      const v = (dataArray[i] - 128) / 128;
+      sum += v * v;
+    }
+    const rms = Math.sqrt(sum / dataArray.length);
+    smoothedVol = smoothedVol * 0.8 + rms * 0.2;
+
+    // 计算频段能量
+    const binCount = freqArray.length;
+    const bassEnd = Math.floor(binCount * 0.08);
+    const midEnd = Math.floor(binCount * 0.35);
+    let bSum = 0, mSum = 0, tSum = 0;
+    for (let i = 0; i < bassEnd; i++) bSum += freqArray[i];
+    for (let i = bassEnd; i < midEnd; i++) mSum += freqArray[i];
+    for (let i = midEnd; i < binCount; i++) tSum += freqArray[i];
+    smoothedBass   = smoothedBass   * 0.75 + (bSum / bassEnd / 255) * 0.25;
+    smoothedMid    = smoothedMid    * 0.75 + (mSum / (midEnd - bassEnd) / 255) * 0.25;
+    smoothedTreble = smoothedTreble * 0.75 + (tSum / (binCount - midEnd) / 255) * 0.25;
+  }
+
+  /* ========== 全屏切换 ========== */
+  function toggleFullscreen() {
+    const btn = document.getElementById('btnFullscreen');
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch(() => {});
+      btn.classList.add('active');
+      btn.textContent = '退出全屏';
+    } else {
+      document.exitFullscreen();
+      btn.classList.remove('active');
+      btn.textContent = '全屏';
+    }
+  }
+  document.addEventListener('fullscreenchange', () => {
+    const btn = document.getElementById('btnFullscreen');
+    if (!document.fullscreenElement) {
+      btn.classList.remove('active');
+      btn.textContent = '全屏';
+    }
+  });
+
+  document.getElementById('btnMic').addEventListener('click', toggleMic);
+  document.getElementById('btnFullscreen').addEventListener('click', toggleFullscreen);
+
+  /* ========== 粒子系统 ========== */
+  const PARTICLE_COUNT = 280;
+  const particles = [];
+  const PALETTE = [
+    [180, 130, 255],  // 紫
+    [255, 140, 220],  // 粉
+    [120, 180, 255],  // 蓝
+    [100, 230, 220],  // 青
+    [220, 170, 255],  // 淡紫
+    [255, 200, 160],  // 暖橘（少量）
+  ];
+
+  function rand(a, b) { return a + Math.random() * (b - a); }
+  function pickColor() { return PALETTE[Math.floor(Math.random() * PALETTE.length)]; }
+
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const angle = Math.random() * Math.PI * 2;
+    const dist = rand(30, Math.max(W, H) * 0.6);
+    particles.push({
+      x: CX + Math.cos(angle) * dist,
+      y: CY + Math.sin(angle) * dist,
+      vx: Math.cos(angle) * rand(-0.15, 0.15),
+      vy: Math.sin(angle) * rand(-0.15, 0.15),
+      r: rand(0.6, 2.8),
+      baseR: rand(0.6, 2.8),
+      color: pickColor(),
+      alpha: rand(0.2, 0.8),
+      baseAlpha: rand(0.2, 0.8),
+      angle: angle,
+      orbitSpeed: rand(-0.0008, 0.0008),
+      orbitRadius: dist,
+      twinkle: Math.random() * Math.PI * 2,
+      twinkleSpeed: rand(0.01, 0.04),
+    });
+  }
+
+  /* ========== 涟漪（频谱环） ========== */
+  const ripples = [];
+  function spawnRipple(strength) {
+    ripples.push({
+      radius: 40,
+      maxRadius: 200 + strength * 500,
+      alpha: 0.5 + strength * 0.4,
+      lineWidth: 1 + strength * 2,
+      hue: rand(240, 320),
+      speed: 2 + strength * 6,
+    });
+  }
+
+  /* ========== 背景星星 ========== */
+  const stars = [];
+  for (let i = 0; i < 160; i++) {
+    stars.push({
+      x: Math.random(),
+      y: Math.random(),
+      r: rand(0.3, 1.4),
+      a: rand(0.2, 0.9),
+      tw: Math.random() * Math.PI * 2,
+      tws: rand(0.005, 0.025),
+    });
+  }
+
+  /* ========== 漂浮光带 ========== */
+  const bands = [];
+  for (let i = 0; i < 6; i++) {
+    bands.push({
+      angle: (i / 6) * Math.PI * 2 + rand(-0.3, 0.3),
+      length: rand(120, 280),
+      width: rand(30, 80),
+      color: pickColor(),
+      rotSpeed: rand(-0.0015, 0.0015),
+      pulse: Math.random() * Math.PI * 2,
+    });
+  }
+
+  /* ========== 主循环 ========== */
+  let time = 0;
+  let lastRippleTime = 0;
+
+  function draw() {
+    requestAnimationFrame(draw);
+    time += 0.016;
+    analyseAudio();
+
+    const vol = smoothedVol * 6;           // 放大幅度让视觉更明显
+    const bass = smoothedBass;
+    const mid = smoothedMid;
+    const treble = smoothedTreble;
+
+    /* --- 背景拖尾（半透明覆盖制造残影） --- */
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = 'rgba(5, 2, 14, 0.18)';
+    ctx.fillRect(0, 0, W, H);
+
+    /* --- 绘制深空渐变 --- */
+    const bgGrad = ctx.createRadialGradient(CX, CY, 0, CX, CY, Math.max(W, H) * 0.7);
+    const bgHue = 260 + Math.sin(time * 0.2) * 20 + bass * 30;
+    bgGrad.addColorStop(0, `hsla(${bgHue}, 60%, 12%, 0.25)`);
+    bgGrad.addColorStop(0.5, `hsla(${bgHue + 30}, 50%, 6%, 0.15)`);
+    bgGrad.addColorStop(1, 'rgba(5, 2, 14, 0)');
+    ctx.fillStyle = bgGrad;
+    ctx.fillRect(0, 0, W, H);
+
+    /* --- 背景星星 --- */
+    for (const s of stars) {
+      s.tw += s.tws;
+      const a = s.a * (0.5 + 0.5 * Math.sin(s.tw));
+      ctx.beginPath();
+      ctx.arc(s.x * W, s.y * H, s.r, 0, Math.PI * 2);
+      ctx.fillStyle = `rgba(220, 210, 255, ${a * 0.7})`;
+      ctx.fill();
+    }
+
+    /* --- 中心呼吸光核 --- */
+    ctx.globalCompositeOperation = 'lighter';
+    const coreSize = 60 + bass * 180 + Math.sin(time * 2) * 8;
+    const coreGrad = ctx.createRadialGradient(CX, CY, 0, CX, CY, coreSize * 2);
+    const coreHue = 290 + treble * 40;
+    coreGrad.addColorStop(0, `hsla(${coreHue}, 100%, 85%, ${0.6 + vol})`);
+    coreGrad.addColorStop(0.2, `hsla(${coreHue - 20}, 90%, 65%, ${0.35 + vol * 0.5})`);
+    coreGrad.addColorStop(0.5, `hsla(${coreHue - 40}, 80%, 45%, ${0.12 + vol * 0.2})`);
+    coreGrad.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.fillStyle = coreGrad;
+    ctx.beginPath();
+    ctx.arc(CX, CY, coreSize * 2, 0, Math.PI * 2);
+    ctx.fill();
+
+    // 内核亮点
+    const innerGrad = ctx.createRadialGradient(CX, CY, 0, CX, CY, coreSize * 0.5);
+    innerGrad.addColorStop(0, `hsla(${coreHue + 20}, 100%, 95%, ${0.9})`);
+    innerGrad.addColorStop(1, 'rgba(255,255,255,0)');
+    ctx.fillStyle = innerGrad;
+    ctx.beginPath();
+    ctx.arc(CX, CY, coreSize * 0.5, 0, Math.PI * 2);
+    ctx.fill();
+
+    /* --- 漂浮光带（围绕中心旋转的星云带） --- */
+    for (const b of bands) {
+      b.angle += b.rotSpeed + mid * 0.003;
+      b.pulse += 0.02;
+      const pulseFactor = 1 + Math.sin(b.pulse) * 0.3 + vol * 0.8;
+      const len = b.length * pulseFactor;
+      const wd = b.width * pulseFactor;
+      const x2 = CX + Math.cos(b.angle) * len;
+      const y2 = CY + Math.sin(b.angle) * len;
+      const grad = ctx.createLinearGradient(CX, CY, x2, y2);
+      const [r, g, bl] = b.color;
+      grad.addColorStop(0, `rgba(${r},${g},${bl},${0.25 + mid * 0.3})`);
+      grad.addColorStop(1, `rgba(${r},${g},${bl},0)`);
+      ctx.strokeStyle = grad;
+      ctx.lineWidth = wd;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.moveTo(CX, CY);
+      // 微微弯曲
+      const cpx = CX + Math.cos(b.angle + 0.4) * len * 0.5;
+      const cpy = CY + Math.sin(b.angle + 0.4) * len * 0.5;
+      ctx.quadraticCurveTo(cpx, cpy, x2, y2);
+      ctx.stroke();
+    }
+
+    /* --- 频谱柱状图（以圆环方式从中心向外发射） --- */
+    if (freqArray) {
+      const bars = 96;
+      const radius = coreSize * 0.9;
+      const step = (Math.PI * 2) / bars;
+      for (let i = 0; i < bars; i++) {
+        // 采样频域
+        const freqIdx = Math.floor((i / bars) * freqArray.length * 0.7);
+        const v = freqArray[freqIdx] / 255;
+        const angle = i * step - Math.PI / 2 + time * 0.1;
+        const barLen = 10 + v * 160 + vol * 40;
+        const x1 = CX + Math.cos(angle) * radius;
+        const y1 = CY + Math.sin(angle) * radius;
+        const x2 = CX + Math.cos(angle) * (radius + barLen);
+        const y2 = CY + Math.sin(angle) * (radius + barLen);
+        // 颜色随角度和频率变化
+        const hue = (i / bars) * 120 + 240 + treble * 30;
+        const grad = ctx.createLinearGradient(x1, y1, x2, y2);
+        grad.addColorStop(0, `hsla(${hue}, 100%, 70%, ${0.8})`);
+        grad.addColorStop(1, `hsla(${hue + 30}, 100%, 60%, 0)`);
+        ctx.strokeStyle = grad;
+        ctx.lineWidth = 2 + v * 3;
+        ctx.lineCap = 'round';
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+      }
+    }
+
+    /* --- 涟漪 --- */
+    if (bass > 0.35 && time - lastRippleTime > 0.25) {
+      spawnRipple(bass);
+      lastRippleTime = time;
+    }
+    for (let i = ripples.length - 1; i >= 0; i--) {
+      const r = ripples[i];
+      r.radius += r.speed;
+      r.alpha *= 0.985;
+      if (r.radius > r.maxRadius || r.alpha < 0.01) {
+        ripples.splice(i, 1);
+        continue;
+      }
+      ctx.strokeStyle = `hsla(${r.hue}, 90%, 70%, ${r.alpha})`;
+      ctx.lineWidth = r.lineWidth;
+      ctx.beginPath();
+      ctx.arc(CX, CY, r.radius, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    /* --- 粒子 --- */
+    for (const p of particles) {
+      // 受音量影响：音量大时粒子向外推并加速
+      const dx = p.x - CX;
+      const dy = p.y - CY;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      const pushForce = vol * 0.8;
+      p.vx += (dx / dist) * pushForce * 0.15;
+      p.vy += (dy / dist) * pushForce * 0.15;
+      // 回归力：像轨道一样围绕中心
+      p.angle += p.orbitSpeed + mid * 0.002;
+      const targetX = CX + Math.cos(p.angle) * p.orbitRadius;
+      const targetY = CY + Math.sin(p.angle) * p.orbitRadius;
+      p.vx += (targetX - p.x) * 0.002;
+      p.vy += (targetY - p.y) * 0.002;
+      // 阻尼
+      p.vx *= 0.97;
+      p.vy *= 0.97;
+      p.x += p.vx;
+      p.y += p.vy;
+      // 闪烁
+      p.twinkle += p.twinkleSpeed;
+      const tw = 0.6 + 0.4 * Math.sin(p.twinkle);
+      const currentR = p.baseR * (1 + vol * 1.5) * tw;
+      const currentA = p.baseAlpha * tw * (0.5 + treble * 0.8);
+      // 发光粒子
+      const [r, g, bl] = p.color;
+      const glowGrad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, currentR * 6);
+      glowGrad.addColorStop(0, `rgba(${r},${g},${bl},${currentA})`);
+      glowGrad.addColorStop(0.4, `rgba(${r},${g},${bl},${currentA * 0.3})`);
+      glowGrad.addColorStop(1, `rgba(${r},${g},${bl},0)`);
+      ctx.fillStyle = glowGrad;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, currentR * 6, 0, Math.PI * 2);
+      ctx.fill();
+      // 核心亮点
+      ctx.fillStyle = `rgba(255,255,255,${currentA * 0.8})`;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, currentR * 0.6, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    /* --- 偶尔出现流星/彗尾（由高音触发） --- */
+    if (treble > 0.4 && Math.random() < 0.06) {
+      spawnMeteor();
+    }
+    for (let i = meteors.length - 1; i >= 0; i--) {
+      const m = meteors[i];
+      m.x += m.vx;
+      m.y += m.vy;
+      m.life -= 0.012;
+      if (m.life <= 0) { meteors.splice(i, 1); continue; }
+      const tailX = m.x - m.vx * m.tailLen;
+      const tailY = m.y - m.vy * m.tailLen;
+      const grad = ctx.createLinearGradient(m.x, m.y, tailX, tailY);
+      grad.addColorStop(0, `hsla(${m.hue}, 100%, 85%, ${m.life})`);
+      grad.addColorStop(1, `hsla(${m.hue}, 100%, 70%, 0)`);
+      ctx.strokeStyle = grad;
+      ctx.lineWidth = 2 * m.life;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.moveTo(m.x, m.y);
+      ctx.lineTo(tailX, tailY);
+      ctx.stroke();
+    }
+
+    /* --- 声波波形（梦幻之环） --- */
+    if (dataArray) {
+      ctx.globalCompositeOperation = 'lighter';
+      const waveRadius = coreSize * 1.1;
+      ctx.beginPath();
+      const slice = (Math.PI * 2) / dataArray.length;
+      for (let i = 0; i < dataArray.length; i++) {
+        const v = (dataArray[i] - 128) / 128;
+        const angle = i * slice;
+        const rr = waveRadius + v * (40 + vol * 60);
+        const x = CX + Math.cos(angle) * rr;
+        const y = CY + Math.sin(angle) * rr;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+      ctx.strokeStyle = `hsla(${280 + Math.sin(time) * 30}, 80%, 75%, ${0.3 + vol * 0.4})`;
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+
+      // 填充波形
+      ctx.fillStyle = `hsla(${280}, 70%, 50%, ${0.05 + vol * 0.08})`;
+      ctx.fill();
+    }
+  }
+
+  /* ========== 流星 ========== */
+  const meteors = [];
+  function spawnMeteor() {
+    const edge = Math.floor(Math.random() * 4);
+    let x, y, vx, vy;
+    const speed = 4 + Math.random() * 6;
+    if (edge === 0) { // 上
+      x = Math.random() * W; y = 0;
+      vx = rand(-2, 2); vy = speed;
+    } else if (edge === 1) { // 右
+      x = W; y = Math.random() * H;
+      vx = -speed; vy = rand(-2, 2);
+    } else if (edge === 2) { // 下
+      x = Math.random() * W; y = H;
+      vx = rand(-2, 2); vy = -speed;
+    } else { // 左
+      x = 0; y = Math.random() * H;
+      vx = speed; vy = rand(-2, 2);
+    }
+    meteors.push({
+      x, y, vx, vy,
+      life: 1,
+      tailLen: rand(40, 90),
+      hue: rand(260, 340),
+    });
+  }
+
+  /* ========== 启动静止画面（无麦克风时也有动画） ========== */
+  // 无音频时让核心和粒子有缓慢呼吸效果
+  function idlePulse() {
+    if (!isMicOn) {
+      // 生成虚拟的"环境音量"让画面保持呼吸
+      const fake = (Math.sin(time * 0.8) * 0.5 + 0.5) * 0.15 + (Math.sin(time * 2.3) * 0.5 + 0.5) * 0.08;
+      smoothedVol = smoothedVol * 0.95 + fake * 0.05;
+      smoothedBass = smoothedBass * 0.95 + fake * 1.2 * 0.05;
+      smoothedMid = smoothedMid * 0.95 + fake * 0.8 * 0.05;
+      smoothedTreble = smoothedTreble * 0.95 + fake * 0.5 * 0.05;
+    }
+    requestAnimationFrame(idlePulse);
+  }
+
+  draw();
+  idlePulse();
+})();
+</script>
+</body>
+</html>
diff --git a/HTML/audio-visualization/7.html b/HTML/audio-visualization/7.html
new file mode 100644
index 0000000..087afab
--- /dev/null
+++ b/HTML/audio-visualization/7.html
@@ -0,0 +1,653 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CYBER AUDIO // NEURAL VISUALIZER</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 100%; height: 100%; overflow: hidden;
+    background: #05010d;
+    font-family: 'Courier New', 'Consolas', monospace;
+    color: #00ffff;
+    cursor: default;
+  }
+  canvas { display: block; position: fixed; top: 0; left: 0; z-index: 1; }
+
+  /* HUD 控制面板 */
+  #hud {
+    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
+    display: flex; justify-content: space-between; align-items: flex-start;
+    padding: 20px 30px; pointer-events: none;
+  }
+  #hud-left, #hud-right { pointer-events: auto; }
+
+  .panel {
+    background: rgba(5, 1, 13, 0.75);
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    padding: 12px 18px;
+    position: relative;
+  }
+  .panel::before, .panel::after {
+    content: '';
+    position: absolute;
+    width: 10px; height: 10px;
+    border: 1px solid #ff00ff;
+  }
+  .panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
+  .panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
+
+  .title {
+    font-size: 11px; letter-spacing: 3px; color: #ff00ff;
+    text-shadow: 0 0 8px #ff00ff;
+    margin-bottom: 8px;
+  }
+  .status {
+    font-size: 10px; letter-spacing: 2px; color: #00ffff;
+    text-shadow: 0 0 6px #00ffff;
+  }
+  .status.off { color: #444; text-shadow: none; }
+  .status.rec { color: #ff0040; text-shadow: 0 0 8px #ff0040; animation: blink 1s infinite; }
+  @keyframes blink { 50% { opacity: 0.3; } }
+
+  /* 按钮 */
+  #controls {
+    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
+    z-index: 10; display: flex; gap: 40px;
+  }
+  .btn {
+    background: none; border: none; outline: none;
+    font-family: inherit; font-size: 13px; letter-spacing: 4px;
+    color: #00ffff; text-shadow: 0 0 8px #00ffff;
+    cursor: pointer; padding: 8px 4px; position: relative;
+    text-transform: uppercase;
+    transition: color 0.2s, text-shadow 0.2s;
+  }
+  .btn::after {
+    content: ''; position: absolute; bottom: 0; left: 50%;
+    width: 0; height: 1px;
+    background: #ff00ff; box-shadow: 0 0 6px #ff00ff;
+    transition: width 0.3s, left 0.3s;
+  }
+  .btn:hover { color: #ff00ff; text-shadow: 0 0 12px #ff00ff; }
+  .btn:hover::after { width: 100%; left: 0; }
+  .btn:active { transform: scale(0.97); }
+
+  /* 角落装饰 */
+  .corner {
+    position: fixed; width: 60px; height: 60px; z-index: 10;
+    border-color: #ff00ff; pointer-events: none;
+  }
+  .corner.tl { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
+  .corner.tr { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
+  .corner.bl { bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; }
+  .corner.br { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }
+
+  /* 故障文字层 */
+  #glitch-title {
+    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+    z-index: 5; font-size: 72px; letter-spacing: 12px; font-weight: bold;
+    color: rgba(0, 255, 255, 0.04);
+    text-shadow: none;
+    pointer-events: none;
+    white-space: nowrap;
+    transition: opacity 0.5s;
+  }
+</style>
+</head>
+<body>
+
+<canvas id="cv"></canvas>
+
+<div id="glitch-title">N E U R O &nbsp; S Y N C</div>
+
+<div class="corner tl"></div>
+<div class="corner tr"></div>
+<div class="corner bl"></div>
+<div class="corner br"></div>
+
+<div id="hud">
+  <div class="panel" id="hud-left">
+    <div class="title">// NEURAL VISUALIZER v2.077</div>
+    <div class="status" id="status-mic">MIC: OFFLINE</div>
+  </div>
+  <div class="panel" id="hud-right">
+    <div class="title">// SIGNAL DATA</div>
+    <div class="status" id="status-fps">FPS: --</div>
+    <div class="status" id="status-vol">VOL: --</div>
+  </div>
+</div>
+
+<div id="controls">
+  <button class="btn" id="btn-mic">启动麦克风</button>
+  <button class="btn" id="btn-fullscreen">全屏</button>
+</div>
+
+<script>
+// ============================================================
+//  CYBER AUDIO VISUALIZER
+// ============================================================
+
+const canvas = document.getElementById('cv');
+const ctx = canvas.getContext('2d');
+const btnMic = document.getElementById('btn-mic');
+const btnFs = document.getElementById('btn-fullscreen');
+const statusMic = document.getElementById('status-mic');
+const statusFps = document.getElementById('status-fps');
+const statusVol = document.getElementById('status-vol');
+const glitchTitle = document.getElementById('glitch-title');
+
+let W, H;
+function resize() {
+  W = canvas.width = window.innerWidth;
+  H = canvas.height = window.innerHeight;
+}
+resize();
+window.addEventListener('resize', resize);
+
+// --- 音频系统 ---
+let audioCtx = null;
+let analyser = null;
+let source = null;
+let dataArray = null;
+let freqArray = null;
+let micActive = false;
+let micStream = null;
+
+async function toggleMic() {
+  if (micActive) {
+    stopMic();
+  } else {
+    await startMic();
+  }
+}
+
+async function startMic() {
+  try {
+    micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    source = audioCtx.createMediaStreamSource(micStream);
+    analyser = audioCtx.createAnalyser();
+    analyser.fftSize = 512;
+    analyser.smoothingTimeConstant = 0.82;
+    source.connect(analyser);
+    dataArray = new Uint8Array(analyser.fftSize);
+    freqArray = new Uint8Array(analyser.frequencyBinCount);
+    micActive = true;
+    btnMic.textContent = '停止麦克风';
+    statusMic.textContent = 'MIC: ACTIVE';
+    statusMic.classList.add('rec');
+    glitchTitle.style.opacity = '0';
+    initParticles();
+  } catch (e) {
+    statusMic.textContent = 'MIC: ACCESS DENIED';
+    statusMic.classList.add('off');
+  }
+}
+
+function stopMic() {
+  if (micStream) {
+    micStream.getTracks().forEach(t => t.stop());
+    micStream = null;
+  }
+  if (audioCtx) {
+    audioCtx.close();
+    audioCtx = null;
+  }
+  analyser = null;
+  source = null;
+  dataArray = null;
+  freqArray = null;
+  micActive = false;
+  btnMic.textContent = '启动麦克风';
+  statusMic.textContent = 'MIC: OFFLINE';
+  statusMic.classList.remove('rec');
+  glitchTitle.style.opacity = '1';
+}
+
+btnMic.addEventListener('click', toggleMic);
+
+// --- 全屏 ---
+btnFs.addEventListener('click', () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+    btnFs.textContent = '退出全屏';
+  } else {
+    document.exitFullscreen();
+    btnFs.textContent = '全屏';
+  }
+});
+document.addEventListener('fullscreenchange', () => {
+  btnFs.textContent = document.fullscreenElement ? '退出全屏' : '全屏';
+});
+
+// --- 辅助函数 ---
+function neonLine(x1, y1, x2, y2, color, glow) {
+  ctx.shadowBlur = glow;
+  ctx.shadowColor = color;
+  ctx.strokeStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+}
+
+function neonCircle(x, y, r, color, glow, lw) {
+  ctx.shadowBlur = glow;
+  ctx.shadowColor = color;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lw;
+  ctx.beginPath();
+  ctx.arc(x, y, r, 0, Math.PI * 2);
+  ctx.stroke();
+}
+
+function lerp(a, b, t) { return a + (b - a) * t; }
+
+// --- 粒子系统 ---
+let particles = [];
+class Particle {
+  constructor() { this.reset(); this.y = Math.random() * H; }
+  reset() {
+    this.x = Math.random() * W;
+    this.y = H + 10;
+    this.speed = 0.5 + Math.random() * 2.5;
+    this.size = 0.5 + Math.random() * 2;
+    this.life = 1;
+    this.freqIndex = Math.floor(Math.random() * 60);
+    this.color = Math.random() > 0.5 ? '#ff00ff' : '#00ffff';
+    this.vx = (Math.random() - 0.5) * 0.5;
+  }
+  update(intensity) {
+    let boost = 1;
+    if (freqArray && freqArray.length) {
+      boost = 1 + (freqArray[this.freqIndex] / 255) * intensity;
+    }
+    this.y -= this.speed * boost;
+    this.x += this.vx + Math.sin(this.y * 0.01) * 0.3;
+    if (this.y < -10) this.reset();
+  }
+  draw() {
+    ctx.shadowBlur = 8;
+    ctx.shadowColor = this.color;
+    ctx.fillStyle = this.color;
+    ctx.globalAlpha = 0.6;
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.globalAlpha = 1;
+  }
+}
+
+function initParticles() {
+  particles = [];
+  for (let i = 0; i < 120; i++) particles.push(new Particle());
+}
+initParticles();
+
+// --- 扫描线效果 ---
+let scanY = 0;
+
+// --- 静态噪声 ---
+function drawNoise() {
+  const imgData = ctx.createImageData(W, 2);
+  for (let i = 0; i < imgData.data.length; i += 4) {
+    const v = Math.random() * 30;
+    imgData.data[i] = v;
+    imgData.data[i + 1] = v;
+    imgData.data[i + 2] = v;
+    imgData.data[i + 3] = Math.random() * 15;
+  }
+  ctx.putImageData(imgData, 0, Math.floor(Math.random() * H));
+}
+
+// --- 绘制透视网格 ---
+function drawGrid(time) {
+  const horizon = H * 0.55;
+  const vanishX = W / 2;
+  ctx.strokeStyle = 'rgba(0, 255, 255, 0.08)';
+  ctx.lineWidth = 1;
+  ctx.shadowBlur = 0;
+
+  // 横线（透视）
+  for (let i = 0; i < 20; i++) {
+    const t = i / 20;
+    const perspective = t * t;
+    const y = horizon + (H - horizon) * perspective;
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(W, y);
+    ctx.stroke();
+  }
+
+  // 竖线（向消失点汇聚）
+  const numV = 24;
+  for (let i = 0; i <= numV; i++) {
+    const spread = (i / numV - 0.5) * 2;
+    ctx.beginPath();
+    ctx.moveTo(W / 2 + spread * W * 0.6, H);
+    ctx.lineTo(vanishX, horizon);
+    ctx.stroke();
+  }
+
+  // 地平线上的霓虹线
+  ctx.shadowBlur = 15;
+  ctx.shadowColor = '#ff00ff';
+  ctx.strokeStyle = 'rgba(255, 0, 255, 0.5)';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(0, horizon);
+  ctx.lineTo(W, horizon);
+  ctx.stroke();
+
+  // 天空/远景的光柱
+  const numBeams = 8;
+  for (let i = 0; i < numBeams; i++) {
+    const bx = (W / (numBeams + 1)) * (i + 1);
+    const h = 80 + Math.sin(time * 0.001 + i) * 30 + (freqArray ? (freqArray[i * 8] / 255) * 100 : 0);
+    const grad = ctx.createLinearGradient(bx, horizon, bx, horizon - h);
+    grad.addColorStop(0, 'rgba(0, 255, 255, 0.3)');
+    grad.addColorStop(1, 'rgba(0, 255, 255, 0)');
+    ctx.shadowBlur = 20;
+    ctx.shadowColor = '#00ffff';
+    ctx.fillStyle = grad;
+    ctx.fillRect(bx - 2, horizon - h, 4, h);
+  }
+}
+
+// --- 底部频谱柱状图（霓虹城市天际线风格）---
+function drawSkyline() {
+  if (!freqArray) return;
+  const binCount = analyser.frequencyBinCount;
+  const usable = Math.floor(binCount * 0.6);
+  const barCount = 80;
+  const barW = W / barCount;
+  const baseY = H * 0.9;
+
+  for (let i = 0; i < barCount; i++) {
+    const idx = Math.floor((i / barCount) * usable);
+    const val = freqArray[idx] / 255;
+    const barH = val * H * 0.45;
+
+    // 主柱
+    const hue = (i / barCount) * 60 + 260; // 紫到粉
+    const color1 = `hsl(${hue}, 100%, 55%)`;
+    ctx.shadowBlur = 15;
+    ctx.shadowColor = color1;
+
+    const grad = ctx.createLinearGradient(0, baseY - barH, 0, baseY);
+    grad.addColorStop(0, color1);
+    grad.addColorStop(1, 'rgba(0,0,0,0.5)');
+    ctx.fillStyle = grad;
+    ctx.fillRect(i * barW + 1, baseY - barH, barW - 2, barH);
+
+    // 顶部亮点
+    ctx.shadowBlur = 20;
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(i * barW + 1, baseY - barH - 2, barW - 2, 2);
+  }
+  ctx.shadowBlur = 0;
+}
+
+// --- 中心旋转多边形核心 ---
+function drawCore(time, bass, mid, treb) {
+  const cx = W / 2;
+  const cy = H * 0.45;
+  const baseR = 60;
+  const pulse = baseR + bass * 40;
+
+  ctx.save();
+  ctx.translate(cx, cy);
+
+  // 外层旋转三角环
+  for (let ring = 0; ring < 3; ring++) {
+    const r = pulse + ring * 30 + Math.sin(time * 0.002 + ring) * 10;
+    const sides = 3 + ring * 2;
+    const rot = time * 0.0005 * (ring % 2 === 0 ? 1 : -1);
+
+    ctx.shadowBlur = 20;
+    ctx.shadowColor = ring % 2 === 0 ? '#ff00ff' : '#00ffff';
+    ctx.strokeStyle = ring % 2 === 0 ? `rgba(255,0,255,${0.6 - ring * 0.15})` : `rgba(0,255,255,${0.6 - ring * 0.15})`;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    for (let i = 0; i <= sides; i++) {
+      const angle = (i / sides) * Math.PI * 2 + rot;
+      const rr = r + Math.sin(angle * 3 + time * 0.003) * (5 + mid * 15);
+      const x = Math.cos(angle) * rr;
+      const y = Math.sin(angle) * rr;
+      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+  }
+
+  ctx.restore();
+}
+
+// --- 圆形频谱环 ---
+function drawSpectrumRing(time, bass, mid, treb) {
+  const cx = W / 2;
+  const cy = H * 0.45;
+  if (!freqArray) {
+    neonCircle(cx, cy, 140, 'rgba(0, 255, 255, 0.15)', 5, 1);
+    return;
+  }
+
+  const binCount = analyser.frequencyBinCount;
+  const count = 128;
+  const baseR = 140;
+  const rot = time * 0.0003;
+
+  for (let i = 0; i < count; i++) {
+    const angle = (i / count) * Math.PI * 2 + rot;
+    const idx = Math.floor((i / count) * binCount * 0.5);
+    const val = freqArray[idx] / 255;
+    const len = val * 80;
+
+    const x1 = cx + Math.cos(angle) * baseR;
+    const y1 = cy + Math.sin(angle) * baseR;
+    const x2 = cx + Math.cos(angle) * (baseR + len);
+    const y2 = cy + Math.sin(angle) * (baseR + len);
+
+    const color = i % 2 === 0 ? '#00ffff' : '#ff00ff';
+    ctx.shadowBlur = 10;
+    ctx.shadowColor = color;
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = 0.4 + val * 0.6;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+  }
+  ctx.globalAlpha = 1;
+  ctx.shadowBlur = 0;
+}
+
+// --- 顶部波形 ---
+function drawWaveform() {
+  if (!dataArray) return;
+  analyser.getByteTimeDomainData(dataArray);
+  const waveY = H * 0.08;
+  const waveH = 40;
+
+  ctx.shadowBlur = 10;
+  ctx.shadowColor = '#00ffff';
+  ctx.strokeStyle = '#00ffff';
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  const step = W / dataArray.length;
+  for (let i = 0; i < dataArray.length; i++) {
+    const v = dataArray[i] / 128.0 - 1;
+    const x = i * step;
+    const y = waveY + v * waveH;
+    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+  }
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+}
+
+// --- 侧边频谱柱 ---
+function drawSideBars() {
+  if (!freqArray) return;
+  const count = 24;
+  const binCount = analyser.frequencyBinCount;
+  const barH = 6;
+  const gap = 4;
+  const maxW = 100;
+
+  // 左侧
+  for (let i = 0; i < count; i++) {
+    const idx = Math.floor((i / count) * binCount * 0.4);
+    const val = freqArray[idx] / 255;
+    const w = val * maxW;
+    const y = H * 0.15 + i * (barH + gap);
+    ctx.shadowBlur = 8;
+    ctx.shadowColor = '#ff00ff';
+    ctx.fillStyle = `rgba(255, 0, 255, ${0.3 + val * 0.7})`;
+    ctx.fillRect(20, y, w, barH);
+  }
+
+  // 右侧（镜像）
+  for (let i = 0; i < count; i++) {
+    const idx = Math.floor((i / count) * binCount * 0.4) + 10;
+    const val = freqArray[idx] / 255;
+    const w = val * maxW;
+    const y = H * 0.15 + i * (barH + gap);
+    ctx.shadowBlur = 8;
+    ctx.shadowColor = '#00ffff';
+    ctx.fillStyle = `rgba(0, 255, 255, ${0.3 + val * 0.7})`;
+    ctx.fillRect(W - 20 - w, y, w, barH);
+  }
+  ctx.shadowBlur = 0;
+}
+
+// --- 扫描线 ---
+function drawScanlines() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
+  for (let y = 0; y < H; y += 3) {
+    ctx.fillRect(0, y, W, 1);
+  }
+  // 移动扫描线
+  scanY = (scanY + 2) % H;
+  const grad = ctx.createLinearGradient(0, scanY - 80, 0, scanY + 80);
+  grad.addColorStop(0, 'rgba(0, 255, 255, 0)');
+  grad.addColorStop(0.5, 'rgba(0, 255, 255, 0.04)');
+  grad.addColorStop(1, 'rgba(0, 255, 255, 0)');
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, scanY - 80, W, 160);
+}
+
+// --- 故障效果（偶尔触发）---
+let glitchTimer = 0;
+let glitchActive = false;
+let glitchDuration = 0;
+function drawGlitch(time) {
+  glitchTimer++;
+  if (!glitchActive && Math.random() < 0.001) {
+    glitchActive = true;
+    glitchDuration = 5 + Math.floor(Math.random() * 15);
+  }
+  if (glitchActive) {
+    glitchDuration--;
+    if (glitchDuration <= 0) glitchActive = false;
+    // RGB 偏移切片
+    const slices = 3;
+    for (let s = 0; s < slices; s++) {
+      const sy = Math.floor(Math.random() * H);
+      const sh = 5 + Math.floor(Math.random() * 30);
+      const offset = (Math.random() - 0.5) * 20;
+      const slice = ctx.getImageData(0, sy, W, sh);
+      ctx.putImageData(slice, offset, sy);
+    }
+  }
+}
+
+// --- 计算频段能量 ---
+function getEnergy() {
+  if (!freqArray) return { bass: 0, mid: 0, treb: 0, vol: 0 };
+  const binCount = freqArray.length;
+  let bass = 0, mid = 0, treb = 0, vol = 0;
+  const bassEnd = Math.floor(binCount * 0.08);
+  const midEnd = Math.floor(binCount * 0.35);
+  for (let i = 0; i < bassEnd; i++) bass += freqArray[i];
+  for (let i = bassEnd; i < midEnd; i++) mid += freqArray[i];
+  for (let i = midEnd; i < binCount; i++) treb += freqArray[i];
+  bass /= (bassEnd * 255);
+  mid /= ((midEnd - bassEnd) * 255);
+  treb /= ((binCount - midEnd) * 255);
+  vol = (bass + mid + treb) / 3;
+  return { bass, mid, treb, vol };
+}
+
+// --- FPS 计算 ---
+let lastTime = performance.now();
+let frameCount = 0;
+let fpsValue = 0;
+let fpsTimer = 0;
+
+// --- 主循环 ---
+function frame(time) {
+  requestAnimationFrame(frame);
+
+  // FPS
+  frameCount++;
+  fpsTimer += time - lastTime;
+  lastTime = time;
+  if (fpsTimer >= 1000) {
+    fpsValue = frameCount;
+    frameCount = 0;
+    fpsTimer = 0;
+    statusFps.textContent = 'FPS: ' + fpsValue;
+  }
+
+  // 获取音频数据
+  if (analyser && freqArray) {
+    analyser.getByteFrequencyData(freqArray);
+  }
+
+  // 清屏（带拖尾）
+  ctx.fillStyle = 'rgba(5, 1, 13, 0.25)';
+  ctx.fillRect(0, 0, W, H);
+
+  const energy = getEnergy();
+  statusVol.textContent = 'VOL: ' + Math.floor(energy.vol * 100) + '%';
+
+  // 绘制各层
+  drawGrid(time);
+  drawSkyline();
+
+  // 粒子
+  for (const p of particles) {
+    p.update(3);
+    p.draw();
+  }
+
+  drawSpectrumRing(time, energy.bass, energy.mid, energy.treb);
+  drawCore(time, energy.bass, energy.mid, energy.treb);
+  drawWaveform();
+  drawSideBars();
+
+  // 中心十字准星
+  const cx = W / 2, cy = H * 0.45;
+  ctx.strokeStyle = 'rgba(0, 255, 255, 0.2)';
+  ctx.lineWidth = 1;
+  ctx.shadowBlur = 0;
+  ctx.beginPath();
+  ctx.moveTo(cx - 200, cy); ctx.lineTo(cx - 100, cy);
+  ctx.moveTo(cx + 100, cy); ctx.lineTo(cx + 200, cy);
+  ctx.moveTo(cx, cy - 200); ctx.lineTo(cx, cy - 100);
+  ctx.moveTo(cx, cy + 100); ctx.lineTo(cx, cy + 200);
+  ctx.stroke();
+
+  drawScanlines();
+  drawNoise();
+  drawGlitch(time);
+
+  ctx.shadowBlur = 0;
+}
+
+requestAnimationFrame(frame);
+</script>
+</body>
+</html>
diff --git a/HTML/audio-visualization/8.html b/HTML/audio-visualization/8.html
new file mode 100644
index 0000000..5ef3a39
--- /dev/null
+++ b/HTML/audio-visualization/8.html
@@ -0,0 +1,628 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Audio Visualization - Tech Core</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 100%; height: 100%;
+    background: #05080f;
+    overflow: hidden;
+    font-family: 'Courier New', 'Consolas', monospace;
+    color: #00f0ff;
+    cursor: default;
+  }
+  canvas {
+    display: block;
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+  }
+  /* HUD 顶部栏 */
+  .hud-top {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .hud-top .brand {
+    font-size: 13px;
+    letter-spacing: 3px;
+    color: #00f0ff;
+    text-shadow: 0 0 8px #00f0ff, 0 0 16px #00f0ff88;
+  }
+  .hud-top .status {
+    font-size: 12px;
+    letter-spacing: 2px;
+    color: #ff00e5;
+    text-shadow: 0 0 8px #ff00e5;
+  }
+  .hud-top .status.active { color: #00ff88; text-shadow: 0 0 8px #00ff88, 0 0 16px #00ff8888; }
+
+  /* 底部控制栏 */
+  .controls {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 40px;
+    z-index: 10;
+  }
+  .ctrl-btn {
+    background: transparent;
+    border: none;
+    color: #00f0ff;
+    font-family: 'Courier New', 'Consolas', monospace;
+    font-size: 14px;
+    letter-spacing: 3px;
+    cursor: pointer;
+    padding: 8px 16px;
+    text-shadow: 0 0 6px #00f0ff;
+    transition: all 0.25s ease;
+    pointer-events: auto;
+    position: relative;
+  }
+  .ctrl-btn::before,
+  .ctrl-btn::after {
+    content: '';
+    position: absolute;
+    width: 0; height: 1px;
+    background: #00f0ff;
+    transition: width 0.3s ease;
+    box-shadow: 0 0 6px #00f0ff;
+  }
+  .ctrl-btn::before { top: 0; left: 0; }
+  .ctrl-btn::after { bottom: 0; right: 0; }
+  .ctrl-btn:hover {
+    color: #fff;
+    text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff;
+  }
+  .ctrl-btn:hover::before,
+  .ctrl-btn:hover::after { width: 100%; }
+  .ctrl-btn.active {
+    color: #ff00e5;
+    text-shadow: 0 0 8px #ff00e5, 0 0 16px #ff00e588;
+  }
+  .ctrl-btn.active::before,
+  .ctrl-btn.active::after { background: #ff00e5; box-shadow: 0 0 6px #ff00e5; }
+
+  /* 四角装饰 */
+  .corner {
+    position: absolute;
+    width: 60px; height: 60px;
+    border-color: #00f0ff55;
+    z-index: 5;
+    pointer-events: none;
+  }
+  .corner.tl { top: 12px; left: 12px; border-top: 1px solid; border-left: 1px solid; }
+  .corner.tr { top: 12px; right: 12px; border-top: 1px solid; border-right: 1px solid; }
+  .corner.bl { bottom: 12px; left: 12px; border-bottom: 1px solid; border-left: 1px solid; }
+  .corner.br { bottom: 12px; right: 12px; border-bottom: 1px solid; border-right: 1px solid; }
+
+  /* 提示覆盖层 */
+  .overlay {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 20;
+    pointer-events: none;
+    transition: opacity 0.5s;
+  }
+  .overlay.hidden { opacity: 0; }
+  .overlay h2 {
+    font-size: 18px;
+    letter-spacing: 5px;
+    color: #00f0ff;
+    text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff88;
+    margin-bottom: 12px;
+    font-weight: normal;
+  }
+  .overlay p {
+    font-size: 12px;
+    letter-spacing: 2px;
+    color: #00f0ff99;
+  }
+</style>
+</head>
+<body>
+
+<!-- HUD 装饰 -->
+<div class="corner tl"></div>
+<div class="corner tr"></div>
+<div class="corner bl"></div>
+<div class="corner br"></div>
+
+<!-- 顶部状态栏 -->
+<div class="hud-top">
+  <div class="brand">AUDIO.CORE // SYS.ONLINE</div>
+  <div class="status" id="statusText">● MIC OFFLINE</div>
+</div>
+
+<!-- 提示层 -->
+<div class="overlay" id="overlay">
+  <h2>点击「启动麦克风」开始</h2>
+  <p>ALLOW MICROPHONE ACCESS TO INITIALIZE</p>
+</div>
+
+<!-- 画布 -->
+<canvas id="cv"></canvas>
+
+<!-- 控制按钮 -->
+<div class="controls">
+  <button class="ctrl-btn" id="btnMic">启动麦克风</button>
+  <button class="ctrl-btn" id="btnFs">切换全屏</button>
+</div>
+
+<script>
+(function() {
+  // ==================== 基础设置 ====================
+  const canvas = document.getElementById('cv');
+  const ctx = canvas.getContext('2d');
+  const btnMic = document.getElementById('btnMic');
+  const btnFs = document.getElementById('btnFs');
+  const statusText = document.getElementById('statusText');
+  const overlay = document.getElementById('overlay');
+
+  let W, H, cx, cy;
+  let dpr = window.devicePixelRatio || 1;
+
+  function resize() {
+    W = window.innerWidth;
+    H = window.innerHeight;
+    cx = W / 2;
+    cy = H / 2;
+    canvas.width = W * dpr;
+    canvas.height = H * dpr;
+    canvas.style.width = W + 'px';
+    canvas.style.height = H + 'px';
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  window.addEventListener('resize', resize);
+  resize();
+
+  // ==================== 音频相关 ====================
+  let audioCtx = null;
+  let analyser = null;
+  let source = null;
+  let micStream = null;
+  let freqData = null;
+  let timeData = null;
+  let isMicOn = false;
+  const FFT_SIZE = 512;
+  const BUFFER_LEN = FFT_SIZE / 2;
+
+  async function startMic() {
+    try {
+      micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      analyser = audioCtx.createAnalyser();
+      analyser.fftSize = FFT_SIZE;
+      analyser.smoothingTimeConstant = 0.82;
+      source = audioCtx.createMediaStreamSource(micStream);
+      source.connect(analyser);
+      freqData = new Uint8Array(analyser.frequencyBinCount);
+      timeData = new Uint8Array(analyser.fftSize);
+      isMicOn = true;
+      btnMic.textContent = '关闭麦克风';
+      btnMic.classList.add('active');
+      statusText.textContent = '● MIC ONLINE';
+      statusText.classList.add('active');
+      overlay.classList.add('hidden');
+    } catch (e) {
+      statusText.textContent = '● MIC DENIED';
+      alert('无法访问麦克风：' + e.message);
+    }
+  }
+
+  function stopMic() {
+    if (source) { try { source.disconnect(); } catch(e){} source = null; }
+    if (micStream) { micStream.getTracks().forEach(t => t.stop()); micStream = null; }
+    if (audioCtx) { try { audioCtx.close(); } catch(e){} audioCtx = null; }
+    analyser = null;
+    freqData = null;
+    timeData = null;
+    isMicOn = false;
+    btnMic.textContent = '启动麦克风';
+    btnMic.classList.remove('active');
+    statusText.textContent = '● MIC OFFLINE';
+    statusText.classList.remove('active');
+  }
+
+  btnMic.addEventListener('click', () => {
+    if (isMicOn) stopMic(); else startMic();
+  });
+
+  // ==================== 全屏 ====================
+  btnFs.addEventListener('click', () => {
+    if (!document.fullscreenElement) {
+      (document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen).call(document.documentElement);
+    } else {
+      (document.exitFullscreen || document.webkitExitFullscreen).call(document);
+    }
+  });
+
+  // ==================== 粒子系统 ====================
+  const PARTICLE_COUNT = 180;
+  const particles = [];
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    particles.push({
+      angle: Math.random() * Math.PI * 2,
+      radius: 80 + Math.random() * 200,
+      speed: (Math.random() - 0.5) * 0.003 + 0.001,
+      size: 1 + Math.random() * 2,
+      hue: Math.random() < 0.5 ? 185 : (Math.random() < 0.5 ? 300 : 30),
+      life: Math.random(),
+      pulse: Math.random() * Math.PI * 2
+    });
+  }
+
+  // ==================== 工具函数 ====================
+  function avgFreq(arr, start, end) {
+    if (!arr) return 0;
+    let sum = 0;
+    const s = Math.max(0, Math.floor(start));
+    const e = Math.min(arr.length, Math.floor(end));
+    const len = e - s || 1;
+    for (let i = s; i < e; i++) sum += arr[i];
+    return sum / len / 255;
+  }
+
+  // ==================== 绘制函数 ====================
+  let rotation = 0;
+  let scanAngle = 0;
+  let time = 0;
+
+  function drawGrid() {
+    // 背景深色渐变
+    ctx.fillStyle = '#05080f';
+    ctx.fillRect(0, 0, W, H);
+
+    // 微弱网格
+    const gridSize = 50;
+    ctx.strokeStyle = 'rgba(0, 240, 255, 0.04)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (let x = 0; x < W; x += gridSize) {
+      ctx.moveTo(x, 0); ctx.lineTo(x, H);
+    }
+    for (let y = 0; y < H; y += gridSize) {
+      ctx.moveTo(0, y); ctx.lineTo(W, y);
+    }
+    ctx.stroke();
+
+    // 径向光晕
+    const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(W, H) * 0.6);
+    grad.addColorStop(0, 'rgba(0, 80, 120, 0.15)');
+    grad.addColorStop(0.5, 'rgba(0, 20, 60, 0.05)');
+    grad.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, W, H);
+  }
+
+  function drawGuideRings(bassLevel) {
+    // 多层参考圆环
+    const rings = [
+      { r: 90, color: 'rgba(0, 240, 255, 0.15)' },
+      { r: 140, color: 'rgba(255, 0, 229, 0.1)' },
+      { r: 200, color: 'rgba(0, 240, 255, 0.08)' },
+      { r: 270, color: 'rgba(255, 136, 0, 0.07)' }
+    ];
+    rings.forEach((ring, i) => {
+      ctx.beginPath();
+      ctx.arc(cx, cy, ring.r + bassLevel * 8 * (i + 1) * 0.3, 0, Math.PI * 2);
+      ctx.strokeStyle = ring.color;
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    });
+
+    // 十字准线
+    ctx.strokeStyle = 'rgba(0, 240, 255, 0.08)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(cx - 320, cy); ctx.lineTo(cx + 320, cy);
+    ctx.moveTo(cx, cy - 320); ctx.lineTo(cx, cy + 320);
+    ctx.stroke();
+  }
+
+  function drawSpectrumRing(radius, barCount, startBin, endBin, color, glow, rotOffset, barWidth, bassBoost) {
+    if (!freqData) {
+      // 无音频时画静态环
+      ctx.beginPath();
+      ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+      ctx.strokeStyle = color.replace(/[\d.]+\)$/, '0.2)');
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      return;
+    }
+    const binRange = endBin - startBin;
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.rotate(rotation + rotOffset);
+    ctx.shadowBlur = glow;
+    ctx.shadowColor = color;
+
+    for (let i = 0; i < barCount; i++) {
+      const binIdx = startBin + (i / barCount) * binRange;
+      const nextBin = startBin + ((i + 1) / barCount) * binRange;
+      let v = avgFreq(freqData, binIdx, nextBin);
+      // 低音增强
+      v = Math.pow(v, 0.75) * (1 + bassBoost * 0.5);
+      const barH = v * 60 + 2;
+      const angle = (i / barCount) * Math.PI * 2;
+      const x1 = Math.cos(angle) * radius;
+      const y1 = Math.sin(angle) * radius;
+      const x2 = Math.cos(angle) * (radius + barH);
+      const y2 = Math.sin(angle) * (radius + barH);
+
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = barWidth;
+      ctx.lineCap = 'round';
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  function drawCore(bassLevel, midLevel) {
+    const baseR = 45;
+    const pulseR = baseR + bassLevel * 25;
+
+    ctx.save();
+    ctx.translate(cx, cy);
+
+    // 外圈光晕
+    for (let i = 3; i > 0; i--) {
+      ctx.beginPath();
+      ctx.arc(0, 0, pulseR + i * 12, 0, Math.PI * 2);
+      const alpha = 0.08 / i;
+      ctx.strokeStyle = `rgba(0, 240, 255, ${alpha})`;
+      ctx.lineWidth = 2;
+      ctx.shadowBlur = 20;
+      ctx.shadowColor = '#00f0ff';
+      ctx.stroke();
+    }
+    ctx.shadowBlur = 0;
+
+    // 旋转六边形外环
+    ctx.rotate(-rotation * 2);
+    ctx.beginPath();
+    for (let i = 0; i < 6; i++) {
+      const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
+      const r = pulseR + 10;
+      const x = Math.cos(a) * r;
+      const y = Math.sin(a) * r;
+      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+    ctx.strokeStyle = `rgba(0, 240, 255, ${0.4 + midLevel * 0.5})`;
+    ctx.lineWidth = 1.5;
+    ctx.shadowBlur = 15;
+    ctx.shadowColor = '#00f0ff';
+    ctx.stroke();
+
+    // 内部旋转三角形
+    ctx.rotate(rotation * 4);
+    ctx.beginPath();
+    for (let i = 0; i < 3; i++) {
+      const a = (i / 3) * Math.PI * 2 - Math.PI / 2;
+      const r = pulseR * 0.5;
+      const x = Math.cos(a) * r;
+      const y = Math.sin(a) * r;
+      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+    ctx.strokeStyle = `rgba(255, 255, 255, ${0.7 + bassLevel * 0.3})`;
+    ctx.lineWidth = 1;
+    ctx.shadowBlur = 10;
+    ctx.shadowColor = '#ffffff';
+    ctx.stroke();
+
+    ctx.restore();
+  }
+
+  function drawWaveformRays(bassLevel) {
+    if (!timeData) return;
+    analyser.getByteTimeDomainData(timeData);
+
+    const rayCount = 64;
+    const innerR = 260;
+    const maxLen = 80 + bassLevel * 60;
+
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.rotate(rotation * 0.5);
+
+    ctx.lineWidth = 1.5;
+    ctx.lineCap = 'round';
+    ctx.shadowBlur = 10;
+    ctx.shadowColor = '#ff00e5';
+
+    for (let i = 0; i < rayCount; i++) {
+      const t = i / rayCount;
+      const angle = t * Math.PI * 2;
+      const sampleIdx = Math.floor(t * timeData.length);
+      const v = (timeData[sampleIdx] - 128) / 128; // -1 to 1
+      const len = Math.abs(v) * maxLen + 5;
+
+      const x1 = Math.cos(angle) * innerR;
+      const y1 = Math.sin(angle) * innerR;
+      const x2 = Math.cos(angle) * (innerR + len);
+      const y2 = Math.sin(angle) * (innerR + len);
+
+      // 根据振幅改变颜色
+      const intensity = Math.abs(v);
+      const r = Math.floor(255 * intensity);
+      const g = Math.floor(80 + 100 * (1 - intensity));
+      const b = Math.floor(229 * (1 - intensity) + 100 * intensity);
+
+      ctx.beginPath();
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${0.3 + intensity * 0.7})`;
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  function drawParticles(bassLevel, highLevel) {
+    ctx.save();
+    ctx.translate(cx, cy);
+    for (const p of particles) {
+      p.angle += p.speed * (1 + bassLevel * 3);
+      p.pulse += 0.03;
+      p.life += 0.005;
+      if (p.life > 1) p.life = 0;
+
+      const pulseFactor = 1 + Math.sin(p.pulse) * 0.2;
+      const r = p.radius * pulseFactor + bassLevel * 30;
+      const x = Math.cos(p.angle) * r;
+      const y = Math.sin(p.angle) * r;
+      const alpha = (0.3 + highLevel * 0.7) * (0.5 + Math.sin(p.life * Math.PI) * 0.5);
+      const size = p.size * (1 + bassLevel * 2);
+
+      ctx.beginPath();
+      ctx.arc(x, y, size, 0, Math.PI * 2);
+      ctx.fillStyle = `hsla(${p.hue}, 100%, 65%, ${alpha})`;
+      ctx.shadowBlur = 8;
+      ctx.shadowColor = `hsla(${p.hue}, 100%, 65%, 1)`;
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  function drawScanner(bassLevel) {
+    // 外围刻度环
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.rotate(-rotation * 0.3);
+    const tickR = 340;
+    for (let i = 0; i < 72; i++) {
+      const a = (i / 72) * Math.PI * 2;
+      const isMajor = i % 6 === 0;
+      const len = isMajor ? 12 : 5;
+      ctx.beginPath();
+      ctx.moveTo(Math.cos(a) * tickR, Math.sin(a) * tickR);
+      ctx.lineTo(Math.cos(a) * (tickR + len), Math.sin(a) * (tickR + len));
+      ctx.strokeStyle = isMajor ? 'rgba(255, 136, 0, 0.6)' : 'rgba(255, 136, 0, 0.2)';
+      ctx.lineWidth = isMajor ? 1.5 : 1;
+      ctx.shadowBlur = isMajor ? 8 : 0;
+      ctx.shadowColor = '#ff8800';
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  function drawDataText(bassLevel, midLevel, highLevel, overallLevel) {
+    // 左下角数据
+    ctx.save();
+    ctx.font = '11px "Courier New", monospace';
+    ctx.textAlign = 'left';
+
+    const lines = [
+      { label: 'BASS', val: bassLevel, color: '#ff00e5' },
+      { label: 'MID ', val: midLevel, color: '#00f0ff' },
+      { label: 'HIGH', val: highLevel, color: '#00ff88' },
+      { label: 'VOL ', val: overallLevel, color: '#ff8800' }
+    ];
+
+    let y = H - 80;
+    lines.forEach(line => {
+      const barLen = Math.floor(line.val * 20);
+      const barStr = '█'.repeat(barLen) + '░'.repeat(20 - barLen);
+      const pct = Math.floor(line.val * 100).toString().padStart(3, '0');
+      ctx.fillStyle = line.color;
+      ctx.shadowBlur = 6;
+      ctx.shadowColor = line.color;
+      ctx.fillText(`${line.label} [${barStr}] ${pct}%`, 30, y);
+      y += 16;
+    });
+    ctx.restore();
+
+    // 右上角时间戳
+    ctx.save();
+    ctx.font = '11px "Courier New", monospace';
+    ctx.textAlign = 'right';
+    ctx.fillStyle = 'rgba(0, 240, 255, 0.5)';
+    ctx.shadowBlur = 4;
+    ctx.shadowColor = '#00f0ff';
+    const now = new Date();
+    const ts = now.toTimeString().split(' ')[0] + '.' + String(now.getMilliseconds()).padStart(3, '0');
+    ctx.fillText(`T:${ts}`, W - 30, 55);
+    ctx.fillText(`FPS:${fps}`, W - 30, 72);
+    ctx.restore();
+  }
+
+  // ==================== FPS 计算 ====================
+  let fps = 0;
+  let lastFpsTime = performance.now();
+  let frameCount = 0;
+
+  // ==================== 主循环 ====================
+  function animate() {
+    requestAnimationFrame(animate);
+
+    time += 0.016;
+    rotation += 0.003;
+    scanAngle -= 0.012;
+
+    // FPS
+    frameCount++;
+    const now = performance.now();
+    if (now - lastFpsTime >= 1000) {
+      fps = frameCount;
+      frameCount = 0;
+      lastFpsTime = now;
+    }
+
+    // 获取音频数据
+    let bass = 0, mid = 0, high = 0, overall = 0;
+    if (analyser && freqData) {
+      analyser.getByteFrequencyData(freqData);
+      bass = avgFreq(freqData, 0, BUFFER_LEN * 0.1);
+      mid = avgFreq(freqData, BUFFER_LEN * 0.1, BUFFER_LEN * 0.5);
+      high = avgFreq(freqData, BUFFER_LEN * 0.5, BUFFER_LEN);
+      overall = avgFreq(freqData, 0, BUFFER_LEN);
+    } else {
+      // 无音频时生成模拟数据以保持视觉活性
+      const t = time;
+      bass = 0.15 + Math.sin(t * 1.5) * 0.08 + Math.sin(t * 0.7) * 0.05;
+      mid = 0.1 + Math.sin(t * 2.3) * 0.06;
+      high = 0.08 + Math.sin(t * 4.1) * 0.04;
+      overall = (bass + mid + high) / 3;
+      bass = Math.max(0, Math.min(1, bass));
+      mid = Math.max(0, Math.min(1, mid));
+      high = Math.max(0, Math.min(1, high));
+    }
+
+    // 绘制各层
+    drawGrid();
+    drawGuideRings(bass);
+    drawParticles(bass, high);
+    drawScanner(bass);
+
+    // 三层频谱环
+    drawSpectrumRing(100, 64, 0, BUFFER_LEN * 0.3, 'rgba(0, 240, 255, 0.9)', 12, 0, 2, bass);
+    drawSpectrumRing(155, 80, BUFFER_LEN * 0.15, BUFFER_LEN * 0.6, 'rgba(255, 0, 229, 0.85)', 15, Math.PI / 40, 1.8, mid);
+    drawSpectrumRing(215, 96, BUFFER_LEN * 0.4, BUFFER_LEN, 'rgba(0, 255, 136, 0.8)', 10, -Math.PI / 30, 1.5, high);
+
+    drawWaveformRays(bass);
+    drawCore(bass, mid);
+    drawDataText(bass, mid, high, overall);
+  }
+
+  animate();
+})();
+</script>
+</body>
+</html>
