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

Compare commits

base: frost-craft/code-snippets:914f76b0b99e0dc75843af8b3dcc655165c9354d
Branches Tags
frost-craft/code-snippets:main
..
compare: frost-craft/code-snippets:main
Branches Tags
frost-craft/code-snippets:main

5 Commits
914f76b0b9 .. main

Author SHA1 Message Date
frost-zx d5e665f349 chore(HTML): 更新 audio-visualization/2.html 2026-07-06 22:25:39 +08:00
frost-zx 5a65a4ae1f chore(HTML): 更新 audio-visualization/2.html 2026-07-05 22:44:22 +08:00
frost-zx bbf8c7a580 chore(HTML): 更新 audio-visualization/2.html 2026-07-05 21:36:30 +08:00
frost-zx d3ccadba6e chore(HTML): 更新 audio-visualization/2.html 2026-07-05 15:34:58 +08:00
frost-zx a022916e7a chore(HTML): 更新 audio-visualization 部分页面，扩展频谱高频范围 2026-07-05 14:56:46 +08:00
5 changed files with 236 additions and 60 deletions
Expand all files Collapse all files
HTML/audio-visualization/1.html
+1 -1
View File
@@ -494,7 +494,7 @@
// 模式0：频谱柱状图（居中对称 + 镜像） // 模式0：频谱柱状图（居中对称 + 镜像）
function drawSpectrum() { function drawSpectrum() {
const barCount = bufferLength / 2; const barCount = bufferLength; // 使用全部频段 bin，保留高频
const barWidth = (width * 0.8) / barCount; const barWidth = (width * 0.8) / barCount;
const gap = 2; const gap = 2;
const maxBarHeight = height * 0.35; const maxBarHeight = height * 0.35;
HTML/audio-visualization/2.html
+232 -56
View File
@@ -10,6 +10,11 @@
--vfd-glow: #38f9d7; --vfd-glow: #38f9d7;
--vfd-dim: #0a6b5c; --vfd-dim: #0a6b5c;
--vfd-bg: #030807; --vfd-bg: #030807;
/* 与 canvas layout() 中的 pad / panelW 保持一致，供右侧 HTML 面板定位 */
--pad: max(24px, 4vw);
--panelW: max(180px, 18vw);
--vfd-dim-1: rgba(56, 249, 215, 0.14);
--vfd-dim-2: rgba(56, 249, 215, 0.5);
} }
* { * {
@@ -31,8 +36,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 {
@@ -111,6 +116,93 @@
text-align: center; text-align: center;
transition: opacity .4s; transition: opacity .4s;
} }
/* 右侧数字状态面板（HTML 形式，替代原 canvas 绘制） */
#statusPanel {
position: absolute;
top: calc(var(--pad) + 46px);
right: var(--pad);
bottom: calc(var(--pad) + 60px);
width: var(--panelW);
padding-left: 14px;
border-left: 1px solid var(--vfd-dim-1);
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 10;
pointer-events: none;
color: var(--vfd-glow);
}
.stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-label {
font-size: 13px;
letter-spacing: 1px;
color: var(--vfd-dim-2);
}
.stat-value {
font-size: 30px;
font-weight: 600;
line-height: 1;
color: var(--vfd-glow);
text-shadow: 0 0 12px var(--vfd-glow);
}
/* NOTE 音名 / 八度网格 */
.note-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px 2px;
margin-top: 4px;
}
.oct-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 2px;
margin-top: 6px;
}
.note-cell,
.oct-cell {
font-size: 18px;
font-weight: 600;
color: var(--vfd-dim-1);
transition: color .1s, text-shadow .1s;
}
.note-cell.active,
.oct-cell.active {
color: var(--vfd-glow);
text-shadow: 0 0 14px var(--vfd-glow);
}
/* FFT 数值可用鼠标滚轮调整：需重新开启指针事件并给出可交互提示 */
#stFft {
pointer-events: auto;
cursor: ns-resize;
user-select: none;
}
/* 悬浮时以 1s 为周期循环闪烁，提示该数值可交互 */
#stFft:hover {
animation: fftBlink 1s ease-in-out infinite;
}
@keyframes fftBlink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
</style> </style>
</head> </head>
<body> <body>
@@ -118,6 +210,31 @@
<canvas id="vfd"></canvas> <canvas id="vfd"></canvas>
<div id="scanlines"></div> <div id="scanlines"></div>
<div id="hint">按下 MIC 授权麦克风以开始</div> <div id="hint">按下 MIC 授权麦克风以开始</div>
<!-- 右侧数字状态面板（HTML） -->
<div id="statusPanel">
<div class="stat">
<span class="stat-label">TIME</span>
<span class="stat-value" id="stTime">--:--:--</span>
</div>
<div class="stat">
<span class="stat-label">PEAK (Hz)</span>
<span class="stat-value" id="stPeak">---</span>
</div>
<div class="stat">
<span class="stat-label">NOTE</span>
<div class="note-grid" id="stNoteGrid"></div>
<span class="stat-label" style="margin-top:8px">OCT</span>
<div class="oct-grid" id="stOctGrid"></div>
</div>
<div class="stat">
<span class="stat-label">LEVEL (dB)</span>
<span class="stat-value" id="stLevel">-inf</span>
</div>
<div class="stat">
<span class="stat-label">FFT</span>
<span class="stat-value" id="stFft">----</span>
</div>
</div>
<div id="controls"> <div id="controls">
<button class="btn" id="micBtn">MIC</button> <button class="btn" id="micBtn">MIC</button>
<button class="btn" id="fsBtn">FULL SCREEN</button> <button class="btn" id="fsBtn">FULL SCREEN</button>
@@ -134,9 +251,18 @@
const fsBtn = document.getElementById("fsBtn"); const fsBtn = document.getElementById("fsBtn");
const hint = document.getElementById("hint"); const hint = document.getElementById("hint");
// 右侧状态面板 HTML 元素
const elTime = document.getElementById("stTime");
const elPeak = document.getElementById("stPeak");
const elLevel = document.getElementById("stLevel");
const elFft = document.getElementById("stFft");
const elNoteGrid = document.getElementById("stNoteGrid");
const elOctGrid = document.getElementById("stOctGrid");
// 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;
@@ -153,9 +279,14 @@
// ---------- 音频 ---------- // ---------- 音频 ----------
let audioCtx = null, analyser = null, freqData = null, timeData = null; let audioCtx = null, analyser = null, freqData = null, timeData = null;
let micStream = null; // 保存麦克风流以便关闭时停止音轨
let running = false; let running = false;
let sampleRate = 44100; // 采样率，用于频率/音符换算 let sampleRate = 44100; // 采样率，用于频率/音符换算
// 当前 FFT 大小（可用鼠标滚轮在 FFT 数值上调整），128 ~ 8192 之间的 2 的幂
const FFT_MIN = 128, FFT_MAX = 8192;
let fftSize = 512; // 影响音符识别，值为 4096 时效果较好
async function initMic() { async function initMic() {
if (running) return; if (running) return;
try { try {
@@ -163,7 +294,7 @@
audioCtx = new (window.AudioContext || window.webkitAudioContext)(); audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const src = audioCtx.createMediaStreamSource(stream); const src = audioCtx.createMediaStreamSource(stream);
analyser = audioCtx.createAnalyser(); analyser = audioCtx.createAnalyser();
analyser.fftSize = 512; analyser.fftSize = fftSize;
analyser.smoothingTimeConstant = 0.8; analyser.smoothingTimeConstant = 0.8;
analyser.minDecibels = -85; // 拓宽动态范围，避免频谱条轻易撑满 analyser.minDecibels = -85; // 拓宽动态范围，避免频谱条轻易撑满
analyser.maxDecibels = -10; analyser.maxDecibels = -10;
@@ -171,6 +302,7 @@
sampleRate = audioCtx.sampleRate; sampleRate = audioCtx.sampleRate;
freqData = new Uint8Array(analyser.frequencyBinCount); freqData = new Uint8Array(analyser.frequencyBinCount);
timeData = new Uint8Array(analyser.fftSize); timeData = new Uint8Array(analyser.fftSize);
micStream = stream;
running = true; running = true;
micBtn.classList.add("active"); micBtn.classList.add("active");
hint.style.opacity = "0"; hint.style.opacity = "0";
@@ -180,7 +312,50 @@
} }
} }
micBtn.addEventListener("click", initMic); // 关闭麦克风：停止音轨、释放音频上下文并复位状态
function stopMic() {
if (!running) return;
if (micStream) {
micStream.getTracks().forEach(t => t.stop());
micStream = null;
}
if (audioCtx) {
audioCtx.close();
audioCtx = null;
}
analyser = null;
running = false;
micBtn.classList.remove("active");
hint.textContent = "按下 MIC 授权麦克风以开始";
hint.style.opacity = "1";
}
// 点击 MIC：在开启 / 关闭之间切换
micBtn.addEventListener("click", () => {
if (running) stopMic();
else initMic();
});
// 应用新的 FFT 大小：限制在 [128, 8192] 的 2 的幂之间，运行中则实时生效
function applyFftSize(next) {
next = Math.min(FFT_MAX, Math.max(FFT_MIN, next));
if (next === fftSize) return;
fftSize = next;
if (running && analyser) {
analyser.fftSize = fftSize;
// fftSize 变化后需重建数据缓冲区与频段索引
freqData = new Uint8Array(analyser.frequencyBinCount);
timeData = new Uint8Array(analyser.fftSize);
bands = null;
}
elFft.textContent = fftSize + "";
}
// 鼠标在 FFT 数值上滚动：向上放大 1 倍，向下缩小 1/2
elFft.addEventListener("wheel", (e) => {
e.preventDefault();
applyFftSize(e.deltaY < 0 ? fftSize * 2 : fftSize / 2);
}, { passive: false });
// ---------- 全屏 ---------- // ---------- 全屏 ----------
fsBtn.addEventListener("click", () => { fsBtn.addEventListener("click", () => {
@@ -204,7 +379,7 @@
// 对数分布采样索引，低频更细腻 // 对数分布采样索引，低频更细腻
function buildBands(bins) { function buildBands(bins) {
const bands = []; const bands = [];
const minF = 2, maxF = bins * 0.72; const minF = 2, maxF = bins; // 覆盖全部 bin，保留高频
for (let i = 0; i <= BAR_COUNT; i++) { for (let i = 0; i <= BAR_COUNT; i++) {
const t = i / BAR_COUNT; const t = i / BAR_COUNT;
bands.push(Math.floor(minF * Math.pow(maxF / minF, t))); bands.push(Math.floor(minF * Math.pow(maxF / minF, t)));
@@ -228,27 +403,32 @@
drawSpectrum(); drawSpectrum();
drawWaveform(); drawWaveform();
drawLevelMeter(); drawLevelMeter();
drawStatusBar(); updateStatusPanel();
} }
// 屏幕布局参数 // 屏幕布局参数
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 +449,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 +498,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 +524,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 +578,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,11 +607,27 @@
return maxI * sampleRate / analyser.fftSize; return maxI * sampleRate / analyser.fftSize;
} }
// 底部数字状态栏（时钟 / 主频 / 音符 / dB），纯文字仪表读数 // 可显示的八度范围
function drawStatusBar() { const OCTAVES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
const { pad, statusY } = layout();
const usableW = W - pad * 2;
// 初始化 NOTE / OCT 网格单元（一次性创建，之后仅切换 active 类）
const noteCells = NOTE_NAMES.map(name => {
const el = document.createElement("span");
el.className = "note-cell";
el.textContent = name;
elNoteGrid.appendChild(el);
return el;
});
const octCells = OCTAVES.map(o => {
const el = document.createElement("span");
el.className = "oct-cell";
el.textContent = o;
elOctGrid.appendChild(el);
return el;
});
// 更新右侧 HTML 状态面板（时钟 / 主频 / 音符 / dB / FFT）
function updateStatusPanel() {
// RMS → dB // RMS → dB
let db = -Infinity; let db = -Infinity;
if (running) { if (running) {
@@ -445,43 +641,23 @@
} }
const f = dominantFreq(); const f = dominantFreq();
const now = new Date();
const clock = now.toTimeString().slice(0, 8);
const cells = [ // 当前主频对应的半音索引（0-11）与八度，无信号时为 -1
["TIME", clock], let activeNote = -1, activeOctave = -99;
["PEAK", f > 0 ? f.toFixed(0) + " Hz" : "--- Hz"], if (running && f > 0) {
["NOTE", running ? freqToNote(f) : "--"], const nn = Math.round(12 * Math.log2(f / 440) + 69);
["LEVEL", isFinite(db) ? db.toFixed(1) + " dB" : "-inf dB"], activeNote = ((nn % 12) + 12) % 12;
["FFT", running ? analyser.fftSize + "" : "----"] activeOctave = Math.floor(nn / 12) - 1;
]; }
ctx.save(); elTime.textContent = new Date().toTimeString().slice(0, 8);
// 分隔线 elPeak.textContent = f > 0 ? f.toFixed(0) : "---";
ctx.strokeStyle = DIM; elLevel.textContent = isFinite(db) ? db.toFixed(1) : "-inf";
ctx.lineWidth = 1; elFft.textContent = fftSize + "";
ctx.beginPath();
ctx.moveTo(pad, statusY - 8);
ctx.lineTo(W - pad, statusY - 8);
ctx.stroke();
ctx.textBaseline = "top"; // 高亮当前音符与八度
const cellW = (usableW * 0.78) / cells.length; // 右侧留白给操作按钮 noteCells.forEach((el, i) => el.classList.toggle("active", i === activeNote));
cells.forEach((c, i) => { octCells.forEach((el, i) => el.classList.toggle("active", OCTAVES[i] === activeOctave));
const cx = pad + i * cellW;
// 标签
ctx.font = "11px Consolas, monospace";
ctx.fillStyle = DIM;
ctx.shadowBlur = 0;
ctx.fillText(c[0], cx, statusY);
// 数值
ctx.font = "600 18px Consolas, monospace";
ctx.fillStyle = GLOW;
ctx.shadowColor = GLOW;
ctx.shadowBlur = 10;
ctx.fillText(c[1], cx, statusY + 14);
});
ctx.restore();
} }
draw(); draw();
HTML/audio-visualization/5.html
+1 -1
View File
@@ -895,7 +895,7 @@ function drawFreqBars(high) {
const gap = W / barCount * 0.4; const gap = W / barCount * 0.4;
for (let i = 0; i < barCount; i++) { for (let i = 0; i < barCount; i++) {
const freqIdx = Math.floor(i / barCount * (freqData.length * 0.6)); const freqIdx = Math.floor(i / barCount * (freqData.length - 1)); // 覆盖全部频段，保留高频
const val = freqData[freqIdx] / 255; const val = freqData[freqIdx] / 255;
const barH = val * H * 0.35; const barH = val * H * 0.35;
const x = i * (barWidth + gap) + gap * 0.5; const x = i * (barWidth + gap) + gap * 0.5;
HTML/audio-visualization/6.html
+1 -1
View File
@@ -311,7 +311,7 @@
function drawSpectrum(x, y, w, h) { function drawSpectrum(x, y, w, h) {
ctx.save(); ctx.save();
const bars = 64; const bars = 64;
const step = Math.floor(freqData.length / 2 / bars); const step = Math.floor(freqData.length / bars); // 覆盖全部 bin，保留高频
const bw = w / bars; const bw = w / bars;
if (peakHold.length !== bars) peakHold = new Array(bars).fill(0); if (peakHold.length !== bars) peakHold = new Array(bars).fill(0);
HTML/audio-visualization/7.html
+1 -1
View File
@@ -360,7 +360,7 @@ function drawGrid(time) {
function drawSkyline() { function drawSkyline() {
if (!freqArray) return; if (!freqArray) return;
const binCount = analyser.frequencyBinCount; const binCount = analyser.frequencyBinCount;
const usable = Math.floor(binCount * 0.6); const usable = binCount; // 覆盖全部频段，保留高频
const barCount = 80; const barCount = 80;
const barW = W / barCount; const barW = W / barCount;
const baseY = H * 0.9; const baseY = H * 0.9;