React中使用js-audio-recorder录音

js-audio-recorder是一个JavaScript库，它可以在浏览器中录制音频并将其转换为Blob对象或base64编码的字符串，它可以轻松地与React集成。

使用js-audio-recorder需要先安装它，可以通过npm来安装：

npm install js-audio-recorder

安装完成后，可以在React组件中导入并使用它。以下是一个简单的示例：

import React, { useState } from 'react';
import Recorder from 'js-audio-recorder';

function App() {
  const [audioBlob, setAudioBlob] = useState(null);

  const handleRecord = async () => {
    const recorder = new Recorder();
    await recorder.start();
    setTimeout(async () => {
      const blob = await recorder.stop();
      setAudioBlob(blob);
    }, 5000); // 录制5秒后停止
  };

  return (
    <div>
      <button onClick={handleRecord}>开始录音</button>
      {audioBlob && (
        <audio controls>
          <source src={URL.createObjectURL(audioBlob)} type="audio/wav" />
        </audio>
      )}
    </div>
  );
}

export default App;

在这个示例中，我们首先使用useState钩子来定义一个状态audioBlob，用于存储录音后生成的Blob对象。然后，我们定义了一个名为handleRecord的函数，在该函数中创建一个Recorder实例并开始录音。录音5秒后，我们使用Recorder的stop方法停止录音，并将生成的Blob对象设置为状态audioBlob。最后，我们渲染一个按钮和一个音频元素，当用户单击按钮开始录音时，音频元素会显示出来。