H5的Web Audio Api

时间：2021-05-26 12:57:14

概述

研究Web Audio Api的主要原因是：工作中需要在ios中实现声音的淡出效果，主要是通过setInterval来改audio标签的volume属性实现的，但是ios上面volume属性是只读的，所以在ios上面改volume属性无效。

这个时候只能使用H5的Audio Api或者一些封装了Audio Api的库比如soundJs来解决。这篇博文记录了我学习原生Audio Api的心得，记录下来供以后开发时参考，相信对其他人也有用。

参考资料：

努力翻译一篇中文最友好的，Web Audio API的使用相关的文章

mdn Web Audio API

简介

Web Audio API是对<audio>标签功能上的补充，它的强大之处在于：

  1. 它可以一秒内同时发出多个声音，甚至1000多种声音也可以不经过压缩直接播放。
  2. 它可以把音频流独立出来，进行复杂的处理。
  3. 它能将音频流输出到多个地方，比如canvas，从而实现音频的可视化与立体化。

使用Web Audio API的基本流程如下：

  1. 创建一个AudioContext对象。
  2. 给AudioContext对象添加声音源，声音源可以是<audio>里面的，也可以是通过网址自行下载的，也可以是利用oscillator模拟的。
  3. 创建需要使用的效果节点，比如reverb, biquad filter, panner, compressor, gainNode等。
  4. 选择音频的最终输出节点。比如电脑的扬声器。
  5. 把声音源和节点连接起来，并且把节点和最终输出节点连接起来。
  6. 播放声音。

代码示例

下面是一个使用<audio>源播放的代码，主要实现声音的淡出效果：

//初始化音频api

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

//设置音频的源，使用id为Jaudio2的<audio>标签

var myAudio = document.querySelector("#Jaudio2");

var source = audioCtx.createMediaElementSource(myAudio);

//初始化音量控制节点

var gainNode = audioCtx.createGain();

//初始化音量，为1

gainNode.gain.setValueAtTime(1, audioCtx.currentTime);

//把节点连接起来。audioCtx.destination就是最终输出节点。

source.connect(gainNode);

gainNode.connect(audioCtx.destination);

//播放

myAudio.play();

//设置淡出效果，在2秒内音量递减到0

gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2);

//暂停声音

audioCtx.suspend();

问题

在具体的使用中，碰到一个问题，就是在移动端ios设备上利用上述代码播放不了音频，但是在PC端的chrome浏览器上可以正常播放并且实现淡出。

最后在看soundJs插件的时候，它的文档里面说，在ios上需要用户操作来解锁Web Audio！我们都知道在ios上面需要用户操作来解锁<audio>或者<video>标签，难道说Web Audio的初始化也需要用户操作来解锁吗？

等我找个时间试试看了。如果不行的话只能用封装了Web Audio的库比如soundJs了。

经测试，可行！！！Web Audio在safara浏览器上的初始化也需要用户操作（最好是用户点击）。

相关文章