前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用 Cocos Creator 开发动感音乐游戏!

使用 Cocos Creator 开发动感音乐游戏!

作者头像
张晓衡
发布2019-12-16 17:38:59
2.4K1
发布2019-12-16 17:38:59
举报
文章被收录于专栏:Creator星球游戏开发社区

摘要

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

正文

说明

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

如何播放

先初始化环境。

代码语言:javascript
复制
let AudioContext = window.AudioContext;
let audioContext = new AudioContext();

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

代码语言:javascript
复制
let audioBufferSourceNode = audioContext.createBufferSource();
audioBufferSourceNode.buffer = 音频数据AudioBuffer;
audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start(0);
AudioBuffer的获取

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

数据处理

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

代码语言:javascript
复制
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);
如何显示

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

代码语言:javascript
复制
// 建立数据准备接受数据
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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Creator星球游戏开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 正文
    • 说明
      • 如何播放
        • AudioBuffer的获取
          • 数据处理
            • 如何显示
            • 结语
            相关产品与服务
            容器服务
            腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档