react audio recorder

react-audio-voice-recorder

Une aide à enregistrement audio pour React. Fournit un composant et un crochet pour aider à l'enregistrement audio.

Installation

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

Migrant de v1 → v2

Changements de rupture

• Dans V2, le AudioRecorder Prop downloadFileExtension ne prend plus en charge mp3 et wav sans le site Web en utilisant ce package isolé d'origine croisée. Cette modification a été apportée afin de résoudre le problème n ° 54 dans V1.2.1

Usage

Composant audioreCrorder (voir en action)

Vous pouvez utiliser un composant prêt à l'emploi qui prend la méthode onRecordingComplete comme un accessoire et l'appelle lorsque vous enregistrez l'enregistrement

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

Accessoires	Description	Défaut	Facultatif
onRecordingComplete	Une méthode qui est appelée lorsque l'option "Enregistrer l'enregistrement" est enfoncée	N / A	Oui
audioTrackConstraints	Prend un sous-ensemble de MediaTrackConstraints qui s'appliquent à la piste audio	N / A	Oui
onNotAllowedOrFound	Cela est appelé lorsque la promesse getUserMedia est rejetée. Il prend la DOMException résultante comme paramètre	N / A	Oui
downloadOnSavePress	Une valeur boolean qui détermine si l'enregistrement doit être téléchargé lorsque l'option "Enregistrer l'enregistrement" est enfoncée	false	Oui
downloadFileExtension	L'extension de fichier à utiliser pour le fichier téléchargé. Les valeurs autorisées sont webm , mp3 et wav . Afin d'utiliser mp3 ou wav , veuillez vous assurer que votre site Web est isolé d'origine transversale. Dès la lecture	webm	Oui
showVisualizer	Affiche une visualisation de la forme d'onde pour l'audio lorsqu'il est défini sur true	false	Oui
classes	Cela permet de passer les noms de classe pour modifier les styles de l'ensemble du composant ou des parties spécifiques de celui-ci	N / A	Oui

Remarque: Pour que le téléchargement mp3 et wav fonctionne correctement, votre site Web doit être isolé d'origine croisée. Ceci est nécessaire car ce package utilise FFMPEG qui utilise en interne SharedArrayBuffer qui nécessite une isolation croisée

---

Hook UseAudioreCrorder

Si vous préférez construire votre propre interface utilisateur mais profitez de l'implémentation fournie par ce package, vous pouvez utiliser ce crochet au lieu du composant

Paramètres	Description	Facultatif
audioTrackConstraints	Prend un sous-ensemble de MediaTrackConstraints qui s'appliquent à la piste audio	Oui
onNotAllowedOrFound	Cela est appelé lorsque la promesse getUserMedia est rejetée. Il prend la DOMException résultante comme paramètre	Oui

Le crochet renvoie ce qui suit:

Identificateurs	Description
startRecording	Invoquer cette méthode démarre l'enregistrement. isRecording la true
stopRecording	Invoquer cette méthode arrête l'enregistrement en cours et l'audio résultant est mis à disposition dans recordingBlob . isRecording le false
togglePauseResume	L'invocation de cette méthode en pause en pause si elle s'exécute actuellement ou reprendrait si elle est interrompue. Bascule la valeur isPaused
recordingBlob	Ceci est le blob d'enregistrement qui est créé après stopRecording a été appelé
isRecording	Une valeur booléenne qui représente si un enregistrement est actuellement en cours
isPaused	Une valeur booléenne qui représente si un enregistrement en cours est interrompu
recordingTime	Nombre de secondes sur lesquelles l'enregistrement a continué. Ceci est mis à jour chaque seconde
mediaRecorder	Le médiaReCorde actuel utilisé. Peut être indéfini dans le cas où l'enregistrement n'est pas en cours

Échantillon d'utilisation de Hook

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

---

Combinez le crochet useAudioRecorder et le composant AudioRecorder

Ceci est pour les scénarios où vous souhaitez contrôler le composant AudioRecorder depuis l'extérieur du composant. Vous pouvez appeler le useAudioRecorder et transmettre l'objet qu'il retourne au recorderControls la réception de l' AudioRecorder . Cela vous permettrait de contrôler également le composant AudioRecorder de l'extérieur du composant

Exemple d'utilisation (voir en action)

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

Remarque: Lorsque vous utilisez à la fois AudioRecorder et useAudioRecorder en combinaison, les audioTrackConstraints et onNotAllowedOrFound doivent être fournies dans le crochet useAudioRecorder