本文有两个关键词:音频可视化和Web Audio。前者是实践,后者是其背后的技术支持。 Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块,对于其 API 的更多内容,可以查看 MDN。
另外,要将音频数据转换成可视化图形,除了了解 Web Audio 之外,还需要对 Canvas (特指2D,下同),甚至 WebGL (可选)有一定了解。如果读者对它们没有任何学习基础,可以先从以下资源入手:
什么是音频可视化
通过获取频率、波形和其他来自声源的数据,将其转换成图形或图像在屏幕上显示出来,再进行交互处理。
云音乐有不少跟音频动效相关的案例,但其中有些过于复杂,又或者太偏业务。因此这里就现找了两个相对简单,但有代表性的例子。
第一个是用 Canvas 实现的音频柱形图。
第二个是用 WebGL 实现的粒子效果。
在具体实践中,除了这些基本图形(矩形、圆形等)的变换,还可以把音频和自然运动、3D 图形结合到一起。
什么是 Web Audio
Web 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. 它的作用是什么?
fftS