frost-craft/code-snippets
1
0
Fork 0
Code Releases Activity

chore(HTML): 更新 audio-visualization/2.html

Browse Source
This commit is contained in:
Frost-ZX
2026-07-05 15:34:58 +08:00
parent a022916e7a
commit d3ccadba6e
1 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
HTML/audio-visualization/2.html
View File

@@ -31,8 +31,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
/* 模拟玻璃外壳与暗角 */ /* 模拟玻璃外壳与暗角 */
background: background: radial-gradient(ellipse at center, #061715 0%, var(--vfd-bg) 70%, #000 100%);
radial-gradient(ellipse at center, #061715 0%, var(--vfd-bg) 70%, #000 100%); filter: brightness(1.5);
} }
canvas { canvas {
@@ -136,7 +136,8 @@
// VFD 荧光主色 // VFD 荧光主色
const GLOW = "#38f9d7"; const GLOW = "#38f9d7";
const DIM = "rgba(56, 249, 215, 0.14)"; const DIM_1 = "rgba(56, 249, 215, 0.14)";
const DIM_2 = "rgba(56, 249, 215, 0.5)";
let W = 0, H = 0, DPR = 1; let W = 0, H = 0, DPR = 1;
@@ -234,21 +235,26 @@
// 屏幕布局参数 // 屏幕布局参数
function layout() { function layout() {
const pad = Math.max(24, W * 0.04); const pad = Math.max(24, W * 0.04);
const panelW = Math.max(180, W * 0.18); // 右侧文字面板宽度
const panelX = W - pad - panelW; // 右侧面板左边界
const contentRight = panelX - 24; // 频谱/波形右边界
const contentW = contentRight - pad; // 频谱/波形可用宽度
const specTop = pad + 46; const specTop = pad + 46;
const specH = H * 0.40; const specH = H * 0.40;
const specBottom = specTop + specH; const specBottom = specTop + specH;
const reflectH = specH * 0.20; // 频谱倒影高度 const reflectH = specH * 0.20; // 频谱倒影高度
const waveTop = specBottom + reflectH + 30; const waveTop = specBottom + reflectH + 30;
const waveH = H * 0.14; const waveH = H * 0.14;
const statusY = H - pad * 0.5 - 34; // 底部状态栏基线 const statusTop = specTop; // 右侧状态栏顶部
return { pad, specTop, specH, specBottom, reflectH, waveTop, waveH, statusY }; const statusH = H - statusTop - pad - 60; // 状态栏高度（预留底部按钮空间）
return { pad, panelW, panelX, contentRight, contentW, specTop, specH, specBottom, reflectH, waveTop, waveH, statusTop, statusH };
} }
// 外框 + 标题（纯文字标签，营造仪器面板感） // 外框 + 标题（纯文字标签，营造仪器面板感）
function drawFrame() { function drawFrame() {
const { pad } = layout(); const { pad } = layout();
ctx.save(); ctx.save();
ctx.strokeStyle = DIM; ctx.strokeStyle = DIM_1;
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.strokeRect(pad * 0.5, pad * 0.5, W - pad, H - pad); ctx.strokeRect(pad * 0.5, pad * 0.5, W - pad, H - pad);
@@ -269,8 +275,8 @@
// 分段式频谱条（VFD 经典分段柱） // 分段式频谱条（VFD 经典分段柱）
function drawSpectrum() { function drawSpectrum() {
const { pad, specTop, specH, specBottom, reflectH } = layout(); const { pad, contentW, specTop, specH, specBottom, reflectH } = layout();
const usableW = W - pad * 2; const usableW = contentW;
const gap = usableW / BAR_COUNT * 0.22; const gap = usableW / BAR_COUNT * 0.22;
const barW = usableW / BAR_COUNT - gap; const barW = usableW / BAR_COUNT - gap;
const segGap = 2; const segGap = 2;
@@ -318,7 +324,7 @@
ctx.globalAlpha = isPeak ? 1 : 0.92; ctx.globalAlpha = isPeak ? 1 : 0.92;
} else { } else {
// 未点亮段：暗格（VFD 空段的微弱残影） // 未点亮段：暗格（VFD 空段的微弱残影）
ctx.fillStyle = DIM; ctx.fillStyle = DIM_1;
ctx.shadowBlur = 0; ctx.shadowBlur = 0;
ctx.globalAlpha = 1; ctx.globalAlpha = 1;
} }
@@ -344,17 +350,17 @@
// 底部波形（示波器式点阵） // 底部波形（示波器式点阵）
function drawWaveform() { function drawWaveform() {
const { pad, waveTop, waveH } = layout(); const { pad, contentRight, contentW, waveTop, waveH } = layout();
const usableW = W - pad * 2; const usableW = contentW;
const mid = waveTop + waveH / 2; const mid = waveTop + waveH / 2;
ctx.save(); ctx.save();
// 中线 // 中线
ctx.strokeStyle = DIM; ctx.strokeStyle = DIM_1;
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(pad, mid); ctx.moveTo(pad, mid);
ctx.lineTo(W - pad, mid); ctx.lineTo(contentRight, mid);
ctx.stroke(); ctx.stroke();
ctx.strokeStyle = GLOW; ctx.strokeStyle = GLOW;
@@ -398,7 +404,7 @@
let color = GLOW; let color = GLOW;
if (s / segs > 0.8) color = "#ff5b6b"; if (s / segs > 0.8) color = "#ff5b6b";
else if (s / segs > 0.6) color = "#ffd24a"; else if (s / segs > 0.6) color = "#ffd24a";
ctx.fillStyle = on ? color : DIM; ctx.fillStyle = on ? color : DIM_1;
ctx.shadowColor = color; ctx.shadowColor = color;
ctx.shadowBlur = on ? 10 : 0; ctx.shadowBlur = on ? 10 : 0;
ctx.fillRect(sx, y, barW / segs - 3, barH); ctx.fillRect(sx, y, barW / segs - 3, barH);
@@ -427,10 +433,9 @@
return maxI * sampleRate / analyser.fftSize; return maxI * sampleRate / analyser.fftSize;
} }
// 底部数字状态栏（时钟 / 主频 / 音符 / dB），纯文字仪表读数 // 右侧数字状态栏（时钟 / 主频 / 音符 / dB），纵向排列的纯文字仪表读数
function drawStatusBar() { function drawStatusBar() {
const { pad, statusY } = layout(); const { pad, panelX, panelW, statusTop, statusH } = layout();
const usableW = W - pad * 2;
// RMS → dB // RMS → dB
let db = -Infinity; let db = -Infinity;
@@ -457,29 +462,30 @@
]; ];
ctx.save(); ctx.save();
// 分隔线 // 左侧分隔竖线
ctx.strokeStyle = DIM; ctx.strokeStyle = DIM_1;
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(pad, statusY - 8); ctx.moveTo(panelX - 12, statusTop);
ctx.lineTo(W - pad, statusY - 8); ctx.lineTo(panelX - 12, statusTop + statusH);
ctx.stroke(); ctx.stroke();
ctx.textBaseline = "top"; ctx.textBaseline = "top";
const cellW = (usableW * 0.78) / cells.length; // 右侧留白给操作按钮 ctx.textAlign = "left";
const cellH = statusH / cells.length; // 每项纵向占位
cells.forEach((c, i) => { cells.forEach((c, i) => {
const cx = pad + i * cellW; const cy = statusTop + i * cellH;
// 标签 // 标签
ctx.font = "11px Consolas, monospace"; ctx.font = "13px Consolas, monospace";
ctx.fillStyle = DIM; ctx.fillStyle = DIM_2;
ctx.shadowBlur = 0; ctx.shadowBlur = 0;
ctx.fillText(c[0], cx, statusY); ctx.fillText(c[0], panelX, cy);
// 数值 // 数值（放大字号）
ctx.font = "600 18px Consolas, monospace"; ctx.font = "600 30px Consolas, monospace";
ctx.fillStyle = GLOW; ctx.fillStyle = GLOW;
ctx.shadowColor = GLOW; ctx.shadowColor = GLOW;
ctx.shadowBlur = 10; ctx.shadowBlur = 12;
ctx.fillText(c[1], cx, statusY + 14); ctx.fillText(c[1], panelX, cy + 18);
}); });
ctx.restore(); ctx.restore();
} }