Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对音频添加特效,使音频可视化,添加空间效果 (如平移),等等。
Web Audio API 使用户可以在音频上下文(AudioContext)中进行音频操作,具有模块化路由的特点。在音频节点上操作进行基础的音频, 它们连接在一起构成音频路由图。即使在单个上下文中也支持多源,尽管这些音频源具有多种不同类型通道布局。这种模块化设计提供了灵活创建动态效果的复合音频的方法。
对于声音可视化表现,我们主要使用 AnalyserNode。AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 AudioNode,同时允许你获取和处理它生成的数据,从而创建音频可视化。
律动的背景我们采用 shader 的方式生成,将通过 AnalyserNode 节点获取的声音频域采样数据作为纹理数据写入 cc.Texture2D 中,并作为参数 uChannel0 传递给 shader。
并不是所有的平台都支持 Web Audio API,比如微信小游戏、原生游戏,对于这种情况只能预先准备声音频域采样数据。
1
创建 AudioContext
对于不同的平台创建 AudioContext 的方法略有不同
}
2
创建并连接 AudioNode
创建各种 AudioNode,并把它们串行连接起来
其中 AudioBufferSource 的 AudioBuffer 数据我们使用cc.AudioClip的_audio字段
其中 AnalyserNode 是负责对采样帧的音频信号做快速傅里叶变换得到频域数据,是我们可视化数据的来源.
3
播放声音并获取可视化数据
一般来说bufferSource.start()就可以播放声音,但是由于Web API的安全策略,网页在播放音频前需要收到用户操作(一般就是点击事件),否则播放不会成功,仿造cc.audioEgine的写法
if (self._touchPlay) {
播放音频的代码如下
if (self._touchPlay) {
声音一直在播放中,我们每隔一段时间获取一次可视化数据,并把这个数据填充为(宽度为frequencyBinCount/4,高度为1)的cc.Texture2D
backgroundSoundChannel.initWithData(
4
展现数据
我们把音频数据变成纹理的形式作为变量"uChannel0"发送给shader,在shader中可以用 texture(iChannel0, vec2(0.1, 0.0));其中rgba的每一个分量都是某个频率的采样值。
具体shader的表现方式就靠自己发挥了,在这个例子中,我是从 shadertoy.com 这个网站找的,在具体的effect文件中有标记出处。
5
小结
在线演示1:
https://ltp.gitee.io/gym/cocos-creator/ShaderSample/wave-show/web-mobile/index.html
在线演示2:(增加一个超华丽Shader,请在桌面端体验)
http://example.creator-star.cn/webaudio_and_shader/
感谢「刘天鹏」带来的精彩案例,使用WebAudio API与Shader相结合带来的震撼视觉享受,让游戏开发更有乐趣,回复【WebAudio】可获取案例源码!
本文分享自 Creator星球游戏开发社区 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!