CocosCreator之KUOKUO带你做音乐可视化

摘要

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

正文

说明

在浏览器端 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

微信公众号

发布了119 篇原创文章 · 获赞 133 · 访问量 14万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览