浏览器录音

原生浏览器录音实现

1.录音对象构造

  var Recorder = function (stream) {
  var sampleBits = 16; //输出采样数位 8, 16
  var sampleRate = 16000; //输出采样率(单位时间内对模拟信号采样的多少)
  var context = new AudioContext();
  var audioInput = context.createMediaStreamSource(stream);
  var recorder = context.createScriptProcessor(4096, 1, 1);
  //录音模型
  var audioData = {
    size: 0, //录音文件长度
    buffer: [], //录音缓存
    inputSampleRate: 48000, //输入采样率
    inputSampleBits: 16, //输入采样数位 8, 16
    outputSampleRate: sampleRate, //输出采样数位
    oututSampleBits: sampleBits, //输出采样率
    clear: function () {
      this.buffer = [];
      this.size = 0;
    },
    input: function (data) {
      this.buffer.push(new Float32Array(data));
      this.size += data.length;
    },
    compress: function () { //合并压缩
      //合并
      var data = new Float32Array(this.size);
      var offset = 0;
      for (var i = 0; i < this.buffer.length; i++) {
        data.set(this.buffer[i], offset);
        offset += this.buffer[i].length;
      }
      //压缩
      var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
      var length = data.length / compression;
      var result = new Float32Array(length);
      var index = 0,
        j = 0;
      while (index < length) {
        result[index] = data[j];
        j += compression;
        index++;
      }
      return result;
    },
    encodePCM: function () { 
      var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
      var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
      var bytes = this.compress();
      var dataLength = bytes.length * (sampleBits / 8);
      var buffer = new ArrayBuffer(dataLength);
      var data = new DataView(buffer);
      var offset = 0;
      for (var i = 0; i < bytes.length; i++, offset += 2) {
        var s = Math.max(-1, Math.min(1, bytes[i]));
        //数据视图指定字节偏移量位置处设置 Int16 值
        data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
      }
      return new Blob([data]);
    }
  };
  var sendData = function () { //对以获取的数据进行处理(分包)
    // FileReaderr接口提供了读取文件的方法和包含读取 结果的事件模型
    var reader = new FileReader();
    reader.onload = e => {
      var outbuffer = e.target.result;
      ws.send(outbuffer);
      ws.send(JSON.stringify({
        "type": "heartbeat"
      }));
    };
    reader.readAsArrayBuffer(audioData.encodePCM());
    audioData.clear(); //每次发送完成则清理掉旧数据
  };
//构造录音对象方法
  this.start = function () {
    audioInput.connect(recorder);
    recorder.connect(context.destination);
  }

  this.stop = function () {
    recorder.disconnect();
  }

  this.getBlob = function () {
    return audioData.encodePCM();
  }

  this.clear = function () {
    audioData.clear();
  }

  recorder.onaudioprocess = function (e) {
    var inputBuffer = e.inputBuffer.getChannelData(0);
    audioData.input(inputBuffer);
    // console.log(inputBuffer);
    sendData();
  }

2.调用录音对象

function getUserMedia(){
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
  if (!navigator.getUserMedia) {
    alert('浏览器不支持音频输入');
  } else {
    navigator.getUserMedia({
        audio: true
      },
      //传入媒体流对象
      function (mediaStream) {
        init(new Recorder(mediaStream));
        console.log('开始对讲');
        useWebSocket();
      },
      function (error) {
        switch (error.message || error.name) {
          case 'PERMISSION_DENIED':
          case 'PermissionDeniedError':
            console.info('用户拒绝提供信息。');
            break;
          case 'NOT_SUPPORTED_ERROR':
          case 'NotSupportedError':
            console.info('浏览器不支持硬件设备。');
            break;
          case 'MANDATORY_UNSATISFIED_ERROR':
          case 'MandatoryUnsatisfiedError':
            console.info('无法发现指定的硬件设备。');
            break;
          default:
            console.info('无法打开麦克风。异常信息:' + (error.code || error.name));
            alert('无法打开麦克风。异常信息:' + (error.code || error.name))
            break;
        }
        window.location.reload();
      }
    )
  }
}
//  导出
$("#recordingslist").wordExport("会议记录");

js-audio-recorder插件录音

准备工作(下载,导入):
npm i js-audio-recorder
import Recorder from ‘js-audio-recorder’
1.实例语音对象

//实例化语音对象
data.recorder = new Recorder({
	sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
	sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
    numChannels: 1 // 声道，支持 1 或 2， 默认是1
});
Recorder.getPermission().then(() => {
     console.log('开始录音')
     data.recorder.start() // 开始录音
   }, (error) => {
     console.log(`${error.name} : ${error.message}`)
})

2.获取录音数据

var blob = data.recorder.getWAVBlob()//获取wav格式音频数据
//转成相应类型文件
var newbolb = new Blob([blob], { type: 'audio/wav' })
var fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')

3.主要功能api

recorder.resume() // 恢复录音
recorder.play() // 播放录音
recorder.pausePlay() // 暂停播放
recorder.resumePlay() // 恢复播放
recorder.stopPlay() // 停止播放
recorder.destroy() // 毁实例

注意事项
如部署在局域网 ip 访问时 web 录音功能需进行权限配置,以 Chrome 浏览器为例,键入访问 chrome://flags/#unsafely-treat-insecure-origin-as-secure 在 Insecure origins treated as secure 中添加启用部署后项目 ip 地址