H5的Web Audio Api

概述

研究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浏览器上的初始化也须要用户操做（最好是用户点击）。