使用 Three.JS 制作音乐可视化工具

为了学习 THREE.js（3D 渲染 WebGL 框架和 WebAudio API），我做了一个非常简单的可视化音乐的程序。这篇文章记录了整个过程。
最后说一句：

（只需使用 .mp3 / .mp4 / .wav 文件即可查看效果。如果您不在，可以使用这个）
WebAudio API 入门指南
HTML5 的标签与 WebAudio API 结合使用时，功能非常强大。它是一个动态工具，可让您动态处理任何类型的音频并为其添加音频效果。

Web Audio API 涉及在音频上下文中处理音频操作，并设计为支持模块化路由。基本音频操作通过音频节点执行，这些音频节点链接在一起形成音频路由图。即使在单个上下文中，也支持多个具有不同通道布局的源。这种模块化设计提供了创建具有动态效果的复杂音频函数的灵活性。

音频管道首先创建一个音频上下文。它应该至少包含一个音频源——可以将其视为外部文件、麦克风输入、振荡器等的入口点。一旦我们创建了音频源，信号就会通过音频节点在管道中处理并向前移动。处理完成后，信号会被路由到音频目标，而在整个音频上下文中，音频目标只能是一个。

模块化路由

为了学习 THREE.js（3D 渲染 WebGL 框架和 WebAudio API），我做了一个非常简单的可视化音乐的程序。这篇文章记录了整个过程。
最后说一句：

（只需使用 .mp3 / .mp4 / .wav 文件即可查看其工作情况。如果您外出，可以使用这个）

WebAudio API 入门：
HTML5 的标签与 WebAudio API 结合使用时，功能非常强大。它是一个动态工具，可让您动态处理任何类型的音频并为其添加音频效果。

模块化路由

最简单的例子是，上下文中只有一个源和一个目标，没有任何效果或处理。为什么有人会用这个？也许他们只是想直接播放原汁原味的声音。

左边是一个更复杂的设置的示例，也可以使用此 API 来完成。

让我们从可视化工具中看一下相关代码：

关于 WebAudio API，我们在本项目中使用它的唯一目的是提取音频信号的属性，并利用这些属性来更新视觉效果。如果您查看上面的代码，就会发现它analyser node帮助我们实时分析这些音乐属性。由于它不会干扰信号，也不会以任何方式改变信号，因此它对我们来说是一个完美的接口。

此接口（分析器节点接口）表示一个能够提供实时频率和时域分析信息的节点。音频流将未经处理地从输入传输到输出。

这个可视化工具的核心理念是根据节拍特征调节球体的大小，并根据人声改变球体的表面。为了增加趣味性，我使用了一些程序化噪声，利用音频数据作为输入，为球体添加了物理纹理。

FFT 大小的默认值为 2048，但我们选择了较低的 512 分辨率，因为它更容易计算——考虑到我使用的非常原始的节拍检测方法不需要非常高的分辨率，此外还会有实时 3D 更新的额外计算，所以我们可以安全地继续使用这个值。

最简单的例子是，上下文中只有一个源和一个目标，没有任何效果或处理。为什么有人会用这个？也许他们只是想直接播放原汁原味的声音。