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 >
  )
}