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

---
 HTML/audio-visualization/10.html | 1350 ++++++++++++++++++++++++++++++
 1 file changed, 1350 insertions(+)
 create mode 100644 HTML/audio-visualization/10.html
diff --git a/HTML/audio-visualization/10.html b/HTML/audio-visualization/10.html
new file mode 100644
index 0000000..008bf16
--- /dev/null
+++ b/HTML/audio-visualization/10.html
@@ -0,0 +1,1350 @@
+<!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>
+    :root {
+      color-scheme: dark;
+      font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
+      background: #06080b;
+      color: #f4f7f8;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      min-width: 320px;
+      min-height: 100vh;
+      margin: 0;
+      display: grid;
+      place-items: center;
+      overflow-x: hidden;
+      background:
+        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+        radial-gradient(circle at 50% 35%, #293038 0, #101419 38%, #050608 80%);
+      background-size: 32px 32px, 32px 32px, auto;
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    button {
+      color: inherit;
+    }
+
+    .player {
+      width: min(1040px, calc(100vw - 32px));
+      margin: 24px auto;
+      overflow: hidden;
+      border: 1px solid #69717a;
+      border-radius: 8px;
+      background: #171c21;
+      box-shadow:
+        0 32px 80px rgba(0, 0, 0, 0.62),
+        inset 0 1px rgba(255, 255, 255, 0.5);
+    }
+
+    .titlebar {
+      height: 38px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 0 14px;
+      color: #101417;
+      font-size: 13px;
+      font-weight: 600;
+      background: linear-gradient(#eff2f4, #aeb5bc 52%, #929aa2 53%, #c0c6cb);
+      border-bottom: 1px solid #0d1115;
+      text-shadow: 0 1px rgba(255, 255, 255, 0.55);
+    }
+
+    .app-mark {
+      width: 18px;
+      height: 18px;
+      position: relative;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      background: conic-gradient(from 20deg, #56c7ec, #1d6cb3 42%, #6cbd43 43%, #bddb4d 66%, #f4a92b 67%, #56c7ec);
+      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72), 0 1px 2px #52585e;
+    }
+
+    .app-mark::after {
+      content: "";
+      position: absolute;
+      inset: 5px 4px 5px 7px;
+      clip-path: polygon(0 0, 100% 50%, 0 100%);
+      background: white;
+    }
+
+    .titlebar span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .stage {
+      position: relative;
+      aspect-ratio: 16 / 8.7;
+      min-height: 320px;
+      background: #020507;
+      border: 9px solid #252c32;
+      border-top-color: #11161a;
+      border-bottom-color: #4b535a;
+      box-shadow: inset 0 0 0 1px #000;
+    }
+
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .display-info {
+      position: absolute;
+      inset: 16px 18px auto;
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      pointer-events: none;
+      color: rgba(223, 247, 255, 0.72);
+      font-family: Consolas, monospace;
+      font-size: 11px;
+      text-transform: uppercase;
+    }
+
+    .fullscreen-button {
+      min-width: 76px;
+      height: 34px;
+      position: absolute;
+      right: 14px;
+      bottom: 14px;
+      z-index: 2;
+      display: grid;
+      place-items: center;
+      padding: 0 12px;
+      border: 1px solid rgba(150, 211, 225, 0.48);
+      border-radius: 3px;
+      background: rgba(5, 16, 21, 0.72);
+      color: #d9f7ff;
+      font: 12px/1 "Segoe UI", "Microsoft YaHei", sans-serif;
+      cursor: pointer;
+      opacity: 0.68;
+      transition: opacity 140ms ease, border-color 140ms ease, background 140ms ease;
+    }
+
+    .fullscreen-button:hover {
+      opacity: 1;
+      border-color: #6dddf4;
+      background: rgba(13, 64, 79, 0.9);
+    }
+
+    .stage:fullscreen,
+    .stage:-webkit-full-screen {
+      width: 100vw;
+      height: 100vh;
+      min-height: 100vh;
+      aspect-ratio: auto;
+      border: 0;
+      background: #020507;
+    }
+
+    .stage:fullscreen .fullscreen-button,
+    .stage:-webkit-full-screen .fullscreen-button {
+      right: 20px;
+      bottom: 20px;
+    }
+
+    .mode-switcher {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 1px;
+      padding: 5px;
+      background: #0d1115;
+      border-top: 1px solid #69727a;
+      border-bottom: 1px solid #050709;
+    }
+
+    .mode-button {
+      min-height: 34px;
+      border: 1px solid transparent;
+      border-radius: 3px;
+      background: #1b2228;
+      color: #9ba7af;
+      cursor: pointer;
+      transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
+    }
+
+    .mode-button:hover {
+      color: #f3fbff;
+      background: #263038;
+    }
+
+    .mode-button.active {
+      color: #fff;
+      border-color: #4cadd0;
+      background: linear-gradient(#268db5, #145673);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.28), 0 0 10px rgba(48, 188, 234, 0.2);
+    }
+
+    .controls {
+      display: grid;
+      grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
+      align-items: center;
+      gap: 18px;
+      padding: 14px 16px 16px;
+      background: linear-gradient(#313941, #1b2127 60%, #13181d);
+      border-top: 1px solid #515b64;
+    }
+
+    .track-meta {
+      min-width: 0;
+    }
+
+    .track-name {
+      margin: 0 0 4px;
+      overflow: hidden;
+      color: #f5f8fa;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .track-status {
+      margin: 0;
+      color: #83909a;
+      font-size: 11px;
+      letter-spacing: 0;
+    }
+
+    .transport {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    .round-button,
+    .file-button {
+      display: inline-grid;
+      place-items: center;
+      border: 1px solid #68737c;
+      background: linear-gradient(#515b63, #242b31 52%, #151a1f 53%, #30373d);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.4);
+      cursor: pointer;
+    }
+
+    .round-button:hover,
+    .file-button:hover {
+      border-color: #91a3ae;
+      filter: brightness(1.12);
+    }
+
+    .file-button.active {
+      color: #fff;
+      border-color: #57d7ed;
+      background: linear-gradient(#2999b8, #145b73 52%, #0c4053 53%, #176b83);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 0 10px rgba(59, 214, 238, 0.35);
+    }
+
+    .round-button:disabled,
+    .file-button:disabled,
+    input:disabled {
+      opacity: 0.42;
+      cursor: not-allowed;
+    }
+
+    .round-button:active,
+    .file-button:active {
+      transform: translateY(1px);
+    }
+
+    .round-button {
+      width: 46px;
+      height: 46px;
+      border-radius: 50%;
+      font-size: 19px;
+      line-height: 1;
+    }
+
+    .play-icon {
+      display: block;
+      width: 0;
+      height: 0;
+      margin-left: 3px;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-left: 12px solid #eefbff;
+      filter: drop-shadow(0 0 3px #41c5ef);
+    }
+
+    .pause-icon {
+      width: 13px;
+      height: 16px;
+      margin: 0;
+      border: 0;
+      background: linear-gradient(90deg, #eefbff 0 38%, transparent 38% 62%, #eefbff 62%);
+      filter: drop-shadow(0 0 3px #41c5ef);
+    }
+
+    .file-button {
+      min-height: 34px;
+      padding: 0 13px;
+      border-radius: 4px;
+      color: #e7edf0;
+      font-size: 12px;
+    }
+
+    .right-controls {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+
+    .volume-icon {
+      color: #aab5bc;
+      font-size: 15px;
+    }
+
+    .timeline {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: 40px minmax(0, 1fr) 40px;
+      align-items: center;
+      gap: 10px;
+      color: #9da9b0;
+      font: 11px Consolas, monospace;
+    }
+
+    input[type="range"] {
+      height: 16px;
+      margin: 0;
+      appearance: none;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+      height: 4px;
+      border: 1px solid #090c0e;
+      border-radius: 2px;
+      background: linear-gradient(90deg, #40b9df var(--fill, 0%), #0a0d10 var(--fill, 0%));
+      box-shadow: inset 0 1px 2px #000;
+    }
+
+    input[type="range"]::-moz-range-track {
+      height: 4px;
+      border: 1px solid #090c0e;
+      border-radius: 2px;
+      background: #0a0d10;
+    }
+
+    input[type="range"]::-moz-range-progress {
+      height: 4px;
+      background: #40b9df;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      width: 12px;
+      height: 12px;
+      margin-top: -5px;
+      appearance: none;
+      border: 1px solid #c9d1d6;
+      border-radius: 50%;
+      background: linear-gradient(#fff, #75818a);
+      box-shadow: 0 0 0 1px #111, 0 0 6px rgba(64, 185, 223, 0.8);
+    }
+
+    input[type="range"]::-moz-range-thumb {
+      width: 11px;
+      height: 11px;
+      border: 1px solid #c9d1d6;
+      border-radius: 50%;
+      background: linear-gradient(#fff, #75818a);
+    }
+
+    #volume {
+      width: min(110px, 20vw);
+    }
+
+    #audio-file,
+    audio {
+      display: none;
+    }
+
+    button:focus-visible,
+    input:focus-visible,
+    label:focus-visible {
+      outline: 2px solid #66d6f6;
+      outline-offset: 2px;
+    }
+
+    @media (max-width: 680px) {
+      body {
+        place-items: start center;
+      }
+
+      .player {
+        width: calc(100vw - 16px);
+        margin: 8px auto;
+      }
+
+      .stage {
+        min-height: 300px;
+        aspect-ratio: 4 / 3;
+      }
+
+      .mode-switcher {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .controls {
+        grid-template-columns: 1fr auto;
+        gap: 14px;
+      }
+
+      .track-meta {
+        grid-column: 1 / -1;
+      }
+
+      .transport {
+        grid-row: 2;
+        grid-column: 1;
+        justify-content: flex-start;
+      }
+
+      .right-controls {
+        grid-row: 2;
+        grid-column: 2;
+        justify-content: flex-start;
+      }
+
+      .timeline {
+        grid-column: 1 / -1;
+      }
+
+      .display-info {
+        inset: 12px 12px auto;
+      }
+    }
+
+    @media (max-width: 420px) {
+      .controls {
+        grid-template-columns: 1fr;
+      }
+
+      .right-controls {
+        grid-row: 3;
+        grid-column: 1;
+      }
+
+      .timeline {
+        grid-row: 4;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="player" aria-label="音频可视化播放器">
+    <header class="titlebar">
+      <span class="app-mark" aria-hidden="true"></span>
+      <span>音频可视化</span>
+    </header>
+
+    <section class="stage" aria-label="音频可视化画布">
+      <canvas id="visualizer"></canvas>
+      <div class="display-info">
+        <span id="display-mode">SPECTRUM BARS</span>
+        <span id="signal-label">IDLE SIGNAL</span>
+      </div>
+      <button class="fullscreen-button" id="fullscreen-button" type="button" aria-label="全屏显示可视化" title="全屏显示可视化">全屏显示</button>
+    </section>
+
+    <nav class="mode-switcher" aria-label="可视化类型">
+      <button class="mode-button active" type="button" data-mode="bars">频谱柱</button>
+      <button class="mode-button" type="button" data-mode="wave">示波线</button>
+      <button class="mode-button" type="button" data-mode="particles">粒子</button>
+      <button class="mode-button" type="button" data-mode="vortex">漩涡</button>
+      <button class="mode-button" type="button" data-mode="random">随机效果</button>
+    </nav>
+
+    <section class="controls">
+      <div class="track-meta">
+        <p class="track-name" id="track-name">未选择音频</p>
+        <p class="track-status" id="track-status">选择本地文件开始播放</p>
+      </div>
+
+      <div class="transport">
+        <button class="round-button" id="play-button" type="button" aria-label="播放" title="播放">
+          <span class="play-icon" aria-hidden="true"></span>
+        </button>
+        <label class="file-button" for="audio-file" tabindex="0">选择音频</label>
+        <input id="audio-file" type="file" accept="audio/*">
+        <button class="file-button" id="microphone-button" type="button" aria-pressed="false">麦克风</button>
+      </div>
+
+      <div class="right-controls">
+        <span class="volume-icon" aria-hidden="true">VOL</span>
+        <input id="volume" type="range" min="0" max="1" value="0.78" step="0.01" aria-label="音量">
+      </div>
+
+      <div class="timeline">
+        <span id="current-time">0:00</span>
+        <input id="progress" type="range" min="0" max="100" value="0" step="0.1" aria-label="播放进度">
+        <span id="duration">0:00</span>
+      </div>
+    </section>
+
+    <audio id="audio" preload="metadata"></audio>
+  </main>
+
+  <script>
+    const canvas = document.querySelector("#visualizer");
+    const ctx = canvas.getContext("2d");
+    const stage = document.querySelector(".stage");
+    const audio = document.querySelector("#audio");
+    const audioFile = document.querySelector("#audio-file");
+    const playButton = document.querySelector("#play-button");
+    const microphoneButton = document.querySelector("#microphone-button");
+    const fullscreenButton = document.querySelector("#fullscreen-button");
+    const progress = document.querySelector("#progress");
+    const volume = document.querySelector("#volume");
+    const trackName = document.querySelector("#track-name");
+    const trackStatus = document.querySelector("#track-status");
+    const currentTime = document.querySelector("#current-time");
+    const durationLabel = document.querySelector("#duration");
+    const displayMode = document.querySelector("#display-mode");
+    const signalLabel = document.querySelector("#signal-label");
+    const modeButtons = [...document.querySelectorAll(".mode-button")];
+
+    const modeNames = {
+      bars: "SPECTRUM BARS",
+      wave: "OSCILLOSCOPE",
+      particles: "PARTICLE FIELD",
+      vortex: "SONIC VORTEX",
+      random: "RANDOM EFFECTS"
+    };
+
+    let mode = "bars";
+    let audioContext;
+    let analyser;
+    let audioSource;
+    let microphoneSource;
+    let microphoneStream;
+    let microphoneRequestId = 0;
+    let frequencyData;
+    let timeData;
+    let objectUrl;
+    let inputMode = "idle";
+    let isSeeking = false;
+    let particles = [];
+    let randomFamily = "magic";
+    let previousRandomFamily = "magic";
+    let randomPreset = 0;
+    let previousRandomPreset = 0;
+    let randomHue = 180;
+    let previousRandomHue = 180;
+    let lastRandomChange = 0;
+    let randomTransitionStart = 0;
+
+    const magicPresetNames = [
+      "KALEIDOSCOPE",
+      "NEON TUNNEL",
+      "SILK RIBBONS",
+      "AURORA FAN",
+      "STAR MATRIX",
+      "ROSE CURVE",
+      "CRYSTAL BURST"
+    ];
+
+    const groupPresetNames = [
+      "MIRROR BARS",
+      "ORBIT EQ",
+      "COLOR RIBBONS",
+      "PULSE MATRIX",
+      "BEAT FAN"
+    ];
+
+    function setupAudioGraph() {
+      if (audioContext) return;
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      analyser = audioContext.createAnalyser();
+      analyser.fftSize = 1024;
+      analyser.smoothingTimeConstant = 0.82;
+      frequencyData = new Uint8Array(analyser.frequencyBinCount);
+      timeData = new Uint8Array(analyser.fftSize);
+      audioSource = audioContext.createMediaElementSource(audio);
+      audioSource.connect(analyser);
+      audioSource.connect(audioContext.destination);
+    }
+
+    function setMicrophoneState(isActive) {
+      microphoneButton.disabled = false;
+      microphoneButton.classList.toggle("active", isActive);
+      microphoneButton.setAttribute("aria-pressed", String(isActive));
+      microphoneButton.textContent = isActive ? "停止麦克风" : "麦克风";
+      playButton.disabled = isActive;
+      progress.disabled = isActive;
+    }
+
+    function stopMicrophone(showStatus = true) {
+      microphoneRequestId++;
+      if (microphoneSource) microphoneSource.disconnect();
+      if (microphoneStream) microphoneStream.getTracks().forEach((track) => track.stop());
+      microphoneSource = null;
+      microphoneStream = null;
+      if (inputMode === "microphone") inputMode = audio.src ? "file" : "idle";
+      setMicrophoneState(false);
+      if (showStatus) {
+        trackName.textContent = audio.src ? trackName.dataset.fileName : "未选择音频";
+        trackStatus.textContent = audio.src ? "麦克风已停止 · 音频准备播放" : "麦克风已停止";
+        currentTime.textContent = formatTime(audio.currentTime);
+        durationLabel.textContent = formatTime(audio.duration);
+      }
+    }
+
+    async function startMicrophone() {
+      if (!navigator.mediaDevices?.getUserMedia) {
+        trackStatus.textContent = "当前环境不支持麦克风，请使用 HTTPS 或本地服务器";
+        return;
+      }
+
+      const requestId = ++microphoneRequestId;
+      microphoneButton.disabled = true;
+      trackName.textContent = "麦克风输入";
+      trackStatus.textContent = "正在请求麦克风权限...";
+      audio.pause();
+
+      try {
+        setupAudioGraph();
+        if (audioContext.state === "suspended") await audioContext.resume();
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: {
+            echoCancellation: true,
+            noiseSuppression: true,
+            autoGainControl: true
+          }
+        });
+        if (requestId !== microphoneRequestId) {
+          stream.getTracks().forEach((track) => track.stop());
+          return;
+        }
+        microphoneStream = stream;
+        microphoneSource = audioContext.createMediaStreamSource(microphoneStream);
+        microphoneSource.connect(analyser);
+        microphoneStream.getAudioTracks()[0]?.addEventListener("ended", () => {
+          if (inputMode === "microphone") stopMicrophone();
+        }, { once: true });
+        inputMode = "microphone";
+        setMicrophoneState(true);
+        trackName.textContent = "麦克风输入";
+        trackStatus.textContent = "实时采集中 · 不会回放麦克风声音";
+        currentTime.textContent = "LIVE";
+        durationLabel.textContent = "--:--";
+      } catch (error) {
+        if (requestId !== microphoneRequestId) return;
+        stopMicrophone(false);
+        trackName.textContent = audio.src ? trackName.dataset.fileName : "未选择音频";
+        if (error.name === "NotAllowedError") {
+          trackStatus.textContent = "麦克风权限被拒绝";
+        } else if (error.name === "NotFoundError") {
+          trackStatus.textContent = "未检测到可用麦克风";
+        } else {
+          trackStatus.textContent = "无法启用麦克风";
+        }
+      } finally {
+        if (requestId === microphoneRequestId) microphoneButton.disabled = false;
+      }
+    }
+
+    function setPlayIcon(isPlaying) {
+      playButton.innerHTML = `<span class="${isPlaying ? "pause-icon" : "play-icon"}" aria-hidden="true"></span>`;
+      playButton.setAttribute("aria-label", isPlaying ? "暂停" : "播放");
+      playButton.title = isPlaying ? "暂停" : "播放";
+    }
+
+    function formatTime(seconds) {
+      if (!Number.isFinite(seconds)) return "0:00";
+      const minutes = Math.floor(seconds / 60);
+      return `${minutes}:${Math.floor(seconds % 60).toString().padStart(2, "0")}`;
+    }
+
+    function updateRangeFill(input, value) {
+      input.style.setProperty("--fill", `${value}%`);
+    }
+
+    function getData(now) {
+      if (analyser && (inputMode === "microphone" || !audio.paused)) {
+        analyser.getByteFrequencyData(frequencyData);
+        analyser.getByteTimeDomainData(timeData);
+        return { frequency: frequencyData, time: timeData, active: true };
+      }
+
+      const idleFrequency = new Uint8Array(128);
+      const idleTime = new Uint8Array(256);
+      for (let i = 0; i < idleFrequency.length; i++) {
+        const falloff = Math.max(0, 1 - i / idleFrequency.length);
+        idleFrequency[i] = 10 + Math.max(0, Math.sin(now * 0.0016 + i * 0.31)) * 24 * falloff;
+      }
+      for (let i = 0; i < idleTime.length; i++) {
+        idleTime[i] = 128 + Math.sin(i * 0.12 + now * 0.0014) * 4;
+      }
+      return { frequency: idleFrequency, time: idleTime, active: false };
+    }
+
+    function resizeCanvas() {
+      const rect = canvas.getBoundingClientRect();
+      const ratio = Math.min(window.devicePixelRatio || 1, 2);
+      const width = Math.round(rect.width * ratio);
+      const height = Math.round(rect.height * ratio);
+      if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width;
+        canvas.height = height;
+        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+        particles = [];
+      }
+      return { width: rect.width, height: rect.height };
+    }
+
+    function drawBackground(width, height, now) {
+      ctx.fillStyle = "#010406";
+      ctx.fillRect(0, 0, width, height);
+
+      const glow = ctx.createRadialGradient(width * 0.5, height * 0.56, 0, width * 0.5, height * 0.56, width * 0.65);
+      glow.addColorStop(0, "rgba(0, 78, 105, 0.18)");
+      glow.addColorStop(0.55, "rgba(0, 25, 39, 0.1)");
+      glow.addColorStop(1, "rgba(0, 0, 0, 0)");
+      ctx.fillStyle = glow;
+      ctx.fillRect(0, 0, width, height);
+
+      ctx.strokeStyle = "rgba(81, 176, 199, 0.055)";
+      ctx.lineWidth = 1;
+      const spacing = 30;
+      const offset = (now * 0.006) % spacing;
+      for (let x = offset; x < width; x += spacing) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+      }
+      for (let y = offset; y < height; y += spacing) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+      }
+    }
+
+    function drawBars(data, width, height) {
+      const count = Math.max(28, Math.min(72, Math.floor(width / 11)));
+      const gap = Math.max(2, width * 0.003);
+      const barWidth = (width - gap * (count - 1)) / count;
+      const maxHeight = height * 0.72;
+      const baseline = height * 0.9;
+
+      for (let i = 0; i < count; i++) {
+        const index = Math.floor((i / count) ** 1.7 * data.length * 0.72);
+        const amplitude = data[index] / 255;
+        const barHeight = Math.max(3, amplitude * maxHeight);
+        const x = i * (barWidth + gap);
+        const gradient = ctx.createLinearGradient(0, baseline, 0, baseline - maxHeight);
+        gradient.addColorStop(0, "#1678a2");
+        gradient.addColorStop(0.48, "#35d7e7");
+        gradient.addColorStop(0.78, "#b9e747");
+        gradient.addColorStop(1, "#fff36c");
+        ctx.fillStyle = gradient;
+        ctx.shadowColor = "rgba(44, 218, 239, 0.55)";
+        ctx.shadowBlur = 8;
+        ctx.fillRect(x, baseline - barHeight, barWidth, barHeight);
+        ctx.shadowBlur = 0;
+        ctx.fillStyle = "rgba(69, 211, 233, 0.13)";
+        ctx.fillRect(x, baseline + 5, barWidth, barHeight * 0.13);
+      }
+    }
+
+    function drawWave(data, width, height, now) {
+      const layers = [
+        { offset: 0, color: "rgba(96, 243, 255, 0.95)", scale: 0.33, blur: 13 },
+        { offset: 2.2, color: "rgba(186, 235, 62, 0.6)", scale: 0.2, blur: 7 },
+        { offset: -2.4, color: "rgba(39, 135, 255, 0.48)", scale: 0.42, blur: 16 }
+      ];
+
+      layers.forEach((layer, layerIndex) => {
+        ctx.beginPath();
+        for (let i = 0; i < data.length; i++) {
+          const x = i / (data.length - 1) * width;
+          const audioY = (data[i] - 128) / 128;
+          const idleRipple = Math.sin(i * 0.055 + now * 0.0018 + layerIndex) * 0.025;
+          const y = height * (0.5 + layer.offset * 0.035) + (audioY + idleRipple) * height * layer.scale;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = layer.color;
+        ctx.lineWidth = layerIndex === 0 ? 2 : 1.2;
+        ctx.shadowColor = layer.color;
+        ctx.shadowBlur = layer.blur;
+        ctx.stroke();
+      });
+      ctx.shadowBlur = 0;
+    }
+
+    function ensureParticles(width, height) {
+      const target = Math.min(190, Math.max(80, Math.floor(width / 5)));
+      while (particles.length < target) {
+        particles.push({
+          angle: Math.random() * Math.PI * 2,
+          radius: Math.random(),
+          speed: 0.003 + Math.random() * 0.009,
+          size: 0.7 + Math.random() * 2.1,
+          band: Math.floor(Math.random() * 72),
+          drift: Math.random() * Math.PI * 2
+        });
+      }
+      particles.length = target;
+    }
+
+    function drawParticles(data, width, height, now) {
+      ensureParticles(width, height);
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const radius = Math.min(width, height) * 0.44;
+      const energy = data.slice(0, 96).reduce((sum, value) => sum + value, 0) / (96 * 255);
+
+      ctx.globalCompositeOperation = "lighter";
+      particles.forEach((particle, index) => {
+        const value = data[particle.band % data.length] / 255;
+        particle.angle += particle.speed * (0.7 + energy * 2.8);
+        const pulse = 1 + value * 0.28;
+        const x = centerX + Math.cos(particle.angle) * particle.radius * radius * pulse;
+        const y = centerY + Math.sin(particle.angle * 1.7 + particle.drift) * particle.radius * radius * 0.8 * pulse;
+        const hue = index % 4 === 0 ? 78 : 188 + particle.radius * 22;
+        ctx.beginPath();
+        ctx.arc(x, y, particle.size * (0.7 + value * 2.4), 0, Math.PI * 2);
+        ctx.fillStyle = `hsla(${hue}, 86%, 62%, ${0.28 + value * 0.7})`;
+        ctx.shadowColor = ctx.fillStyle;
+        ctx.shadowBlur = 8 + value * 15;
+        ctx.fill();
+      });
+      ctx.shadowBlur = 0;
+      ctx.globalCompositeOperation = "source-over";
+    }
+
+    function drawVortex(data, width, height, now) {
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const maxRadius = Math.min(width, height) * 0.44;
+      const points = 240;
+      const turns = 4.8;
+
+      ctx.globalCompositeOperation = "lighter";
+      for (let arm = 0; arm < 3; arm++) {
+        ctx.beginPath();
+        for (let i = 0; i < points; i++) {
+          const t = i / (points - 1);
+          const value = data[Math.floor(t * Math.min(data.length - 1, 160))] / 255;
+          const angle = t * Math.PI * 2 * turns + now * 0.00035 * (arm % 2 ? -1 : 1) + arm * Math.PI * 2 / 3;
+          const radius = t * maxRadius * (0.82 + value * 0.28);
+          const x = centerX + Math.cos(angle) * radius;
+          const y = centerY + Math.sin(angle) * radius * 0.55;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        const colors = ["rgba(65, 224, 244, 0.82)", "rgba(173, 232, 59, 0.56)", "rgba(28, 121, 234, 0.58)"];
+        ctx.strokeStyle = colors[arm];
+        ctx.lineWidth = 1.4;
+        ctx.shadowColor = colors[arm];
+        ctx.shadowBlur = 12;
+        ctx.stroke();
+      }
+
+      const bass = data.slice(0, 18).reduce((sum, value) => sum + value, 0) / (18 * 255);
+      const core = 12 + bass * 44;
+      const coreGlow = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, core * 2.8);
+      coreGlow.addColorStop(0, "rgba(244, 255, 174, 0.95)");
+      coreGlow.addColorStop(0.2, "rgba(64, 231, 248, 0.72)");
+      coreGlow.addColorStop(1, "rgba(20, 134, 214, 0)");
+      ctx.fillStyle = coreGlow;
+      ctx.fillRect(centerX - core * 3, centerY - core * 3, core * 6, core * 6);
+      ctx.shadowBlur = 0;
+      ctx.globalCompositeOperation = "source-over";
+    }
+
+    function randomizeEffect(now) {
+      const magicCount = magicPresetNames.length;
+      const totalCount = magicCount + groupPresetNames.length;
+      const currentIndex = randomFamily === "magic" ? randomPreset : magicCount + randomPreset;
+      let nextIndex = Math.floor(Math.random() * totalCount);
+      if (nextIndex === currentIndex) nextIndex = (nextIndex + 1) % totalCount;
+
+      previousRandomFamily = randomFamily;
+      previousRandomPreset = randomPreset;
+      previousRandomHue = randomHue;
+      randomFamily = nextIndex < magicCount ? "magic" : "group";
+      randomPreset = nextIndex < magicCount ? nextIndex : nextIndex - magicCount;
+      randomHue = Math.floor(Math.random() * 360);
+      lastRandomChange = now;
+      randomTransitionStart = now;
+    }
+
+    function drawMagicPreset(preset, hueBase, data, width, height, now, entrance) {
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const size = Math.min(width, height);
+      const bass = data.slice(0, 24).reduce((sum, value) => sum + value, 0) / (24 * 255);
+      ctx.save();
+      ctx.translate(centerX, centerY);
+      ctx.scale(0.94 + entrance * 0.06, 0.94 + entrance * 0.06);
+      ctx.rotate((1 - entrance) * 0.035);
+      ctx.globalCompositeOperation = "lighter";
+
+      if (preset === 0) {
+        const arms = 10;
+        for (let arm = 0; arm < arms; arm++) {
+          ctx.save();
+          ctx.rotate(arm * Math.PI * 2 / arms + now * 0.00016);
+          ctx.beginPath();
+          for (let i = 0; i < 72; i++) {
+            const value = data[Math.floor(i / 72 * Math.min(data.length, 180))] / 255;
+            const radius = i / 71 * size * 0.52;
+            const x = radius;
+            const y = Math.sin(i * 0.23 + now * 0.002) * size * (0.012 + value * 0.08);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          const hue = (hueBase + arm * 31) % 360;
+          ctx.strokeStyle = `hsla(${hue}, 92%, 62%, 0.72)`;
+          ctx.lineWidth = 1 + bass * 2.5;
+          ctx.shadowColor = `hsl(${hue}, 92%, 58%)`;
+          ctx.shadowBlur = 9 + bass * 18;
+          ctx.stroke();
+          ctx.restore();
+        }
+      } else if (preset === 1) {
+        for (let ring = 0; ring < 18; ring++) {
+          const index = Math.floor(ring / 18 * Math.min(data.length, 150));
+          const value = data[index] / 255;
+          const phase = (now * (0.00015 + ring * 0.000003)) % 1;
+          const radius = ((ring / 18 + phase) % 1) * size * 0.62;
+          const hue = (hueBase + ring * 17 + now * 0.018) % 360;
+          ctx.beginPath();
+          ctx.ellipse(0, 0, radius, radius * (0.42 + value * 0.24), now * 0.00012 + ring * 0.09, 0, Math.PI * 2);
+          ctx.strokeStyle = `hsla(${hue}, 96%, 64%, ${0.18 + value * 0.72})`;
+          ctx.lineWidth = 0.7 + value * 3;
+          ctx.shadowColor = `hsl(${hue}, 90%, 60%)`;
+          ctx.shadowBlur = 7 + value * 16;
+          ctx.stroke();
+        }
+      } else if (preset === 2) {
+        for (let ribbon = 0; ribbon < 6; ribbon++) {
+          ctx.beginPath();
+          for (let i = 0; i < 130; i++) {
+            const t = i / 129;
+            const value = data[Math.floor(t * Math.min(data.length - 1, 190))] / 255;
+            const x = (t - 0.5) * width * 0.92;
+            const wave = Math.sin(t * Math.PI * (4 + ribbon) + now * 0.0014 * (ribbon % 2 ? -1 : 1));
+            const y = wave * size * (0.07 + value * 0.19) + (ribbon - 2.5) * 7;
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          const hue = (hueBase + ribbon * 56) % 360;
+          ctx.strokeStyle = `hsla(${hue}, 94%, 63%, 0.68)`;
+          ctx.lineWidth = 1.2 + bass * 2;
+          ctx.shadowColor = `hsl(${hue}, 94%, 60%)`;
+          ctx.shadowBlur = 10 + bass * 15;
+          ctx.stroke();
+        }
+      } else if (preset === 3) {
+        for (let fan = 0; fan < 9; fan++) {
+          ctx.beginPath();
+          for (let i = 0; i < 110; i++) {
+            const t = i / 109;
+            const value = data[Math.floor(t * Math.min(data.length - 1, 180))] / 255;
+            const angle = (t - 0.5) * Math.PI * 1.35 + fan * 0.055;
+            const radius = size * (0.16 + t * 0.34 + value * 0.12);
+            const sway = Math.sin(now * 0.0011 + fan * 0.8 + t * 5) * size * 0.035;
+            const x = Math.sin(angle) * radius + sway;
+            const y = -Math.cos(angle) * radius * 0.66 + fan * 5 - size * 0.05;
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          const hue = (hueBase + fan * 27) % 360;
+          ctx.strokeStyle = `hsla(${hue}, 90%, 66%, ${0.24 + fan * 0.055})`;
+          ctx.lineWidth = 1 + bass * 1.8;
+          ctx.shadowColor = `hsl(${hue}, 92%, 62%)`;
+          ctx.shadowBlur = 12 + bass * 14;
+          ctx.stroke();
+        }
+      } else if (preset === 4) {
+        const pointCount = Math.min(170, Math.floor(width / 4));
+        for (let i = 0; i < pointCount; i++) {
+          const band = (i * 13) % Math.min(data.length, 180);
+          const value = data[band] / 255;
+          const angle = i * 2.39996 + now * (0.000035 + i % 5 * 0.000006);
+          const radius = Math.sqrt(i / pointCount) * size * 0.55 * (0.88 + value * 0.18);
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius * 0.72;
+          const hue = (hueBase + i * 4) % 360;
+          ctx.beginPath();
+          ctx.arc(x, y, 0.7 + value * 3.2, 0, Math.PI * 2);
+          ctx.fillStyle = `hsla(${hue}, 92%, 70%, ${0.3 + value * 0.68})`;
+          ctx.shadowColor = `hsl(${hue}, 92%, 64%)`;
+          ctx.shadowBlur = 7 + value * 13;
+          ctx.fill();
+
+          if (i > 2 && i % 4 === 0) {
+            const previousAngle = (i - 2) * 2.39996 + now * (0.000035 + (i - 2) % 5 * 0.000006);
+            const previousRadius = Math.sqrt((i - 2) / pointCount) * size * 0.55;
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            ctx.lineTo(Math.cos(previousAngle) * previousRadius, Math.sin(previousAngle) * previousRadius * 0.72);
+            ctx.strokeStyle = `hsla(${hue}, 88%, 64%, ${0.05 + value * 0.18})`;
+            ctx.lineWidth = 0.6;
+            ctx.stroke();
+          }
+        }
+      } else if (preset === 5) {
+        for (let layer = 0; layer < 5; layer++) {
+          ctx.beginPath();
+          const petals = 3 + layer;
+          for (let i = 0; i <= 280; i++) {
+            const angle = i / 280 * Math.PI * 2;
+            const index = Math.floor(i / 281 * Math.min(data.length - 1, 190));
+            const value = data[index] / 255;
+            const radius = Math.cos(petals * angle + now * 0.00045 * (layer % 2 ? -1 : 1)) * size * (0.13 + layer * 0.035 + value * 0.08);
+            const x = Math.cos(angle) * radius;
+            const y = Math.sin(angle) * radius * 0.76;
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          const hue = (hueBase + layer * 61) % 360;
+          ctx.strokeStyle = `hsla(${hue}, 94%, 65%, ${0.34 + layer * 0.1})`;
+          ctx.lineWidth = 0.9 + bass * 2.2;
+          ctx.shadowColor = `hsl(${hue}, 94%, 60%)`;
+          ctx.shadowBlur = 9 + bass * 17;
+          ctx.stroke();
+        }
+      } else {
+        const shards = 28;
+        for (let i = 0; i < shards; i++) {
+          const value = data[(i * 5) % Math.min(data.length, 160)] / 255;
+          const angle = i / shards * Math.PI * 2 + now * 0.00018;
+          const inner = size * (0.08 + bass * 0.04);
+          const outer = size * (0.2 + value * 0.34);
+          const spread = 0.025 + value * 0.04;
+          ctx.beginPath();
+          ctx.moveTo(Math.cos(angle - spread) * inner, Math.sin(angle - spread) * inner * 0.72);
+          ctx.lineTo(Math.cos(angle) * outer, Math.sin(angle) * outer * 0.72);
+          ctx.lineTo(Math.cos(angle + spread) * inner, Math.sin(angle + spread) * inner * 0.72);
+          ctx.closePath();
+          const hue = (hueBase + i * 19) % 360;
+          const shardGradient = ctx.createLinearGradient(0, 0, Math.cos(angle) * outer, Math.sin(angle) * outer);
+          shardGradient.addColorStop(0, `hsla(${hue}, 90%, 62%, 0.04)`);
+          shardGradient.addColorStop(1, `hsla(${(hue + 45) % 360}, 96%, 68%, ${0.24 + value * 0.62})`);
+          ctx.fillStyle = shardGradient;
+          ctx.shadowColor = `hsl(${hue}, 92%, 60%)`;
+          ctx.shadowBlur = 8 + value * 14;
+          ctx.fill();
+        }
+      }
+
+      ctx.restore();
+    }
+
+    function clipShapeReveal(width, height, progress, invert) {
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const maxRadius = Math.hypot(width, height) * 0.56;
+      const ripple = Math.sin(progress * Math.PI) * maxRadius * 0.035;
+      const points = 96;
+
+      ctx.beginPath();
+      if (invert) ctx.rect(-1, -1, width + 2, height + 2);
+      for (let i = 0; i <= points; i++) {
+        const angle = i / points * Math.PI * 2;
+        const radius = Math.max(0, maxRadius * progress + Math.sin(angle * 7 + progress * Math.PI * 4) * ripple);
+        const x = centerX + Math.cos(angle) * radius;
+        const y = centerY + Math.sin(angle) * radius;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+      ctx.clip(invert ? "evenodd" : "nonzero");
+    }
+
+    function drawRandomPreset(family, preset, hue, data, width, height, now, entrance) {
+      if (family === "magic") drawMagicPreset(preset, hue, data, width, height, now, entrance);
+      else drawGroupPreset(preset, hue, data, width, height, now, entrance);
+    }
+
+    function drawGroupPreset(preset, hueBase, data, width, height, now, entrance) {
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const size = Math.min(width, height);
+      const bass = data.slice(0, 24).reduce((sum, value) => sum + value, 0) / (24 * 255);
+      ctx.save();
+      ctx.translate(centerX, centerY);
+      ctx.scale(0.95 + entrance * 0.05, 0.95 + entrance * 0.05);
+      ctx.globalCompositeOperation = "lighter";
+
+      if (preset === 0) {
+        const count = Math.max(26, Math.min(64, Math.floor(width / 13)));
+        const gap = 2;
+        const barWidth = (width * 0.9 - gap * (count - 1)) / count;
+        for (let i = 0; i < count; i++) {
+          const index = Math.floor((i / count) ** 1.5 * Math.min(data.length, 190));
+          const value = data[index] / 255;
+          const barHeight = 3 + value * height * 0.38;
+          const x = -width * 0.45 + i * (barWidth + gap);
+          const hue = (hueBase + i * 5) % 360;
+          const gradient = ctx.createLinearGradient(0, -barHeight, 0, barHeight);
+          gradient.addColorStop(0, `hsla(${hue}, 94%, 66%, 0.92)`);
+          gradient.addColorStop(0.48, `hsla(${(hue + 48) % 360}, 90%, 53%, 0.34)`);
+          gradient.addColorStop(0.52, `hsla(${(hue + 48) % 360}, 90%, 53%, 0.34)`);
+          gradient.addColorStop(1, `hsla(${hue}, 94%, 66%, 0.92)`);
+          ctx.fillStyle = gradient;
+          ctx.shadowColor = `hsl(${hue}, 90%, 58%)`;
+          ctx.shadowBlur = 7 + value * 9;
+          ctx.fillRect(x, -barHeight, barWidth, barHeight * 2);
+        }
+      } else if (preset === 1) {
+        const count = 92;
+        const inner = size * (0.13 + bass * 0.035);
+        for (let i = 0; i < count; i++) {
+          const value = data[Math.floor(i / count * Math.min(data.length, 200))] / 255;
+          const angle = i / count * Math.PI * 2 - Math.PI / 2 + now * 0.00008;
+          const outer = inner + 4 + value * size * 0.25;
+          const hue = (hueBase + i * 3.5) % 360;
+          ctx.beginPath();
+          ctx.moveTo(Math.cos(angle) * inner, Math.sin(angle) * inner);
+          ctx.lineTo(Math.cos(angle) * outer, Math.sin(angle) * outer);
+          ctx.strokeStyle = `hsla(${hue}, 95%, 64%, ${0.35 + value * 0.65})`;
+          ctx.lineWidth = Math.max(1.2, size * 0.006);
+          ctx.shadowColor = `hsl(${hue}, 95%, 60%)`;
+          ctx.shadowBlur = 6 + value * 12;
+          ctx.stroke();
+        }
+      } else if (preset === 2) {
+        for (let ribbon = 0; ribbon < 8; ribbon++) {
+          ctx.beginPath();
+          for (let i = 0; i < 150; i++) {
+            const t = i / 149;
+            const value = data[Math.floor(t * Math.min(data.length - 1, 190))] / 255;
+            const x = (t - 0.5) * width * 0.94;
+            const y = Math.sin(t * Math.PI * (2.5 + ribbon * 0.34) + now * 0.0013 + ribbon) * size * (0.035 + value * 0.12) + (ribbon - 3.5) * 13;
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+          }
+          const hue = (hueBase + ribbon * 43) % 360;
+          ctx.strokeStyle = `hsla(${hue}, 93%, 65%, ${0.26 + ribbon * 0.065})`;
+          ctx.lineWidth = 1.1 + bass * 2.2;
+          ctx.shadowColor = `hsl(${hue}, 92%, 60%)`;
+          ctx.shadowBlur = 8 + bass * 13;
+          ctx.stroke();
+        }
+      } else if (preset === 3) {
+        const columns = Math.max(12, Math.min(24, Math.floor(width / 32)));
+        const rows = Math.max(7, Math.floor(columns * height / width * 0.65));
+        const cellWidth = width * 0.88 / columns;
+        const cellHeight = height * 0.72 / rows;
+        for (let row = 0; row < rows; row++) {
+          for (let column = 0; column < columns; column++) {
+            const index = (row * columns + column) % Math.min(data.length, 190);
+            const value = data[index] / 255;
+            const pulse = 0.35 + value * 0.65;
+            const x = -width * 0.44 + column * cellWidth;
+            const y = -height * 0.36 + row * cellHeight;
+            const hue = (hueBase + column * 8 + row * 21) % 360;
+            ctx.fillStyle = `hsla(${hue}, 90%, 60%, ${0.08 + value * 0.68})`;
+            ctx.shadowColor = `hsl(${hue}, 90%, 58%)`;
+            ctx.shadowBlur = value * 9;
+            ctx.fillRect(x + cellWidth * (1 - pulse) / 2, y + cellHeight * (1 - pulse) / 2, cellWidth * pulse - 2, cellHeight * pulse - 2);
+          }
+        }
+      } else {
+        const blades = 36;
+        for (let i = 0; i < blades; i++) {
+          const value = data[(i * 4) % Math.min(data.length, 180)] / 255;
+          const angle = i / blades * Math.PI * 2 + now * 0.00022;
+          const inner = size * 0.07;
+          const outer = size * (0.16 + value * 0.34);
+          const spread = Math.PI / blades * 0.7;
+          ctx.beginPath();
+          ctx.moveTo(Math.cos(angle - spread) * inner, Math.sin(angle - spread) * inner * 0.76);
+          ctx.quadraticCurveTo(Math.cos(angle + spread * 0.3) * outer, Math.sin(angle + spread * 0.3) * outer * 0.76, Math.cos(angle + spread) * inner, Math.sin(angle + spread) * inner * 0.76);
+          const hue = (hueBase + i * 10) % 360;
+          ctx.strokeStyle = `hsla(${hue}, 96%, 65%, ${0.3 + value * 0.67})`;
+          ctx.lineWidth = 1.3 + value * 2.6;
+          ctx.shadowColor = `hsl(${hue}, 94%, 60%)`;
+          ctx.shadowBlur = 8 + value * 13;
+          ctx.stroke();
+        }
+      }
+
+      ctx.restore();
+    }
+
+    function drawRandom(data, width, height, now) {
+      if (!lastRandomChange || now - lastRandomChange > 6200) randomizeEffect(now);
+
+      const transitionDuration = 1600;
+      const rawProgress = Math.min(1, (now - randomTransitionStart) / transitionDuration);
+      const transition = rawProgress * rawProgress * (3 - 2 * rawProgress);
+      if (transition < 1) {
+        ctx.save();
+        clipShapeReveal(width, height, transition, true);
+        drawRandomPreset(previousRandomFamily, previousRandomPreset, previousRandomHue, data, width, height, now, 1 - transition * 0.3);
+        ctx.restore();
+
+        ctx.save();
+        clipShapeReveal(width, height, transition, false);
+        drawRandomPreset(randomFamily, randomPreset, randomHue, data, width, height, now, transition);
+        ctx.restore();
+      } else {
+        drawRandomPreset(randomFamily, randomPreset, randomHue, data, width, height, now, 1);
+      }
+      const presetNames = randomFamily === "magic" ? magicPresetNames : groupPresetNames;
+      displayMode.textContent = `RANDOM EFFECTS / ${presetNames[randomPreset]}`;
+    }
+
+    function animate(now) {
+      const { width, height } = resizeCanvas();
+      const data = getData(now);
+      drawBackground(width, height, now);
+
+      if (mode === "bars") drawBars(data.frequency, width, height);
+      if (mode === "wave") drawWave(data.time, width, height, now);
+      if (mode === "particles") drawParticles(data.frequency, width, height, now);
+      if (mode === "vortex") drawVortex(data.frequency, width, height, now);
+      if (mode === "random") drawRandom(data.frequency, width, height, now);
+
+      signalLabel.textContent = data.active ? "LIVE SIGNAL" : "IDLE SIGNAL";
+      requestAnimationFrame(animate);
+    }
+
+    modeButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        if (button.dataset.mode === "random") randomizeEffect(performance.now());
+        mode = button.dataset.mode;
+        modeButtons.forEach((item) => item.classList.toggle("active", item === button));
+        displayMode.textContent = modeNames[mode];
+        particles = [];
+      });
+    });
+
+    fullscreenButton.addEventListener("click", async () => {
+      try {
+        if (document.fullscreenElement) await document.exitFullscreen();
+        else await stage.requestFullscreen();
+      } catch (error) {
+        trackStatus.textContent = "浏览器无法进入全屏模式";
+      }
+    });
+
+    document.addEventListener("fullscreenchange", () => {
+      const isFullscreen = document.fullscreenElement === stage;
+      fullscreenButton.textContent = isFullscreen ? "退出全屏" : "全屏显示";
+      fullscreenButton.setAttribute("aria-label", isFullscreen ? "退出全屏" : "全屏显示可视化");
+      fullscreenButton.title = isFullscreen ? "退出全屏" : "全屏显示可视化";
+    });
+
+    audioFile.addEventListener("change", () => {
+      const file = audioFile.files[0];
+      if (!file) return;
+      stopMicrophone(false);
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+      objectUrl = URL.createObjectURL(file);
+      audio.src = objectUrl;
+      inputMode = "file";
+      trackName.dataset.fileName = file.name.replace(/\.[^.]+$/, "");
+      trackName.textContent = trackName.dataset.fileName;
+      trackStatus.textContent = `${file.type || "本地音频"} · 准备播放`;
+      progress.value = 0;
+      updateRangeFill(progress, 0);
+      setPlayIcon(false);
+    });
+
+    playButton.addEventListener("click", async () => {
+      if (!audio.src) {
+        audioFile.click();
+        return;
+      }
+      setupAudioGraph();
+      if (audioContext.state === "suspended") await audioContext.resume();
+      inputMode = "file";
+      if (audio.paused) await audio.play();
+      else audio.pause();
+    });
+
+    microphoneButton.addEventListener("click", () => {
+      if (inputMode === "microphone") stopMicrophone();
+      else startMicrophone();
+    });
+
+    audio.addEventListener("play", () => {
+      setPlayIcon(true);
+      trackStatus.textContent = "正在播放 · 本地音频";
+    });
+
+    audio.addEventListener("pause", () => {
+      setPlayIcon(false);
+      if (inputMode !== "microphone" && !audio.ended && audio.src) trackStatus.textContent = "已暂停 · 本地音频";
+    });
+
+    audio.addEventListener("ended", () => {
+      setPlayIcon(false);
+      trackStatus.textContent = "播放完毕 · 本地音频";
+    });
+
+    audio.addEventListener("loadedmetadata", () => {
+      durationLabel.textContent = formatTime(audio.duration);
+    });
+
+    audio.addEventListener("timeupdate", () => {
+      if (isSeeking || !audio.duration) return;
+      const percentage = audio.currentTime / audio.duration * 100;
+      progress.value = percentage;
+      currentTime.textContent = formatTime(audio.currentTime);
+      updateRangeFill(progress, percentage);
+    });
+
+    progress.addEventListener("input", () => {
+      isSeeking = true;
+      const percentage = Number(progress.value);
+      currentTime.textContent = formatTime(audio.duration * percentage / 100);
+      updateRangeFill(progress, percentage);
+    });
+
+    progress.addEventListener("change", () => {
+      if (audio.duration) audio.currentTime = audio.duration * Number(progress.value) / 100;
+      isSeeking = false;
+    });
+
+    volume.addEventListener("input", () => {
+      audio.volume = Number(volume.value);
+      updateRangeFill(volume, Number(volume.value) * 100);
+    });
+
+    document.querySelector("label[for='audio-file']").addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        audioFile.click();
+      }
+    });
+
+    window.addEventListener("beforeunload", () => stopMicrophone(false));
+
+    audio.volume = Number(volume.value);
+    updateRangeFill(volume, Number(volume.value) * 100);
+    updateRangeFill(progress, 0);
+    requestAnimationFrame(animate);
+  </script>
+</body>
+</html>
