react audio recorder

React-Audio-Voice-RECORDER

Un ayudante de grabación de audio para React. Proporciona un componente y un gancho para ayudar con la grabación de audio.

Instalación

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

Migrar de V1 → V2

Cambios de ruptura

• En V2, la descarga AudioRecorder downloadFileExtension ya no admite mp3 y wav sin que el sitio web use este paquete aislado de origen cruzado. Este cambio se realizó para solucionar el problema #54 en V1.2.1

Uso

Componente AudiorCorder (verlo en acción)

Puede usar un componente listo para usar que tome el método onRecordingComplete como un accesorio y lo llama cuando guarda la grabación

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

Accesorios	Descripción	Por defecto	Opcional
onRecordingComplete	Se presiona un método que se llama cuando se presiona la opción "Guardar grabación"	N / A	Sí
audioTrackConstraints	Toma un subconjunto de MediaTrackConstraints que se aplican a la pista de audio	N / A	Sí
onNotAllowedOrFound	Esto se llama cuando se rechaza la promesa getUserMedia . Se necesita la DOMException resultante como su parámetro	N / A	Sí
downloadOnSavePress	Un valor boolean que determina si la grabación debe descargarse cuando se presiona la opción "Guardar grabación"	false	Sí
downloadFileExtension	La extensión del archivo se utilizará para el archivo descargado. Los valores permitidos son webm , mp3 y wav . Para usar mp3 o wav , asegúrese de que su sitio web esté aislado de origen cruzado. Lectura adicional	webm	Sí
showVisualizer	Muestra una visualización de forma de onda para el audio cuando se establece en true	false	Sí
classes	Esto permite que los nombres de clases se pasen para modificar los estilos para todo el componente o porciones específicas de la misma.	N / A	Sí

Nota: Para que la descarga de mp3 y wav funcione correctamente, su sitio web debe estar aislado de origen cruzado. Esto es necesario porque este paquete utiliza FFMPEG que usa internamente SharedArrayBuffer que requiere aislamiento de origen cruzado

---

gancho de USEAUDIORECORDER

Si prefiere construir su propia interfaz de usuario, pero aproveche la implementación proporcionada por este paquete, puede usar este gancho en lugar del componente

Parámetros	Descripción	Opcional
audioTrackConstraints	Toma un subconjunto de MediaTrackConstraints que se aplican a la pista de audio	Sí
onNotAllowedOrFound	Esto se llama cuando se rechaza la promesa getUserMedia . Se necesita la DOMException resultante como su parámetro	Sí

El gancho devuelve lo siguiente:

Identificadores	Descripción
startRecording	Invocar este método inicia la grabación. Establece isRecording a true
stopRecording	Invocar este método detiene la grabación en progreso y el audio resultante se pone a disposición en recordingBlob . Establece isRecording en false
togglePauseResume	Invocar este método pausaría la grabación si actualmente se está ejecutando o reanudará si se detiene. Alternar el valor isPaused
recordingBlob	Este es el blob de grabación que se crea después de que se haya llamado stopRecording
isRecording	Un valor booleano que representa si una grabación está actualmente en progreso
isPaused	Un valor booleano que representa si se detiene una grabación en progreso
recordingTime	Número de segundos que ha continuado la grabación. Esto se actualiza cada segundo
mediaRecorder	El MediareCorder actual en uso. Puede ser indefinido en caso de que la grabación no esté en progreso

Muestra de uso de 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 el gancho useAudioRecorder y el componente AudioRecorder

Esto es para escenarios en los que desea controlar el componente AudioRecorder desde fuera del componente. Puede llamar al useAudioRecorder y pasar el objeto que regresa al recorderControls de AudioRecorder . Esto le permitiría controlar el componente AudioRecorder desde fuera del componente también

Uso de la muestra (verlo en acción)

 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: Cuando se usa AudioRecorder y useAudioRecorder en combinación, el audioTrackConstraints y onNotAllowedOrFound deben proporcionarse en el gancho useAudioRecorder