利用recordRTC实现录音

工作中实际运用到录音效果，且将录音相关功能已封装到一个js 文件中，调用方便，在此存档。
参考文档：recordRTC
将一些方法进行封装，页面按钮录音，暂停，播放等进行直接调用即可；

/* eslint-disable no-buffer-constructor,radix */
import fs from 'fs';
import RecordRTC from 'recordrtc';
import {p_fs} from './mkdirp'; // 内部疯转的异步写文件事件

let recorder;
let recorderState = '';

export default class RecAudio {
  // 检查MIC
  static captureMicrophone(callback, errcb) {
    navigator.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
    navigator.getUserMedia({ audio: true}, callback, () => {
      if (errcb) { errcb(); }
    });
  }

  // 通过audio控件播放录好的声音缓存
  static playBlob(audio) {
    // recorder.reset();
    if (recorder) {
      // eslint-disable-next-line no-param-reassign
      audio.src = URL.createObjectURL(recorder.getBlob());
      audio.play();
    } // else console.log('recorder not found');
  }

  // 通过audio控件播放录好的文件
  static playFile(file, audio) {
    fs.readFile(file, (err, data) => {
      const blob = new Blob([data], { type: 'audio/wav' });
      // console.log(blob);

      // eslint-disable-next-line no-param-reassign
      audio.src = URL.createObjectURL(blob);
      audio.play();
    });
  }

// 获取缓存地址
  static getBlob() {
    let src;
    if (recorder && recorder.getBlob()) {
      src = URL.createObjectURL(recorder.getBlob());
    }
    return src;
  }

  // 开始录制
  static startRecord(cb) {
    if (recorder) {
      recorder.reset();
    }

    RecAudio.captureMicrophone((microphone) => {
      recorder = RecordRTC(microphone, {
        type: 'audio',
        desiredSampRate: 16000, // 设置采样率
        numberOfAudioChannels: 1, // 设置单声道
        // sampleRate : 44100,
        recorderType: RecordRTC.StereoAudioRecorder, // use MediaStreamRecorder for webm, much smaller
        mimeType: 'audio/wav' // 设置录音音频格式
      });
      recorder.startRecording();
      recorderState = 'recording';
      recorder.microphone = microphone;
      cb && cb(microphone);
    }, (err) => {
      if (err) {
        cb && cb('error');
      }
    });
  }

  // 停止录制
  static stopRecord(audioUrl, cb) {
    cb = cb ? cb : function(){};
    if (recorder && recorder.state === 'recording') {
      recorder.stopRecording(() => {
        const track = recorder.microphone.getTracks()[0];  // if only one media track
        if(track){
          track.stop();
        }
        if (audioUrl) {
       	  // 保存录音文件在本地
          this.saveRecorded(audioUrl, cb);
        } else {
          // 录音文件上传至服务器
       	  this.uploadRecordAudio(cb);
        }
      });
    } else {
      cb && cb('recorder not found 111');
    }
  }

  // 录音上传至服务器
  static uploadRecordAudio = (cb) => {
    var formData = new FormData();
    formData.append('filename', recorder.getBlob());
    if(recorder.getBlob()){
      fetch('接口', {
        method: 'POST',
        body: formData
      }).then( data => {
        data.json().then( url => {
          if (url.code === 200) {
            console.log('url = ', url);
            cb();
          }
        });
      });
    }
  };

  // 保存录音在本地
  static saveRecorded(fileName, cb) {
    if (recorder && recorder.getBlob()) {
      const reader = new FileReader();
      reader.addEventListener("load", (ev) => {
        const buffer = new Buffer(new Int8Array(ev.target.result));
        if(buffer.length !== 0){
          p_fs.touchFileP(fileName, buffer, (err) => {
            if (err) {
              cb(err);
              return;
            }
            cb();
          })
        }else{
          cb({bufferError: '录音失败，请检查耳麦后重新演唱！'});
        }
      });
      reader.readAsArrayBuffer(recorder.getBlob());
    } else {
      cb('recorder not found 2222');
    }
  }

  /* 返回录音状态 */
  static callBackState() {
    return recorderState;
  }

  /* 重置录音状态 */
  static changeRecordState(value) {
    recorderState = value;
    if (value === 'end' && recorder) {
      this.stopRecord();
    }
  }

  // 另存为
  static saveas(audioUrl) {
    recorder.save(audioUrl);
  }
}

import RecordAudio from ‘record_audio’;
开始录音调用：RecordAudio.startRecord();
结束录音调用：RecordAudio.stopRecord(path); // path为录音存放地址，若未传则可直接上传服务器
播放录音调用：RecordAudio.playBlob(this.audio); // this.audio为audio标签dom结构