From 1dc35034f6a17823cdb5166e16ada6e3453275e8 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Mon, 16 Feb 2026 17:28:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E2=80=9CrenderAudioV?=
 =?UTF-8?q?isualizer1=E2=80=9D=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=9B=9B?=
 =?UTF-8?q?=E8=BE=B9=E7=BA=BF=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/main.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/assets/main.js b/assets/main.js
index 2cf2705..c663a8b 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -814,15 +814,16 @@ window.addEventListener('DOMContentLoaded', () => {
     }
 
     // 计算平均音量
-    let avgVolume = dataSum / audioBufferLength;
+    let avgVolume0 = dataSum / audioBufferLength;
+    let avgVolume1 = avgVolume0 / 255;
 
     // 计算中心圆形半径（音量越高，圆形越大）
-    let centerCircleRadius = Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.05 + (avgVolume / 255) * Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.15;
+    let centerCircleRadius = Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.05 + avgVolume1 * Math.min(CANVAS_WIDTH, CANVAS_HEIGHT) * 0.15;
 
     // 绘制中心圆形
     ctx.beginPath();
     ctx.arc(centerX, centerY, centerCircleRadius, 0, Math.PI * 2);
-    ctx.fillStyle = `rgba(0, 255, 136, ${0.3 + (avgVolume / 255) * 0.7})`;
+    ctx.fillStyle = `rgba(0, 255, 136, ${0.2 + avgVolume1 * 0.8})`;
     ctx.fill();
     ctx.strokeStyle = '#00FF88';
     ctx.lineWidth = 2;
@@ -835,6 +836,27 @@ window.addEventListener('DOMContentLoaded', () => {
     ctx.lineWidth = 1;
     ctx.stroke();
 
+    // 绘制线段
+    ctx.beginPath();
+    ctx.strokeStyle = '#00CCFF';
+    ctx.lineWidth = 2;
+    // 上
+    ctx.moveTo(0, 1);
+    ctx.lineTo(avgVolume1 * CANVAS_WIDTH, 1);
+    ctx.stroke();
+    // 右
+    ctx.moveTo(CANVAS_WIDTH - 4, 0);
+    ctx.lineTo(CANVAS_WIDTH - 4, avgVolume1 * CANVAS_HEIGHT);
+    ctx.stroke();
+    // 下
+    ctx.moveTo(CANVAS_WIDTH, CANVAS_HEIGHT - 1);
+    ctx.lineTo(CANVAS_WIDTH - avgVolume1 * CANVAS_WIDTH, CANVAS_HEIGHT - 1);
+    ctx.stroke();
+    // 左
+    ctx.moveTo(4, CANVAS_HEIGHT);
+    ctx.lineTo(4, CANVAS_HEIGHT - avgVolume1 * CANVAS_HEIGHT);
+    ctx.stroke();
+
   }
 
   /** 渲染音频可视化内容 */