解析原理 (src/lib/lrc.ts)#

核心函数 parseLRC 的解析流程：

1. 逐行匹配时间标签：用正则 \[(\d{1,2}):(\d{1,2})(?:[.:](\d{1,3}))?\] 提取分钟、秒、毫秒，统一换算为秒。兼容 [mm:ss.xx] 和 [mm:ss:xx] 两种毫秒分隔符，毫秒支持 1~3 位。

2. 多时间标签拆分：如果一行有多个时间标签（比如重复段落），每个标签独立生成一条记录。忽略 [ti:]、[ar:] 等元数据行。

3. 双语合并：解析后按时间排序，时间差 < 50ms 的相邻行自动合并为一个 LyricLine，texts 数组存 [原文, 译文?]，用于中日/中英双语歌词。

4. 间距判定：currentLyric 函数根据播放进度查找当前行。关键设计在于间奏/尾奏阈值 GAP = 7 秒——如果当前行与下一行的间隔超过 7 秒，当前行只显示 7 秒后就返回 null，气泡收起，交给桌宠自身的音符特效。前奏（播放时间早于第一句标签）也返回 null。

1
// lrc.ts 核心逻辑
2
export function currentLyric(lyrics: LyricLine[], t: number): LyricLine | null {
3
  // ...二分查找当前行
4
  const showDur = next ? next.time - cur.time : Infinity
5
  if (showDur <= GAP) return cur                        // 正常换行
6
  return t - cur.time < GAP ? cur : null                // 间奏/尾奏：7秒后切 null
7
}

这样设计的好处是：使用固定的阈值而不是动态获取间奏数据，前端不需要预判”间奏”元数据，完全从歌词时间间隔自动推断，纯音乐（无 LRC 文件）也能正确处理。

原本是五秒，但是我以《Morning Dew》为参照，发现里面有一句巨长的单句Oh~Letting me go…长达7秒钟，为了让老普能够唱完才改成7秒的。其实可以拆成两句歌词，继续沿用5秒的设定，但是我比较懒。

数据管线#

这是AI画的。其实就是相比普通的音频可视化加了个已有高度的音柱能够“带动”附近的音柱涨落的效果，因为一圈的音频可视化会导致音高的地方塌陷下去，一整首歌甚至都看不到它起来，所以想了个法子：音高系数补偿和“先动带动后动”，带动涨落机制给予的是虚拟的音高信号，不会左脚踩右脚。

1
Audio Element → MediaElementSource → AnalyserNode (fftSize=256, smoothing=0.8)
2
                                            │
3
                                    128 字节频域数据
4
                                            │
5
                              downsampleWithEQ (128→80 bin)
6
                                            │
7
                          smoothedData (lerp 平滑因子 0.4/0.06)
8
                                            │
9
                              neighborBoost (相邻带动 15%)
10
                                            │
11
                               Canvas 极坐标绘制 80 根音柱

三个处理#

降采样 + EQ 补偿：原始 128 bin 中低频 bin 集中了大量能量，高频 bin 能量偏低。直接降采样会让高频段”看不见”。解决方案是按频率位置做线性补偿——低频 bin 不做放大（1.0x），最高频 bin 做 2.2x 放大：

1
out[i] = Math.min(1, avg * (1.0 + (i / (count - 1)) * 1.2))

相邻带动：每根音柱将 15% 能量传给左右邻居（仅抬升、不拉低）。这让频谱看起来更连续、更有”流体感”，而不是 80 根孤立的柱子各跳各的。

双主题颜色（亮色/暗色自动适配）：

1
亮色：深蓝(230°) → 亮青(180°)，饱和度 35%→85%，明度 22%→67%
2
暗色：暖橙金(42°)，低音纯白 → 高音淡橙金，透明度 50%→100%

这确保了频谱在深空背景上醒目、在浅色背景上同样可见。

平滑策略：播放时 lerp 因子 0.4（跟得紧），停止时 0.06（快速归零）。如果所有音柱均 < 2% 且不在播放，则停掉 requestAnimationFrame 循环，不留空转。

3.1 唱歌状态机 (usePetSinging.ts)#

当 hasSignal（来自 useAudioAnalyzer，每 250ms 轮询一次是否有 >0 的频谱数据）首次变 true 时，触发 startSinging()：

1. 关闭所有日常计时器：眨眼、移动、闲置、睡眠、点击……所有干扰源全部关停。
2. 锁定唱歌帧：桌宠有 4 张唱歌 PNG 帧（singing-1 ~ singing-4），按概率状态机在它们之间切换——每 700ms~3000ms 随机跳转到下一帧，带 sway/bounce 动作动画。
3. 音符粒子：每次帧切换时 spawn 3 个音符符号（♪ ♫ ♩ ♬），从桌宠区域飘出并在 2.5s 后消失。

播放停止后，状态机会切回 singing-1 帧等待 musicStopped flag，最终退出并恢复日常行为。

3.2 歌词气泡 (usePetLyrics.ts)#

桌宠的 SpeechBubble 组件在唱歌模式下由歌词驱动：

• 开场 3 秒：显示音符气泡 ♫ ♪，然后自动收起（避免与桌宠自身音符重复）。
• 有歌词时段：调用 currentLyric(lyrics, store.currentTime) 获取当前行，气泡显示原文 + 译文。
• 间奏/尾奏/纯音乐：currentLyric 返回 null，气泡收起，桌宠自身音符特效继续工作。
• 换歌：监听 currentSong.filename，重新拉取新歌的 LRC 文件并解析。加载期间换歌则丢弃旧结果。

1
// 唱歌开始/换歌 → 加载歌词
2
watch(() => [state.singingState.value, store.currentSong?.filename], ([singing, fname]) => {
3
  if (singing && fname && fname !== loadedFor) load(store.currentSong)
4
})
5
// 播放进度 → 更新气泡
6
watch(() => store.currentTime, update)

4.1 暗色主题：银河星空 (GalaxyBackground.vue)#

这两个背景（MagicRings和Galaxy）是从Vue Bits上面copy下来的，对本地化做了一些处理（主要改了一些过渡、背景渐变），在暗色主题下，背景是Galaxy组件。它接收 4 个动态 prop，通过 hasSignal 在有音频信号时改变：

这些值通过 computed 响应式计算，Galaxy 组件内部逐帧 lerp 平滑过渡。整体成本为每帧几个 float 的插值计算，不涉及逐帧 FFT，性能开销极低。手机端直接跳过 WebGL，只留 CSS 深空渐变底。

4.2 亮色主题：法环 (MagicRings.vue)#

亮色主题下，THREE.js 的 ShaderMaterial 渲染 5 圈旋转的渐变魔法环。同样受音频信号驱动：

1
hasSignal=true  →  ringsSpeed 0.7→1.0   ringBaseRadius 0.18→0.35
2
hasSignal=false →  回落默认值

变化通过 requestAnimationFrame 做 0.05 因子的 lerp 平滑，而非突变。

4.3 双主题背景切换#

1
亮色主题：BackgroundLayer（网格 + 流光斜扫 + 魔法环）
2
暗色主题：GalaxyBackground（深空渐变 + WebGL 星空）

切换由 theme store 管理，支持 View Transitions API 的圆形扩散动画。AudioVisualizer 的音柱颜色也根据 theme.isDark 在深蓝/暖金两套色板间自动切换。