MusicVisualizer.js

一个轻量级、高性能的音乐可视化 JavaScript 库，可以轻松地将音频输入转换为美观的视觉效果。

特性

• 多种可视化模式：波形、频谱和粒子
• 支持多种音频输入源：麦克风、音频文件和 HTML 音频元素
• 高度可定制的参数系统
• 节拍检测算法
• 音频效果处理（混响）
• 响应式设计，自适应容器大小

安装

直接引入

<script src="dist/music-visualizer.js"></script>

基本用法

1. 创建一个容器元素：

<div id="visualizer-container" style="width: 100%; height: 500px;"></div>

2. 初始化可视化器：

const visualizer = new MusicVisualizer({
  container: "visualizer-container",
  params: {
    mode: "wave", // 可视化模式：'wave', 'spectrum', 'particles'
    sensitivity: 1.5, // 灵敏度
    waveDensity: 8, // 波形密度
    particleCount: 800, // 粒子数量
    hue: 180, // 色相值
    beatThreshold: 1.3, // 节拍检测阈值
  },
});

3. 使用音频源：

// 使用麦克风
await visualizer.useMicrophone();

// 或使用音频文件
await visualizer.useAudioFile(fileObject);

// 或使用音频元素
const audioElement = document.getElementById("audio");
visualizer.useAudioElement(audioElement);

API 参考

构造函数

new MusicVisualizer(options);

选项

• container: 容器元素的 ID（字符串）
• params: 可视化参数对象
  • mode: 可视化模式 ('wave', 'spectrum', 'particles')
  • sensitivity: 灵敏度 (1.0-5.0)
  • waveDensity: 波形密度 (1-20)
  • particleCount: 粒子数量 (100-2000)
  • hue: 色相值 (0-360)
  • beatThreshold: 节拍检测阈值 (1.0-2.0)

方法

音频源控制

• async useMicrophone(): 使用麦克风作为输入源
• async useAudioFile(file): 使用音频文件作为输入源
• useAudioElement(element): 使用 HTML 音频元素作为输入源
• stop(): 停止可视化

参数控制

• setParameter(param, value): 设置单个参数
• getParameters(): 获取当前所有参数

示例

查看 examples 目录中的示例文件，了解更多使用方法。

浏览器兼容性

支持所有现代浏览器，包括：

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

许可证

MIT