让音乐动起来！Cocos Creator!

转载

白玉无冰 2021-11-27 17:46:50

文章标签 数据源地址 github 微信公众号源码分享 文章分类 代码人生

摘要

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

正文

说明

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

让音乐动起来！Cocos Creator!_微信公众号

如何播放

先初始化环境。

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

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

让音乐动起来！Cocos Creator!_源码分享_02

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

AudioBuffer的获取

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

让音乐动起来！Cocos Creator!_数据_03

数据处理

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

让音乐动起来！Cocos Creator!_github_04

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);