摘要音乐干听多没劲，来点可视化效果让音乐“动”起来！底部源码分享！

正文

说明

在浏览器端 AudioContext 是一个专门用于音频处理的接口，工作原理是将 AudioContext 创建出来的各种节点相互连接，音频数据流经这些节点,我们对其控制。

如何播放

先初始化环境。

1. let AudioContext = window.AudioContext;

2. let audioContext = new AudioContext();

通过 audioContext 我们可以创建资源节点，资源节点接受音频数据后，连接至扬声器完成播放，如下示意图与代码。

1. let audioBufferSourceNode = audioContext.createBufferSource();

2. audioBufferSourceNode.buffer = 音频数据AudioBuffer;

3. audioBufferSourceNode.connect(audioContext.destination);

4. audioBufferSourceNode.start(0);

AudioBuffer的获取

流程我们了解到了，如何取到 AudioBuffer 呢？一般的做法是通过 FileReader 来读取到 File 类型，转为 ArrayBuffer 类型，最后再转 AudioBuffer 类型。有没有更方便的做法呢？当然有了！白嫖啊！我们打印引擎封装好的 cc.AudioClip 资源,可以清晰的看到 _audio 就是我们想要的 AudioBuffer 类型，完美！

数据处理

好了，万事俱备，就差如何分析音频数据了。我们知道现在资源节点是直接连接到扬声器的，那么我们只要在两者之间插入一个分析器就好了！上图，上代码！（底部有完整项目的开源地址）

1. let AudioContext = window.AudioContext;

2. // audioContext 只相当于一个容器。

3. let audioContext = new AudioContext();

4. // 要让 audioContext 真正丰富起来需要将实际的音乐信息传递给它的。

5. // 也就是将 AudioBuffer 数据传递进去。

6. // 以下就是创建音频资源节点管理者。

7. this.audioBufferSourceNode = audioContext.createBufferSource();

8. // 将 AudioBuffer 传递进去。

9. this.audioBufferSourceNode.buffer = this.music._audio;

10. // 创建分析器。

11. this.analyser = audioContext.createAnalyser();

12. // 精度设置

13. this.analyser.fftSize = 256;

14. // 在传到扬声器之前，连接到分析器。

15. this.audioBufferSourceNode.connect(this.analyser);

16. // 连接到扬声器。

17. this.analyser.connect(audioContext.destination);

18. // 开始播放

19. this.audioBufferSourceNode.start(0);

如何显示

分析器已经连接完毕，那么我们其实想取数据的时候去取一下就行了。

1. // 建立数据准备接受数据

2. this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);

3. // 分析结果存入数组。

4. this.analyser.getByteFrequencyData(this.dataArray);

5. // 自定义方法处理数据

6. this.draw(this.dataArray);

结语

是不是有收获呢！！！O(∩_∩)O~~源码已经开源，你们的Star就是我分享的最大动力！