傅里叶变换音频可视化_Web Audio在音频可视化中的应用

Web Audio在音频可视化中的应用

本文有两个关键词：音频可视化和Web Audio。前者是实践，后者是其背后的技术支持。 Web Audio 是很大的知识点，本文会将重点放在如何获取音频数据这块，对于其 API 的更多内容，可以查看 MDN。

另外，要将音频数据转换成可视化图形，除了了解 Web Audio 之外，还需要对 Canvas (特指2D，下同)，甚至 WebGL (可选)有一定了解。如果读者对它们没有任何学习基础，可以先从以下资源入手：

什么是音频可视化通过获取频率、波形和其他来自声源的数据，将其转换成图形或图像在屏幕上显示出来，再进行交互处理。

云音乐有不少跟音频动效相关的案例，但其中有些过于复杂，又或者太偏业务。因此这里就现找了两个相对简单，但有代表性的例子。

第一个是用 Canvas 实现的音频柱形图。

第二个是用 WebGL 实现的粒子效果。

在具体实践中，除了这些基本图形(矩形、圆形等)的变换，还可以把音频和自然运动、3D 图形结合到一起。

什么是 Web AudioWeb Audio 是 Web 端处理和分析音频的一套 API 。它可以设置不同的音频来源(包括节点、 ArrayBuffer 、用户设备等)，对音频添加音效，生成可视化图形等。

接下来重点介绍 Web Audio 在可视化中扮演的角色，见下图。

简单来说，就是取数据 + 映射数据两个过程。我们先把“取数据”这个问题解决，可以按以下5步操作。

1. 创建 AudioContext

在音频的任何操作之前，都必须先创建 AudioContext 。它的作用是关联音频输入，对音频进行解码、控制音频的播放暂停等基础操作。

创建方式如下：

const AudioContext = window.AudioContext || window.webkitAudioContext;

const ctx = new AudioContext();

2. 创建 AnalyserNode

AnalyserNode 用于获取音频的频率数据( FrequencyData )和时域数据( TimeDomainData )。从而实现音频的可视化。

它只会对音频进行读取，而不会对音频进行任何改变。

const analyser = ctx.createAnalyser();

analyser.fftSize = 512;

关于 fftSize ，在 MDN 上的介绍可能很难理解，说是快速傅里叶变换的一个参数。

可以从以下角度理解：

1. 它的取值是什么？

fftSize 的要求是 2 的幂次方，比如 256 、 512 等。数字越大，得到的结果越精细。

对于移动端网页来说，本身音频的比特率大多是 128Kbps ，没有必要用太大的频率数组去存储本身就不够精细的源数据。另外，手机屏幕的尺寸比桌面端小，因此最终展示图形也不需要每个频率都采到。只需要体现节奏即可，因此 512 是较为合理的值。

2. 它的作用是什么？

fft