react audio recorder

React-Audio-Voice-Recorder

React의 오디오 녹음 도우미. 오디오 녹음에 도움이되는 구성 요소와 후크를 제공합니다.

설치

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 메소드를 소품으로 가져 와서 레코딩을 저장할 때 호출하는 상자 외 구성 요소를 사용할 수 있습니다.

 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 다운로드가 올바르게 작동하려면 웹 사이트가 교차 오리핀을 분리해야합니다. 이 패키지는 Cross-Origin 분리가 필요한 SharedArrayBuffer 내부적으로 사용하는 FFMPEG를 사용하기 때문에 필요합니다.

---

useaudiorecorder 후크

자신의 UI를 구축하는 것을 선호하지만이 패키지에서 제공 한 구현을 활용하는 경우 구성 요소 대신이 후크를 사용할 수 있습니다.

매개 변수	설명	선택 과목
audioTrackConstraints	오디오 트랙에 적용되는 MediaTrackConstraints 의 하위 집합을 취합니다.	예
onNotAllowedOrFound	이것은 getUserMedia 약속이 거부 될 때 호출됩니다. 결과적인 DOMException 매개 변수로 취합니다	예

후크는 다음을 반환합니다.

식별자	설명
startRecording	이 방법을 호출하면 녹화가 시작됩니다. isRecording true 로 설정합니다
stopRecording	이 메소드를 호출하면 진행중인 녹화가 중지되고 결과 오디오는 recordingBlob 에서 사용할 수 있습니다. isRecording false 로 설정합니다
togglePauseResume	이 방법을 호출하면 현재 실행중인 경우 녹음이 일시 중지되거나 일시 중지 된 경우 이력서가 재개됩니다. isPaused 값을 전환합니다
recordingBlob	stopRecording 이 호출 된 후 생성 된 녹음 블로브입니다.
isRecording	녹음이 현재 진행 중인지 여부를 나타내는 부울 값
isPaused	진행중인 기록이 일시 중지되는지를 나타내는 부울 가치
recordingTime	녹음이 진행된 몇 초. 이것은 매 초마다 업데이트됩니다
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 Hook와 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 >
  )
}

참고 : AudioRecorder 및 useAudioRecorder 모두 사용하는 경우 audioTrackConstraints 및 onNotAllowedOrFound useAudioRecorder Hook에 제공해야합니다.