[Voice communications] 音量的控制

改變音頻的音量是音頻處理中最基礎的部分，我們可以利用 GainNode 來構建 Mixers 的結構塊。GainNode 的接口是很簡單的：

interface GainNode : AudioNode {
    readonly attribute AudioParam gain;
};

 

通過調節 GainNode.gain.value 就可以實現音頻大小的調控了。下文會先介紹使用 Processor 來處理，這是一個最通用的節點，可以處理很多東西。在上文看得到的音頻流中我們也使用了該節點。

本文地址：http://www.cnblogs.com/hustskyking/p/webAudio-volume.html，轉載請注明源地址。

P.S：請在較新版的 chrome 火狐 Firefox 中測試。

一、音頻流音量大小的控制

1. 使用 Processor 處理

這個過程比較簡單：

source Node -> Processor Node -> Destination Node

數據送入到 Processor 后，由於輸入 channel 和輸出的 channel 之間的對應關系需要我們自己去處理，這些對應關系可以在 onaudioprocess 事件中處理，只要上面的連接導通，那這個事件就一直會處於觸發狀態，無論是否有數據流送入（其實沒有數據流送入也就是數據流 bufferArray 為 0 嘛）。

可以看下面這個 DEMO：

<audio src="http://qianduannotes.duapp.com/file/tankWar.mp3" id="audio" autoplay></audio>
<input type="range" min="0" max="100" id="volume" />
<script type="text/javascript">
    var AudioContext = AudioContext || webkitAudioContext;
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    // 低通濾波節點（高頻信號被過濾，聽到的聲音會很沉悶）
    var processor = context.createScriptProcessor(1024, 1, 1);
    // sourceNode - > processor -> destinationNode
    source.connect(processor);
    processor.connect(context.destination);
    //處理過程
    processor.onaudioprocess = function(e){
      //獲取輸入和輸出的數據緩沖區
      var input = e.inputBuffer.getChannelData(0);
      var output = e.outputBuffer.getChannelData(0);
      //將輸入數緩沖復制到輸出緩沖上，並調整音量
      for(var  i =0; i < input.length; i++)
            output[i] = input[i] * value;
    };
    //音量控制
    var value;
    onload = volume.onchange = function(){
      value = volume.value / 200;
    };
</script>

 

2. 使用 GainNode 控制

上面這種方式，我們可以在 onaudioprocess 事件中拿到幾乎我們想要的所有數據，並且可以進行各種處理，可以說 processor 這個節點十分通用，但他的性能並不是高，你應該也看到了上面的代碼中有：

//將輸入數緩沖復制到輸出緩沖上，並調整音量  
for(var  i =0; i < input.length; i++)
    output[i] = input[i] * value;   

 

需要將數據一一復制到輸出節點，上面 demo 中我們設定的 bufferSize 是 1024 ，如果再大一些，或者文中需要處理的節點數太多，那頁面將會很卡。Web Audio API 中提供了提供音量的節點，GainNode，既然提供了，毫無疑問，就用它唄~

節點連接方式也是十分的方便：

source → gain → destination

然后通過一個 range 控件來調節 Gain 的 gain 參數。DEMO如下：

<audio src="http://qianduannotes.duapp.com/file/tankWar.mp3" id="audio" autoplay></audio>
<input type="range" min="0" max="100" id="volume" />
<script type="text/javascript">
    var AudioContext = AudioContext || webkitAudioContext;
    var context = new AudioContext();
    var source = context.createMediaElementSource(audio);
    var Gain = context.createGain();
    //連接：source → Gain → destination
    source.connect(Gain);
    Gain.connect(context.destination);
    //音量控制
    var value;
    onload = volume.onchange = function(){
      gain.gain.value = volume.value / 200;
    };
</script>

 

十分輕松簡潔的處理一個音量控制。

二、小結

本文主要是介紹 Web Audio API 中的 GainNode 節點，以及相關的應用。文中的兩個 DEMO ，前者利用 processor 節點來處理，關於這個幾點的說明，可以參考上兩篇文章的接受；后者是使用 GainNode ，通過控制 Gain.gain.value 的值來調節音量的大小，過程十分簡單，所以本文的思路也是比較的清晰。

如果本文中有敘述不正確的地方，還請斧正！

三、參考資料

• http://www.w3.org/TR/webaudio/ W3C Group
• http://www.web-tinker.com/ 次碳酸鈷