react-mic-2 是一个用于录制麦克风音频的 React 组件。它可以很方便地在网页上进行录音，支持各种自定义操作和配置，同时还附带了多种事件回调。
安装
在项目根目录下运行以下命令：
npm install react-mic-2 --save
使用
引入组件
在你的 React 组件中将 react-mic-2 引入：
import ReactMic from 'react-mic-2';
渲染组件
在 render 方法里，将组件挂载到 DOM 树上：
-- -------------------- ---- ------- -------- - ------ - ----- --- --------- -- --- ------ -- -展开代码
配置参数
在组件中，你可以使用以下 Props 进行配置：
record
设置是否开始录音：
record={true||false}
pause
设置是否暂停录音：
pause={true||false}
visualSetting
设置可视化选项：
visualSetting="sinewave" || "frequencyBars"
mimeType
设置生成录音文件的 MIME 类型：
mimeType="audio/webm"
className
设置组件的 CSS 样式名称：
className="custom-mic"
onStop
当录音停止时触发的回调函数：
onStop(recordedBlob) { console.log('recordedBlob is: ', recordedBlob); }
事件
react-mic-2 提供了以下事件的回调：
onData
当录音数据可用时触发的回调函数：
onData(recordedBlob) { console.log('recording data is available', recordedBlob); }
onStart
当录音开始时触发的回调函数：
onStart() { console.log('recording started'); }
onStop
当录音停止时触发的回调函数：
onStop(recordedBlob) { console.log('recording stopped'); }
示例代码
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ -------- ---- -------------- ----- --- ------- --------- - ------------------ - ------------- ---------- - - ------- ------ -------- --- -- ------------------- - ------------------------------- ------------------ - ------------------------------ - ---------------- - --------------- ------- ----- --- - --------------- - --------------- ------- ------ --- - -------------------- - --------------- -------- --------------------- --- - -------- - ------ - ----- --------- -------------------------- -------------------- ---------------------- --------------------- ------------------------- ------------------------ --------------------- -- ------- ----------------------------- -------------- ----- --------- --------- ------- ---------------------------- -------------- ---- --------- --------- ------ ------------------------ ------------------- -- ------ -- - - ------ ------- ----展开代码
以上代码演示了如何在 React 中使用 react-mic-2 实现录音。通过点击按钮来控制开始和停止录音，并通过实现 onStop 回调函数来获取录制的音频数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b49c6eb7e50355dbfa4
