Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对音频添加特效,使音频可视化,添加空间效果 (如平移),等等。 Web Audio API 使用户可以在音频上下文(AudioContext)中进行音频操作,具有模块化路由的特点。在音频节点上操作进行基础的音频, 它们连接在一起构成音频路由图。即使在单个上下文中也支持多源,尽管这些音频源具有多种不同类型通道布局。这种模块化设计提供了灵活创建动态效果的复合音频的方法。
对于声音可视化表现,我们主要使用 AnalyserNode。AnalyserNode 接口表示了一个可以提供实时频域和时域分析信息的节点。它是一个不对音频流作任何改动的 AudioNode,同时允许你获取和处理它生成的数据,从而创建音频可视化。 律动的背景我们采用 shader 的方式生成,将通过 AnalyserNode 节点获取的声音频域采样数据作为纹理数据写入 cc.Texture2D 中,并作为参数 uChannel0 传递给 shader。 并不是所有的平台都支持 Web Audio API,比如
微信小游戏、原生游戏,对于这种情况只能预先准备声音频域采样数据。
![cb6f014e1751d2dc4c8101f21c66d344.png](https://i-blog.csdnimg.cn/blog_migrate/e234c3f158e07bf001398861cbb9c54b.png)
1 创建 AudioContext 对于不同的平台创建 AudioContext 的方法略有不同
if (window.AudioContext || window["webkitAudioContext"]) {
let audioCtx: AudioContext = nullif (window.AudioContext) {
//安卓平台 audioCtx = new window.AudioContext() } else {
//IOS平台 audioCtx = new window["webkitAudioContext"]()
}