如何使用javascript錄制音頻元素的音頻

Question

我正在制作一個使用HTML5和Javascript的錄音機，並且不想包含任何第三方API，我在第一步就是通過使用<audio>標簽創建音頻檢索器和播放器以及從我的麥克風獲取音頻的navigator.webkitGetUserMedia函數並通過<audio>元素播放，但此時我無法獲取數組中的音頻數據我不知道該怎么做才能使用。

Answer 1

簡單只需創建一個音頻節點，下面是來自MattDiamond的RecorderJS的調整代碼：

function RecordAudio(stream, cfg){

    var config = cfg || {};
    var bufferLen = config.bufferLen || 4096;
    var numChannels = config.numChannels || 2;
    this.context = stream.context;
    var recordBuffers = [];    
    var recording = false;
    this.node = (this.context.createScriptProcessor ||
                 this.context.createJavaScriptNode).call(this.context,
                 bufferLen, numChannels, numChannels);


    stream.connect(this.node);
    this.node.connect(this.context.destination);    

    this.node.onaudioprocess = function(e){
      if (!recording) return;
      for (var i = 0; i < numChannels; i++){
          if(!recordBuffers[i])  recordBuffers[i] = [];
          recordBuffers[i].push.apply(recordBuffers[i], e.inputBuffer.getChannelData(i));
      }
    }

    this.getData = function(){
        var tmp = recordBuffers;
        recordBuffers = [];
        return tmp;     // returns an array of array containing data from various channels
    };

    this.start() = function(){
        recording = true;
    };

    this.stop() = function(){
        recording = false;
    };

}

示例用法：

var recorder = new RecordAudio(userMedia);
recorder.start();
recorder.stop();
var recordedData = recorder.getData();