npm 包 uploadable-react-audio-recorder 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

uploadable-react-audio-recorder 是一个基于 React 的录音上传组件，通过该组件，用户可以在网页上进行录音，并可将录音文件直接上传至服务器。使用该组件，需要事先安装 Node.js 和 npm。

安装

可以通过以下命令进行安装：

npm install uploadable-react-audio-recorder --save

使用

导入

在需要使用 uploadable-react-audio-recorder 的组件中，可以通过以下代码进行导入：

import AudioRecorder from 'uploadable-react-audio-recorder';

组件代码

以下是 uploadable-react-audio-recorder 组件的示例代码：

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- ----------------------------------

-------- ----- -
  ----- ------- --------- - -----------

  ------ -
    -----
      -------------- --------------------- --
      ------- ----------- -- ----------------------- ----- ---------------
      ------- ----------- -- -------------------------------------------- ----- ------------
      ------ -------- -------------------------------- --
    ------
  --
-

------ ------- ----

在上述代码中，通过将 setState 函数 setAudio 传递给 onComplete 属性，可以在录音完成时获取到录音文件，将其存储在 audio 变量中。在此示例代码中，将 audio 变量赋值给 <audio> 元素的 src 属性，从而可以直接在网页上播放录音。

interface Audio {
  blob: Blob,
  duration: number,
  mimeType: string,
  audioBase64: string,
}

参数

以下是 AudioRecorder 组件的可配置属性：

属性	类型	描述	默认值
`onComplete`	`React.Dispatch<React.SetStateAction<Audio>>`	用于在录音完成时处理录音文件的回调	-
`onError`	`(error: string) => void`	当录音出现错误时调用的回调	-
`mimeType`	`string`	录音文件的 MIME 类型，例如 `audio/wav`	`audio/mp3`
`config`	`RecorderConfig`	用于配置录音参数的对象	-

RecorderConfig 类型的对象包含以下属性：

属性	类型	描述	默认值
`audioBitsPerSecond`	`number`	每秒钟录制的音频位数	128000
`videoBitsPerSecond`	`number`	每秒钟录制的视频位数	128000
`bitsPerSecond`	`number`	每秒钟录制的总数据位数（包括音频和视频）	`audioBitsPerSecond + videoBitsPerSecond`
`audioQuality`	`'lowest' \| 'low' \| 'medium' \| 'high' \| 'highest'`	录音的音频质量	`'medium'`

示例

示例代码可以在 GitHub 仓库中查看。

结语

通过本文，您已经了解了如何安装和使用 uploadable-react-audio-recorder 组件。该组件是一种快速集成录音上传功能的解决方案，具有较高的自定义性。希望本文对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005674181e8991b448e3c61