@linxai/music-visualization-shared

跨平台共享的音乐可视化组件 - 支持 Web 和 React Native

特性

• ✅ 完全跨平台 - 相同代码运行在 Web 和 RN
• ✅ 基于 R3F - 使用 @react-three/fiber 统一 API
• ✅ 多种效果 - 圆形频谱、几何场景、频谱柱状图等
• ✅ TypeScript - 完整类型定义
• ✅ 音频联动 - 9 种音频特征智能联动

组件

CircularSpectrum ⭐ 推荐

圆形放射频谱 - 专业音乐均衡器风格（2D 平面效果）

import { CircularSpectrum } from '@linxai/music-visualization-shared'

<CircularSpectrum 
  audioFeatures={features}
  barCount={128}      // 柱子数量 (32-256)
  sensitivity={1.5}   // 灵敏度 (0-2)
  innerRadius={1.0}   // 内圈半径 (0.5-2.0)
/>

Props

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | audioFeatures | AudioFeatures | 必填 | 音频特征数据 | | barCount | number | 128 | 柱子数量 (32-256) | | sensitivity | number | 1 | 灵敏度 (0-2) | | innerRadius | number | 1.0 | 内圈半径 (0.5-2.0) |

🎵 音频特征联动

| # | 联动 | 特征 | 效果 | |---|------|------|------| | 1 | 内圈呼吸 | amplitude | 圆圈随整体响度轻微缩放 | | 2 | 颜色旋转速度 | bpm | BPM 高时彩虹转得更快 | | 3 | 柱子高度 | spectrum[64] | 交错循环映射 + 相邻频段平滑混合 | | 4 | 节拍弹跳 | beat_strength | 节拍时所有柱子一起跳 | | 5 | 低频加成 | bass | 低频段 (0-15) 柱子额外加高 | | 6 | 中频加成 | mid | 中频段 (16-47) 柱子加高 + 颜色饱和度 | | 7 | 高频加成 | high | 高频段 (48-63) 柱子加高 + 整体变亮 | | 8 | 饱和度变化 | mid | 中频强时颜色更鲜艳 | | 9 | 内圈发光 | bass + beat | 低音鼓点时内圈紫色脉冲 |

频谱映射策略

• 交错循环：64 频段循环 2 次映射到整圆，每 180° 都有完整的低→高频谱
• 平滑混合：smoothValue = prev×0.2 + current×0.6 + next×0.2
• 按频段加成：根据实际频谱索引（而非位置）分配 bass/mid/high 加成

视觉效果

• 鼓点/低音 → 低频段柱子加高 + 内圈紫色闪烁
• 人声/乐器 → 中频段柱子加高 + 颜色更鲜艳
• 高音/打击 → 高频段柱子跳动 + 整体变亮
• 节奏 → 彩虹旋转速度与 BPM 同步

GeometricScene

几何形状可视化场景

import { GeometricScene } from '@linxai/music-visualization-shared'

<GeometricScene 
  audioFeatures={features}
  sensitivity={1.5}
/>

SpectrumBars

频谱柱状图

import { SpectrumBars } from '@linxai/music-visualization-shared'

<SpectrumBars 
  audioFeatures={features}
  barCount={32}
  sensitivity={1.0}
/>

类型

interface AudioFeatures {
  amplitude: number      // 整体振幅 (0-1)
  bass: number          // 低频能量 20-250 Hz (0-1)
  mid: number           // 中频能量 250-2000 Hz (0-1)
  high: number          // 高频能量 2000-20000 Hz (0-1)
  beat_strength: number // 节拍强度 (0-1)
  bpm: number           // 估算 BPM (60-180)
  spectrum: number[]    // 64 频段详细数据 (0-1)
}

频段说明

| 频段 | 频率范围 | 典型乐器 | 建议联动 | |------|----------|----------|----------| | bass | 20-250 Hz | 低音鼓、贝斯 | 背景脉冲、震动、内圈发光 | | mid | 250-2000 Hz | 人声、吉他、钢琴 | 颜色饱和度、整体亮度 | | high | 2000-20000 Hz | 镲片、铃声、高音 | 闪烁、高光、尖锐动画 |

这些频段由 Rust 核心算法计算，与采样率无关（使用真实频率映射）。

设计参考

CircularSpectrum 参考了专业音乐均衡器 App 的设计风格：

• 2D 平面效果（PlaneGeometry）
• 彩虹渐变色（按角度分配：紫→粉→红→橙→黄→绿→青→蓝）
• 对称映射（左右频谱镜像）
• 黑色圆形背景
• 静止时随机高度（有视觉感）