react audio recorder下载 - react audio recorder源代码下载

react audio recorder

Ai源码

2.2.0

下载

React-Adio-Voice Recorder

录音辅助辅助器的反应。提供一个组件和钩子来帮助录音。

安装

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

从V1→V2迁移

打破变化

在V2中， AudioRecorder Prop downloadFileExtension不再支持mp3和wav而没有网站使用该软件包隔离。进行了此更改，以解决v1.2.1中的第54条问题。

用法

AudioreCorder组件（请参阅行动中）

您可以使用将onRecordingComplete方法作为Prop的开箱即用组件，并在保存录音时称呼它

 import React from "react" ;
import ReactDOM from "react-dom/client" ;
import { AudioRecorder } from 'react-audio-voice-recorder' ;

const addAudioElement = ( blob ) => {
  const url = URL . createObjectURL ( blob ) ;
  const audio = document . createElement ( "audio" ) ;
  audio . src = url ;
  audio . controls = true ;
  document . body . appendChild ( audio ) ;
} ;

ReactDOM . createRoot ( document . getElementById ( "root" ) ) . render (
  < React . StrictMode >
    < AudioRecorder 
      onRecordingComplete = { addAudioElement }
      audioTrackConstraints = { {
        noiseSuppression : true ,
        echoCancellation : true ,
      } } 
      downloadOnSavePress = { true }
      downloadFileExtension = "webm"
    />
  </ React . StrictMode >
) ;

道具	描述	默认	选修的
`onRecordingComplete`	按下“保存记录”选项时被调用的方法	N/A。	是的
`audioTrackConstraints`	采用适用于音轨的`MediaTrackConstraints`的子集	N/A。	是的
`onNotAllowedOrFound`	当`getUserMedia`承诺被拒绝时，这将被调用。它将结果的`DOMException`视为其参数	N/A。	是的
`downloadOnSavePress`	按下“保存记录”选项时是否应下载录制的`boolean`值	`false`	是的
`downloadFileExtension`	用于下载文件的文件扩展名。允许的值是`webm` ， `mp3`和`wav` 。为了使用`mp3`或`wav` ，请确保您的网站隔离隔离。进一步阅读	`webm`	是的
`showVisualizer`	在设置为`true`时，显示音频的波形可视化	`false`	是的
`classes`	这允许传递班级名称以修改整个组件或特定部分的样式	N/A。	是的

注意：为了使mp3和wav下载正常工作，您的网站需要隔离隔离。这是必要的，因为此软件包使用FFMPEG，该ffmpeg使用内部使用SharedArrayBuffer ，需要交叉隔离

Useaudiorecorder钩子

如果您希望建立自己的UI，但要利用此软件包提供的实现，则可以使用此挂钩而不是组件

参数	描述	选修的
`audioTrackConstraints`	采用适用于音轨的`MediaTrackConstraints`的子集	是的
`onNotAllowedOrFound`	当`getUserMedia`承诺被拒绝时，这将被调用。它将结果的`DOMException`视为其参数	是的

钩子返回以下内容：

标识符	描述
`startRecording`	调用此方法开始录制。 `isRecording`为`true`
`stopRecording`	调用此方法停止录制正在进行中，并在`recordingBlob`中提供结果的音频。 `isRecording`为`false`
`togglePauseResume`	如果录音暂停，则调用此方法将暂停该录制。 `isPaused`值
`recordingBlob`	这是在调用`stopRecording`后创建的录制斑点
`isRecording`	布尔值表示当前是否正在进行录制
`isPaused`	布尔值表示是否暂停了正在进行的录制
`recordingTime`	录音已经进行的秒数。每秒都会更新
`mediaRecorder`	当前正在使用的Mediarecorder。如果录制不进行，则可能是不确定的

样品使用挂钩

  import { useAudioRecorder } from 'react-audio-voice-recorder' ;
  // ...
  // ...
  const {
    startRecording ,
    stopRecording ,
    togglePauseResume ,
    recordingBlob ,
    isRecording ,
    isPaused ,
    recordingTime ,
    mediaRecorder
  } = useAudioRecorder ( ) ;

  useEffect ( ( ) => {
    if ( ! recordingBlob ) return ;

    // recordingBlob will be present at this point after 'stopRecording' has been called
  } , [ recordingBlob ] )

结合使用`useAudioRecorder`钩子和`AudioRecorder`组件

这是针对您希望从组件外部控制AudioRecorder组件的方案。您可以调用useAudioRecorder ，并将其返回的对象传递给AudioRecorder的recorderControls 。这将使您还可以从组件外部控制AudioRecorder组件

示例用法（请参阅行动中）

 import { AudioRecorder , useAudioRecorder } from 'react-audio-voice-recorder' ;

const ExampleComponent = ( ) => {
  const recorderControls = useAudioRecorder ( )
  const addAudioElement = ( blob ) => {
    const url = URL . createObjectURL ( blob ) ;
    const audio = document . createElement ( "audio" ) ;
    audio . src = url ;
    audio . controls = true ;
    document . body . appendChild ( audio ) ;
  } ;

  return (
    < div >
      < AudioRecorder 
        onRecordingComplete = { ( blob ) => addAudioElement ( blob ) }
        recorderControls = { recorderControls }
      />
      < button onClick = { recorderControls . stopRecording } > Stop recording </ button >
    </ div >
  )
}