利用recordRTC实现录音

最新推荐文章于 2025-07-03 13:58:28 发布

原创

最新推荐文章于 2025-07-03 13:58:28 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#录音 #recordRTC #H5录音

工作中实际运用到录音效果，且将录音相关功能已封装到一个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, d