使用Web Audio API实现基于浏览器的Web端录音

有时候会有通过Web端录音的需求，那么如何实现呢，通过Web Audio API能够实现，具体可以查看官网的API，下面是实现单声道录音（压缩音频大小）的一个例子，共需要两个js文件，具体如下：

第一个js文件： recorder.js

(function(window){
 
  var WORKER_PATH = 'resources/js/recorderWorker.js'; //自己设置recorderWorker.js的路径
 
  var Recorder = function(source, cfg){
    var config = cfg || {};
    var bufferLen = config.bufferLen || 4096;   
    this.context = source.context;
    this.node = this.context.createScriptProcessor(bufferLen, 1, 1);
    var worker = new Worker(config.workerPath || WORKER_PATH);
    worker.postMessage({
      command: 'init',
      config: {
        sampleRate: this.context.sampleRate //默认的是48000
      //sampleRate:11025
      }
    });
    var recording = false,
      currCallback;
 
    this.node.onaudioprocess = function(e){
      if (!recording) return;
      worker.postMessage({
        command: 'record',
        buffer: [
          e.inputBuffer.getChannelData(0)
          //e.inputBuffer.getChannelData(1)
        ]
      });
    }
 
    this.configure = function(cfg){
      for (var prop in cfg){
        if (cfg.hasOwnProperty(prop)){
          config[prop] = cfg[prop];
        }
      }
    }
 
    this.record = function(){
      recording = true;
    }
 
    this.stop = function(){
      recording = false;
    }
 
    this.clear = function(){
      worker.postMessage({ command: 'clear' });
    }
 
    this.getBuffer = function(cb) {
      currCallback = cb || config.callback;
      worker.postMessage({ command: 'getBuffer' })
    }
 
    this.exportWAV = function(cb, type){
      currCallback = cb || config.callback;
      type = type || config.type || 'audio/wav';
      if (!currCallback) throw new Error('Callback not set');
      worker.postMessage({
        command: 'exportWAV',
        type: type
      });
    }
 
    worker.onmessage = function(e){
      var blob = e.data;
      currCallback(blob);
    }
 
    source.connect(this.node);
    this.node.connect(this.context.destination);    //this should not be necessary
  };
 
  Recorder.forceDownload = function(blob, filename){
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    var link = window.document.createElement('a');
    link.href = url;
    link.download = filename || 'output.wav';
    var click = document.createEvent("Event");
    click.initEvent("click", true, true);
    link.dispatchEvent(click);
  }
 
  window.Recorder = Recorder;
 
})(window);

第二个js文件： recorderWorker.js  

var recLength = 0,
  recBuffersL = [],
  recBuffersR = [],
  sampleRate;
 
this.onmessage = function(e){
  switch(e.data.command){
    case 'init':
      init(e.data.config);
      break;
    case 'record':
      record(e.data.buffer);
      break;
    case 'exportWAV':
      exportWAV(e.data.type);
      break;
    case 'getBuffer':
      getBuffer();
      break;
    case 'clear':
      clear();
      break;
  }
};
 
function init(config){
  sampleRate = config.sampleRate;
}
 
function record(inputBuffer){
  recBuffersL.push(inputBuffer[0]);
  //recBuffersR.push(inputBuffer[1]);
  recLength += inputBuffer[0].length;
}
 
function exportWAV(type){
  var bufferL = mergeBuffers(recBuffersL, recLength);
  var interleaved = interleave(bufferL);
  var dataview = encodeWAV(interleaved);
  var audioBlob = new Blob([dataview], { type: type });
 
  this.postMessage(audioBlob);
}
 
function getBuffer() {
  var buffers = [];
  buffers.push( mergeBuffers(recBuffersL, recLength) );
  this.postMessage(buffers);
}
 
function clear(){
  recLength = 0;
  recBuffersL = [];
  recBuffersR = [];
}
 
function mergeBuffers(recBuffers, recLength){
  var result = new Float32Array(recLength);
  var offset = 0;
  for (var i = 0; i < recBuffers.length; i++){
    result.set(recBuffers[i], offset);
    offset += recBuffers[i].length;
  }
  return result;
}
 
function interleave(inputL){
//修改采样率时 , 要做如下修改
var compression = 44100 / 11025;    //计算压缩率
var length = inputL.length / compression;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length) {
result[index] = inputL[inputIndex];
inputIndex += compression;//每次都跳过3个数据
index++;
}
return result;
}
 
function floatTo16BitPCM(output, offset, input){
  for (var i = 0; i < input.length; i++, offset+=2){
    var s = Math.max(-1, Math.min(1, input[i]));
    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
  }
}


function floatTo8BitPCM(output, offset, input) {
for (var i = 0; i < input.length; i++, offset++) {    //这里只能加1了
var s = Math.max(-1, Math.min(1, input[i]));
var val = s < 0 ? s * 0x8000 : s * 0x7FFF;
val = parseInt(255 / (65535 / (val + 32768)));     //这里有一个转换的代码,这个是我个人猜测的,就是按比例转换
output.setInt8(offset, val, true);
}
}


function writeString(view, offset, string){
  for (var i = 0; i < string.length; i++){
    view.setUint8(offset + i, string.charCodeAt(i));
  }
}
 
function encodeWAV(samples){
//修改采样率  时 , 要添加混合声道时的处理
var dataLength = samples.length;
var buffer = new ArrayBuffer(44 + dataLength);
var view = new DataView(buffer);
var sampleRateTmp = 11205 ;//sampleRate;//写入新的采样率
var sampleBits = 8;
var channelCount = 1;
var offset = 0;
/* 资源交换文件标识符 */
writeString(view, offset, 'RIFF'); offset += 4;
/* 下个地址开始到文件尾总字节数,即文件大小-8 */
view.setUint32(offset, /*32*/ 36 + dataLength, true); offset += 4;
/* WAV文件标志 */
writeString(view, offset, 'WAVE'); offset += 4;
/* 波形格式标志 */
writeString(view, offset, 'fmt '); offset += 4;
/* 过滤字节,一般为 0x10 = 16 */
view.setUint32(offset, 16, true); offset += 4;
/* 格式类别 (PCM形式采样数据) */
view.setUint16(offset, 1, true); offset += 2;
/* 通道数 */
view.setUint16(offset, channelCount, true); offset += 2;
/* 采样率,每秒样本数,表示每个通道的播放速度 */
view.setUint32(offset, sampleRateTmp, true); offset += 4;
/* 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset +=4;
/* 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
/* 每样本数据位数 */
view.setUint16(offset, sampleBits, true); offset += 2;
/* 数据标识符 */
writeString(view, offset, 'data'); offset += 4;
/* 采样数据总数,即数据总大小-44 */
view.setUint32(offset, dataLength, true); offset += 4;
/* 采样数据 */
floatTo8BitPCM(view, 44, samples);
return view;
}

使用方法：

1.使能HTML5录音功能

window.URL = window.URL;
navigator.getUserMedia = navigator.webkitGetUserMedia;
if (navigator.getUserMedia) {
    navigator.getUserMedia({video:true,audio:true}, function(localMediaStream){
        var context = new AudioContext();
        var mediaStreamSource = context.createMediaStreamSource(localMediaStream);
        window.MediaStreamSource = mediaStreamSource;
    }, function(){


    });
}else {
    Ext.Msg.alert(“消息提示”,“你的浏览器不支持录音”);
}

2.开始录音

var rec = new Recorder(MediaStreamSource);
window.rec=rec;

3.停止录音

window.rec.stop();
rec.exportWAV(function(blob) {

//导出录音过程产生的blob数据，传给后台实现音频的保存

});
    console.log(blob);