使用 Cocos Creator 开发动感音乐游戏!
摘要
音乐干听多没劲,来点可视化效果让音乐“动”起来!底部源码分享!
正文
说明
在浏览器端 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
微信公众号
微信引擎插件会对小游戏带来怎样的利好?
字节小游戏上线攻略(续)!送源码福利
我应该拿什么来拯救你,我的游戏?
CreatorPrimer 30篇教程汇总
Creator星球教程文章分类导航
盘点一下Creator星球上的几大开源工具包
使用 Cocos Creator 开发动感音乐游戏!相关推荐
- cocos creator 开发浅塘游戏(1) 软件安装
cocos creator 开发浅塘游戏 文章目录 cocos creator 开发浅塘游戏 一.浅塘游戏 二.使用软件 1.cocos creator 2.vs code 一.浅塘游戏 浅塘是一款华 ...
- cocos creator开发微信小游戏(五)贪吃蛇大作战
目录 小游戏介绍 小游戏cocos creator场景图 小游戏部分JS代码 开发中碰到的问题 工程及说明 小游戏介绍 贪吃蛇小游戏:贪吃蛇试玩(首次加载比较慢),类似贪吃蛇大作战的小游戏.当玩家的蛇 ...
- Cocos Creator 开发实战——篮球物理游戏
Cocos Creator 开发实战--篮球物理游戏 知识点 教程 基础背景搭建 物理系统 篮网制作 篮球 结语 Cocos Creator 开发实战--篮球物理游戏 本篇文章教大家实现篮球物理游戏最 ...
- vscode函数跳转插件_人生苦短,我们为 Cocos Creator 开发的插件和工具
在使用 Cocos Creator 开发项目的过程中,为了提高开发效率我们开发了很多扩展插件,本文介绍常用的几款,抛砖引玉,希望给大家带来帮助. 腾讯开心鼠英语 网页扩展:运行时查看场景节点树 Coc ...
- Cocos Creator 开发入门
Cocos Creator 开发入门 H5小游戏,基本都是用的Cocos Creator和LayaBox,egret 这三款引擎IDE. Cocos Creator官网:https://www.coc ...
- Cocos Creator发布微信小游戏包内体积过大问题
1.初识 设置微信开发工具和js编辑器 3.5.2 :Cocos Creator perferences 2.Cocos Creator发布微信小游戏包内体积过大问题 2.1 已不可取:搭建本机服务器 ...
- Cocos Creator 开发QQ玩一玩入门到放弃?
Cocos Creator 开发QQ玩一玩入门到放弃? 文章目录 Cocos Creator 开发QQ玩一玩入门到放弃? 1.环境搭建 1.1 开发工具准备 1.1.2 官方站点 1.1.3 编辑器使 ...
- cocos creator 横版射击游戏 突击对决H5+安卓+IOS三端源码
cocos creator 横版射击游戏 突击对决H5+安卓+IOS三端源码,多关卡,开发脚本为js方便扩展和阅读,支持cocos creator2.X版本,完整的源码可直接运营. 源码下载链接 co ...
- Cocos Creator 开发环境安装
Cocos Creator 开发环境安装 1 下载 dashboard 官网 Cocos引擎_游戏开发引擎 顶栏中找到 产品 | Cocos Creator 下载 DashBoard 安装 Dashb ...
最新文章
- OpenCV查找轮廓
- 提取nds游戏的音乐
- windows7如何查看端口被占用
- Python教程:内置函数filter()和匿名函数lambda解析
- Python中的构造方法
- ubuntu创建php文件,ubuntu系统创建桌面快捷方式的方法
- jmeter压力性能测试-多台机器并发请求
- python随机森林变量重要性_随机森林如何评估特征重要性【机器学习面试题详解】...
- 力扣-1877 数组中最大数对和的最小值
- TabBars代码解读之——Visual Studio的自动化接口
- Python selenium 滚动页面以及滚动至元素可见(转载)
- jhipster使用简明教程
- 通过jsp实现省市区县四级联动菜单
- Uniwebview2插件常见问题以及刘海屏屏幕适配,屏幕旋转的解决方案
- 基于Simulink的汽车电子驻车系统仿真分析
- 教程—— 微信公众号如何接入客服系统
- 家用无线路由器选购指南。
- 关于vue路由模式导致微信jssdk授权问题的正确解决姿势
- MATLAB 设置坐标轴的字体为斜体
- 音视频卡顿问题的原因及解决方案
热门文章
- 设计实现信用卡用户定时还款功能
- 倒计算程序php,ASP_用ASP实现距指定日期的倒记时程序源码,给一个特殊的日子设计一个倒 - phpStudy...
- 【匿名网络综述】匿名分布式网络之匿名网络综述
- java 学习之 字符反写
- 2020 Leetcode 春季赛战队赛 题目汇总
- BZOJ 4864: [BeiJing 2017 Wc]神秘物质
- 【获奖公布】 我的2016 主题征文活动
- 在多线程应用程序中使用循环缓冲区高效地进行日志记录
- 汉字转拼音函数 linux,oracle 汉字转拼音
- 转贴汪应果先生的“全球华人应该向大陆中国人学什么?”