概述
研究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>標簽功能上的補充，它的強大之處在於：
- 它可以一秒內同時發出多個聲音，甚至1000多種聲音也可以不經過壓縮直接播放。
- 它可以把音頻流獨立出來，進行復雜的處理。
- 它能將音頻流輸出到多個地方，比如canvas，從而實現音頻的可視化與立體化。
使用Web Audio API的基本流程如下：
- 創建一個AudioContext對象。
- 給AudioContext對象添加聲音源，聲音源可以是
<audio>里面的，也可以是通過網址自行下載的，也可以是利用oscillator模擬的。 - 創建需要使用的效果節點，比如reverb, biquad filter, panner, compressor, gainNode等。
- 選擇音頻的最終輸出節點。比如電腦的揚聲器。
- 把聲音源和節點連接起來，並且把節點和最終輸出節點連接起來。
- 播放聲音。
代碼示例
下面是一個使用<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瀏覽器上的初始化也需要用戶操作（最好是用戶點擊）。