h5录音之recorder-core

一、使用场景：

调用移动设备的录音

• 1）获取录音文件，执行播放操作
• 2）获取录音文件，执行上传服务，通过服务解析成文字
• 3）获取录音文件，执行上传服务，通过服务对比进行相应反馈

二、js库引入

1、方式一：使用script标签引入

// 引入js库
<script src="项目路径/src/recorder-core.js"></script>
// 引入需要使用到的音频格式编码引擎的js文件
<script src="项目路径/src/engine/wav.js"></script>
// 如果要绘制音频波形图，需要引入
<script src="src/extensions/waveview.js"></script>

2、方式二：通过import引入

// 引入js库
import Recorder from 'recorder-core'
// 引入需要使用到的音频格式编码引擎的js文件
import 'recorder-core/src/engine/wav'
// 如果要绘制音频波形图，需要引入
import 'recorder-core/src/extensions/waveview'

三、调用方法

注意：需要在https或者localhost环境下才能打开设备录音权限。

1、调用设备录音权限

export function recOpen (_this) {
  let This = _this;
  let rec = This.rec = Recorder({
      type: This.type || "wav", // wav格式, 需要使用的type类型，需提前把格式支持文件加载进来
      bitRate: This.bitRate || 36, // 比特率kbps，越大音质越好
      sampleRate: This.sampleRate || 18000, // 采样率hz，每秒音波震动次数，越大细节越丰富
      onProcess: function(buffers, powerLevel, duration, sampleRate){
            buffers, // [[Int16,...],...]：缓冲的PCM数据，为从开始录音到现在的所有pcm片段，每次回调可能增加0-n个不定量的pcm片段
            powerLevel, // 输入的音频波动值0-100
            duration, // 录音持续时间ms
            sampleRate, // 录音使用的采样率
            // 利用waveview扩展实时绘制波形
            This.wave.input(buffers[buffers.length-1],powerLevel,sampleRate);
      } //录音实时回调，大约1秒调用12次回调
  });
  rec.open(function(){
      console.log('打开成功：');
      // 渲染音频波形图
      This.wave = Recorder.WaveView({elem:".ctrlProcessWave"});
  },function(msg, isUserNotAllow){
      // 浏览器不支持录音、用户拒绝麦克风权限、或者非安全环境（非https、file等 
      console.log((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:"+msg);
  });
}

2、开始录音

export function recStart (_this) {
        if(!_this.rec){
            console.log('未打开录音权限')；
            return;
        }
       this.rec.start();
},

3、结束录音，并释放资源

export function recStop (_this) {
        let This = _this;
        let rec = This.rec;
        This.rec = null;
        if(!rec){
            console.log('未打开录音权限')；
            return;
        }
        rec.stop((blob, duration) => {
            // blob: 流文件，duration: 持续时间ms，这里可以执行文件播放或者文件上传
            _this.logs = {
                blob: blob,
                duration: duration,
            }
        }, (s) => {
           console.log("结束出错："+s);
        }, true); // true: 自动关闭录音权限释放资源
}

四、总结

如果有更多的定制需要详情见：
https://github.com/xiangyuecn/Recorder