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瀏覽器上的初始化也須要用戶操做（最好是用戶點擊）。