react audio recorder

React-Audio-Voice-Recorder

Um ajudante de gravação de áudio para reagir. Fornece um componente e um gancho para ajudar na gravação de áudio.

Instalação

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

Migrando de v1 → v2

Quebrando mudanças

• Em V2, o AudioRecorder Prop downloadFileExtension não suporta mais mp3 e wav sem o site usando este pacote sendo isolado de origem cruzada. Essa alteração foi feita para corrigir a edição 54 na v1.2.1

Uso

Componente AudiorEcorder (veja -o em ação)

Você pode usar um componente pronto para uso que toma o método onRecordingComplete como um suporte e o chama quando você salva a gravação

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

Adereços	Descrição	Padrão	Opcional
onRecordingComplete	Um método que é chamado quando a opção "Salvar gravação" é pressionada	N / D	Sim
audioTrackConstraints	Pega um subconjunto de MediaTrackConstraints que se aplicam à faixa de áudio	N / D	Sim
onNotAllowedOrFound	Isso é chamado quando a promessa getUserMedia é rejeitada. É necessário a DOMException resultante como seu parâmetro	N / D	Sim
downloadOnSavePress	Um valor boolean que determina se a gravação deve ser baixada quando a opção "Salvar gravação" é pressionada	false	Sim
downloadFileExtension	A extensão do arquivo a ser usada para o arquivo baixado. Os valores permitidos são webm , mp3 e wav . Para usar mp3 ou wav , verifique se o seu site está isolado de origem cruzada. Leitura adicional	webm	Sim
showVisualizer	Exibe uma visualização da forma de onda para o áudio quando definido como true	false	Sim
classes	Isso permite que os nomes de classe sejam passados para modificar os estilos para todo o componente ou partes específicas dele	N / D	Sim

Nota: Para que o download de mp3 e wav funcione corretamente, seu site precisa ser isolado de origem cruzada. Isso é necessário porque este pacote usa o FFMPEG que usa internamente SharedArrayBuffer que requer isolamento de origem cruzada

---

UseaudiorEcorder Hook

Se você preferir construir sua própria interface do usuário, mas aproveite a implementação fornecida por este pacote, você pode usar esse gancho em vez do componente

Params	Descrição	Opcional
audioTrackConstraints	Pega um subconjunto de MediaTrackConstraints que se aplicam à faixa de áudio	Sim
onNotAllowedOrFound	Isso é chamado quando a promessa getUserMedia é rejeitada. É necessário a DOMException resultante como seu parâmetro	Sim

O gancho retorna o seguinte:

Identificadores	Descrição
startRecording	Invocar esse método inicia a gravação. Define isRecording para true
stopRecording	A invocação deste método interrompe a gravação em andamento e o áudio resultante é disponibilizado no recordingBlob . Define isRecording para false
togglePauseResume	Invocar esse método pausaria a gravação se estiver em execução ou retomar se for pausado. Alterna o valor isPaused
recordingBlob	Esta é a bolha de gravação que é criada após stopRecording ter sido chamado
isRecording	Um valor booleano que representa se uma gravação está atualmente em andamento
isPaused	Um valor booleano que representa se uma gravação em andamento é interrompida
recordingTime	Número de segundos que a gravação continuou. Isso é atualizado a cada segundo
mediaRecorder	O atual mediarecorder em uso. Pode ser indefinido no caso de gravar não estar em andamento

Amostra de uso do gancho

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

---

Combine o gancho useAudioRecorder e o componente AudioRecorder

Isto é para cenários em que você gostaria de controlar o componente AudioRecorder de fora do componente. Você pode chamar o useAudioRecorder e passar o objeto que ele retorna aos recorderControls do AudioRecorder . Isso permitiria controlar o componente AudioRecorder de fora do componente também

Uso de amostra (veja em ação)

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

Nota: Ao usar AudioRecorder e useAudioRecorder em combinação, o audioTrackConstraints e onNotAllowedOrFound devem ser fornecidos no gancho useAudioRecorder