open-index/open-npm huggingface dataset:
npm package: @linxai/music-visualization-native
Description: 音乐可视化 React Native 组件 - 基于 Rust Native
Latest version: 0.1.5

# @linxai/music-visualization-native

React Native 端音乐可视化组件 - 基于 Rust 原生模块

## 安装

```bash
npm install @linxai/music-visualization-native three @react-three/fiber expo-gl
```

## 使用

```tsx
import { AudioVisualizer } from '@linxai/music-visualization-native'
import { View, StyleSheet } from 'react-native'

function App() {
  return (
    <View style={styles.container}>
      <AudioVisualizer 
        type="spectrum-bars"
        sensitivity={1.5}
        style={styles.visualizer}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  visualizer: { flex: 1 },
})
```

## 原生模块设置

### Android

1. 构建 Rust 库：
```bash
pnpm --filter @linxai/music-visualization-core build:android
```

2. 复制 .so 到项目：
```bash
cp -r packages/core/android/jniLibs packages/native/android/
```

3. 在 `android/settings.gradle` 添加：
```gradle
include ':linxai-native'
project(':linxai-native').projectDir = new File(rootProject.projectDir, '../node_modules/@linxai/music-visualization-native/android')
```

4. 在 `android/app/build.gradle` 添加：
```gradle
dependencies {
    implementation project(':linxai-native')
}
```

### iOS

暂不支持，优先实现 Android。

## API

与 `@linxai/music-visualization-web` 完全一致的 API

### AudioVisualizer

| Prop | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `type` | `'geometric' \| 'spectrum-bars'` | `'geometric'` | 可视化类型 |
| `sensitivity` | `number` | `1` | 灵敏度 (0-2) |
| `style` | `ViewStyle` | - | 容器样式 |

## 性能

- 使用 Rust 原生模块进行 FFT 计算
- 60 FPS 流畅渲染
- 低内存占用
npm package: @linxai/music-visualization-shared
Description: 音乐可视化共享组件 - Web & React Native 通用
Latest version: 0.1.2

# @linxai/music-visualization-shared

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

## 特性

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

## 组件

### CircularSpectrum ⭐ 推荐

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

```tsx
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

几何形状可视化场景

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

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

### SpectrumBars

频谱柱状图

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

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

## 类型

```typescript
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）
- 彩虹渐变色（按角度分配：紫→粉→红→橙→黄→绿→青→蓝）
- 对称映射（左右频谱镜像）
- 黑色圆形背景
- 静止时随机高度（有视觉感）