react audio recorderダウンロード - react audio recorderソースコードのダウンロード

react audio recorder

AI ソースコード

2.2.0

ダウンロード

React-Audio-Voice-Recorder

Reactのオーディオ録音ヘルパー。オーディオ録音を支援するコンポーネントとフックを提供します。

インストール

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

V1→V2からの移動

変化を破る

V2では、 AudioRecorder小道具downloadFileExtension 、このパッケージをクロスオリジン分離していることを使用してWebサイトなしでmp3とwavをサポートしなくなりました。この変更は、v1.2.1で発行＃54を修正するために行われました

使用法

audiorecorderコンポーネント（実際にアクションを参照）

onRecordingCompleteメソッドをプロップとして取得し、録音を保存するときにそれを呼び出すために、すぐにボックスのコンポーネントを使用できます

 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ダウンロードを適切に機能させるには、Webサイトをクロスオリジン分離する必要があります。このパッケージは、クロスオリジン分離を必要とするSharedArrayBufferを内部的に使用するFFMPEGを使用するため、これが必要です。

useaudiorecorderフック

独自のUIを構築したいが、このパッケージが提供する実装を活用する場合は、コンポーネントの代わりにこのフックを使用できます

パラメージ	説明	オプション
`audioTrackConstraints`	オーディオトラックに適用される`MediaTrackConstraints`のサブセットを取ります	はい
`onNotAllowedOrFound`	これは`getUserMedia`約束が拒否されたときに呼び出されます。結果として生じる`DOMException`をパラメーターとして使用します	はい

フックは次のものを返します：

識別子	説明
`startRecording`	この方法を呼び出すと、録音が開始されます。セットは`true`に`isRecording`
`stopRecording`	このメソッドを呼び出すと、録音が進行中に停止し、結果のオーディオが`recordingBlob`で利用可能になります。セットは`false`に`isRecording`
`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 >
  )
}