react audio recorder

React-Audio-Voice-Recorder

Ein Audio -Aufnahmehelfer für React. Bietet eine Komponente und einen Haken, um die Audioaufzeichnung zu unterstützen.

Installation

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

Migrieren von v1 → v2

Veränderungen brechen

• In V2 unterstützt der AudioRecorder Prop- downloadFileExtension mp3 und wav nicht mehr, ohne dass die Website dieses Paket mit dem Cross-Origin isoliert ist. Diese Änderung wurde vorgenommen, um Ausgabe Nr. 54 in v1.2.1 zu beheben

Verwendung

AudioreCorder -Komponente (siehe in Aktion)

Sie können eine außergewöhnliche Komponente verwenden, die die Methode onRecordingComplete als Requisite aufnimmt, und ruft sie beim Speichern der Aufzeichnung auf

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

Requisiten	Beschreibung	Standard	Optional
onRecordingComplete	Eine Methode, die aufgerufen wird, wenn die Option "Aufnahme speichern" gedrückt wird	N / A	Ja
audioTrackConstraints	Nimmt eine Untergruppe von MediaTrackConstraints , die für den Audiospur gelten	N / A	Ja
onNotAllowedOrFound	Dies wird aufgerufen, wenn das Versprechen getUserMedia abgelehnt wird. Es nimmt die resultierende DOMException als Parameter an	N / A	Ja
downloadOnSavePress	Ein boolean Wert, der feststellt	false	Ja
downloadFileExtension	Die Dateierweiterung soll für die heruntergeladene Datei verwendet werden. Zugelassene Werte sind webm , mp3 und wav . Um mp3 oder wav zu verwenden, stellen Sie bitte sicher, dass Ihre Website mit dem ORIGIN isoliert ist. Weitere Lesen	webm	Ja
showVisualizer	Zeigt eine Wellenformvisualisierung für das Audio true	false	Ja
classes	Auf diese Weise können Klassennamen übergeben werden, um die Stile für die gesamte Komponente oder bestimmte Teile davon zu ändern	N / A	Ja

Hinweis: Damit mp3 und wav -Download ordnungsgemäß funktioniert, muss Ihre Website übereinstimmend sein. Dies ist notwendig, da dieses Paket FFMPEG verwendet, bei dem SharedArrayBuffer intern verwendet wird

---

UseAudioreCorder -Haken

Wenn Sie es vorziehen, Ihre eigene Benutzeroberfläche aufzubauen, aber die von diesem Paket bereitgestellte Implementierung nutzen, können Sie diesen Haken anstelle der Komponente verwenden

Parameter	Beschreibung	Optional
audioTrackConstraints	Nimmt eine Untergruppe von MediaTrackConstraints , die für den Audiospur gelten	Ja
onNotAllowedOrFound	Dies wird aufgerufen, wenn das Versprechen getUserMedia abgelehnt wird. Es nimmt die resultierende DOMException als Parameter an	Ja

Der Haken gibt Folgendes zurück:

Kennungen	Beschreibung
startRecording	Das Aufrufen dieser Methode startet die Aufnahme. Setzt isRecording auf true
stopRecording	Das Aufrufen dieser Methode stoppt die Aufzeichnung in Arbeit und das resultierende Audio wird in recordingBlob zur Verfügung gestellt. Setzt isRecording auf false
togglePauseResume	Das Aufrufen dieser Methode würde die Aufnahme pausieren, wenn sie derzeit ausgeführt wird oder wieder aufgenommen wird, wenn sie angehalten wird. Wechselt den Wert, den der Wert isPaused
recordingBlob	Dies ist der Aufnahme -Blob, der nach dem Aufnehmen stopRecording erstellt wurde
isRecording	Ein boolescher Wert, der darstellt, ob eine Aufnahme derzeit in Arbeit ist
isPaused	Ein boolescher Wert, der darstellt, ob eine laufende Aufnahme angehalten wird
recordingTime	Anzahl der Sekunden, die die Aufnahme abgelaufen ist. Dies wird jede Sekunde aktualisiert
mediaRecorder	Der aktuelle Mediarecorder verwendete. Kann nicht definiert werden, wenn die Aufzeichnung nicht im Gange ist

Probenverbrauch von Haken

  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

Dies gilt für Szenarien, in denen Sie die AudioRecorder -Komponente von außerhalb der Komponente steuern möchten. Sie können den useAudioRecorder anrufen und das Objekt übergeben, das es an die recorderControls des AudioRecorder zurückkehrt. Auf diese Weise können Sie auch die Komponente AudioRecorder von außerhalb der Komponente steuern

Beispielverwendung (siehe in Aktion)

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

Hinweis audioTrackConstraints Wenn onNotAllowedOrFound sowohl AudioRecorder als auch useAudioRecorder useAudioRecorder Kombination verwenden