在前端开发中，我们经常需要录制音频，并将其应用到我们的项目中。在这篇文章中，我们将详细介绍如何使用 npm 包 react-audio-recorder-knta 来实现录制音频，并将其应用到我们的项目中。
安装 react-audio-recorder-knta
首先，我们需要通过 npm 来安装 react-audio-recorder-knta：
npm install react-audio-recorder-knta --save
使用 react-audio-recorder-knta
接下来，我们将演示如何在 React 应用程序中使用 react-audio-recorder-knta 来录制音频。
导入 react-audio-recorder-knta
首先，在您的 React 组件中导入 react-audio-recorder-knta：
import React from 'react'; import AudioRecorder from 'react-audio-recorder-knta';
渲染 AudioRecorder 组件
要在 React 应用程序中使用 react-audio-recorder-knta，请在组件中使用 AudioRecorder 组件进行渲染：
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ ------
-------- ----
--
-
-------- -
------ -
-----
--------------
------------------- -- --------------- ------- ---
----------- -- --------------- ------------ ---- ---
---------- -- --------------- ------------ ----- ---
--
------
--
-
-
------ ------- ----上述代码中，我们创建了一个 App 组件，并在 render 函数中操作了 AudioRecorder 组件。我们还声明了一个 state 对象，用于跟踪录音是否处于活动状态以及录制结束后的音频 URL。
开始和停止录音
我们可以通过 AudioRecorder 组件的 onStart 和 onStop 回调函数来启动和停止录音。当录音开始时，isRecording 状态将被设置为 true，当录音停止时，isRecording 状态将被设置为 false。
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ ------
-------- ----
--
-
-------- -
------ -
-----
--------------
------------------- -- --------------- ------- ---
----------- -- --------------- ------------ ---- ---
---------- -- --------------- ------------ ----- ---
--
-----
------- -----------------------------------------------
------- ------------------------------------------------
------
------
--
-
-
------ ------- ----上述代码中，我们在组件中添加了一个按钮，用于启动和停止录音。
获取录音结果
在上面的示例中，我们定义了一个 blobURL 状态对象来跟踪录音文件的 URL。当录音完成并准备好时，该 URL 将通过 onComplete 回调函数返回。在 onComplete 回调函数中，我们将 blobURL 设置为组件的状态。
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ ------
-------- ----
--
-
-------- -
------ -
-----
--------------
------------------- -- --------------- ------- ---
----------- -- --------------- ------------ ---- ---
---------- -- --------------- ------------ ----- ---
--
-----
------- -----------------------------------------------
------- ------------------------------------------------
------
------------------- -- -
-----
------ ------------------------ -------- --
------
--
------
--
-
-
------ ------- ----上述代码中，我们更新了组件的 render() 函数，在已经获取到 blobURL 的情况下通过 audio 标签渲染出播放器。
总结
通过本文，我们学习了如何使用 npm 包 react-audio-recorder-knta 来实现录制音频，并将其应用到我们的项目中。通过上面的示例，我们不仅仅可以掌握如何在 React 应用程序中使用 react-audio-recorder-knta，还可以学习到如何获取录制音频的结果，并将其在应用程序中播放。
如果你在音频录制方面遇到了问题，react-audio-recorder-knta 能够提供很好的技术支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607381e8991b448de9c2