博客

摘要

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

正文

说明

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

如何播放

先初始化环境。

let AudioContext = window.AudioContext;
let audioContext = new AudioContext();

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

let audioBufferSourceNode = audioContext.createBufferSource();
audioBufferSourceNode.buffer = 音频数据AudioBuffer;
audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start(0);

AudioBuffer的获取

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

数据处理

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

let AudioContext = window.AudioContext;
// audioContext 只相当于一个容器。
let audioContext = new AudioContext();
// 要让 audioContext 真正丰富起来需要将实际的音乐信息传递给它的。
// 也就是将 AudioBuffer 数据传递进去。
// 以下就是创建音频资源节点管理者。
this.audioBufferSourceNode = audioContext.createBufferSource();
// 将 AudioBuffer 传递进去。
this.audioBufferSourceNode.buffer = this.music._audio;
// 创建分析器。
this.analyser = audioContext.createAnalyser();
// 精度设置
this.analyser.fftSize = 256;
// 在传到扬声器之前，连接到分析器。
this.audioBufferSourceNode.connect(this.analyser);
// 连接到扬声器。
this.analyser.connect(audioContext.destination);
// 开始播放
this.audioBufferSourceNode.start(0);

如何显示

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

// 建立数据准备接受数据
this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);
// 分析结果存入数组。
this.analyser.getByteFrequencyData(this.dataArray);
// 自定义方法处理数据
this.draw(this.dataArray);

结语

是不是有收获呢！！！O(∩_∩)O~~

源码已经开源，你们的Star就是我分享的最大动力！

开源地址：https://github.com/KuoKuo666/CocosCreator-MusicView

微信公众号