音频录制(react)_recorder-core是否支持react

录音两种实现方式

1. MediaDevices
2. js-audio-recorder

功能

录音,暂停,继续.播放录音.下载录音(wav格式),重新录音

开始录音

调用麦克风

先检查电脑麦克风配置

// 指定参数
let recorder // react刷新的时候,会把reacorder重置,暂时声明在组件外,
 const audioObj = {
      video: false,
      audio: true,
    };
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      try {
        const stream = await navigator.mediaDevices.getUserMedia(audioObj);
        if (stream.active) {
          recorder = new Recorder();
          recorder.start(); // 开始录音
        }
      } catch (err) {
       console.log(err);
      }
    } else {
      alert(没有麦克风配置);
    }
    // mediaDevices 里有开始,暂停等方法,使用过程中,麦克风录音经常没声音,暂停继续录音,最后总时长会缺失,后发现 Recorde,比较全面,录音时改用此插件,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

暂停

   recorder.pause();
1

继续

   recorder.resume();
1

确认录音

使用audio标签播放录音

<audio className={css.audioWidth} controls><source src={}}></source></audio> 
//  control显示播放录音控件   controlsList="nodownload"  关闭控件自带下载按钮
1
2

获取录音文件 格式转换

// 使用FileReader 读取文件

const blob = recorder.getWAVBlob();
// 获取wav格式文件,属性有size,type
// 使用FileReader 读取文件
const reader: any = new FileReader();
    reader.readAsDataURL(blob);
     reader.addEventListener(
      "load",
      (ev: any) => {
        var mp3 = ev.target.result;
        if (!mp3 || mp3.length < 6) {
          console.log("error", "提示", "暂无录音文件", 3);
          return;
        }
        //  ev.target.result 就是audio的src属性需要的值
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下载录音

 recorder.downloadWAV("audio"); // audio是文件名
1

重新录制

recor 清空 audio上的src属性值清空
1

计时器

let timer 
let totalTime = 0
  const startTimer = () => {
    timer = setInterval(function () {
      totalTime += 41;
      setTimePiece(showTime(totalTime));
    }, 41);
  };
   const showTime = (time: number) => {
    let min: number | string;
    let second: number | string;
    // var msecond;
    second = Math.floor((time / 1000) % 60);
    min = Math.floor((time / 1000 / 60) % 60);

    second = second % 60 < 10 ? "0" + second : second;
    min = min % 60 < 10 ? "0" + min : min;
    return min + ":" + second;
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

暂停计时

  clearInterval(timer);
      timer = null;
1
2

清空计时

  clearInterval(timer);
    timer = null;
    totalTime = 0;
1
2
3

踩到的坑

因为项目是使用iframe嵌套进去的,iframe禁止了麦克风的权限,在iframe上添加此属性就可解决

allow="microphone;camera;midi;encrypted-media;"
1