frost-craft/msu2-usb-monitor-controller
1
0
Fork 0
Code Releases Activity

feat: 优化“renderAudioVisualizer1”，增加四边线段

Browse Source
This commit is contained in:
Frost-ZX
2026-02-16 17:28:31 +08:00
parent 12d8fb432d
commit 1dc35034f6
1 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/main.js
View File

@@ -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();
}
/** 渲染音频可视化内容 */