react audio recorder

react-audio-voice-recorder

Pembantu perekaman audio untuk bereaksi. Memberikan komponen dan kait untuk membantu perekaman audio.

Instalasi

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

Bermigrasi dari V1 → V2

Melanggar perubahan

• Dalam v2 AudioRecorder Prop downloadFileExtension tidak lagi mendukung mp3 dan wav tanpa situs web menggunakan paket ini yang diisolasi silang. Perubahan ini dilakukan untuk memperbaiki masalah #54 di v1.2.1

Penggunaan

Komponen Audiorecorder (melihatnya beraksi)

Anda dapat menggunakan komponen out-of-the-box yang mengambil metode onRecordingComplete sebagai prop dan memanggilnya saat Anda menyimpan perekaman

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

Alat peraga	Keterangan	Bawaan	Opsional
onRecordingComplete	Metode yang dipanggil saat opsi "simpan perekaman" ditekan	N/a	Ya
audioTrackConstraints	Mengambil subset dari MediaTrackConstraints yang berlaku untuk trek audio	N/a	Ya
onNotAllowedOrFound	Ini dipanggil ketika janji getUserMedia ditolak. Dibutuhkan DOMException yang dihasilkan sebagai parameternya	N/a	Ya
downloadOnSavePress	Nilai boolean yang menentukan apakah perekaman harus diunduh saat opsi "simpan perekaman" ditekan	false	Ya
downloadFileExtension	Ekstensi file yang akan digunakan untuk file yang diunduh. Nilai yang diizinkan adalah webm , mp3 dan wav . Untuk menggunakan mp3 atau wav , harap pastikan bahwa situs web Anda terisolasi silang. Bacaan lebih lanjut	webm	Ya
showVisualizer	Menampilkan visualisasi bentuk gelombang untuk audio saat diatur ke true	false	Ya
classes	Ini memungkinkan nama kelas diteruskan untuk memodifikasi gaya untuk seluruh komponen atau bagian tertentu dari itu	N/a	Ya

Catatan: Agar mp3 dan wav mengunduh untuk bekerja dengan baik, situs web Anda harus diisolasi silang. Ini diperlukan karena paket ini menggunakan FFMPEG yang secara internal menggunakan SharedArrayBuffer yang membutuhkan isolasi lintas asal

---

UseAudiorecorder Hook

Jika Anda lebih suka membangun UI Anda sendiri tetapi memanfaatkan implementasi yang disediakan oleh paket ini, Anda dapat menggunakan kait ini alih -alih komponen

Params	Keterangan	Opsional
audioTrackConstraints	Mengambil subset dari MediaTrackConstraints yang berlaku untuk trek audio	Ya
onNotAllowedOrFound	Ini dipanggil ketika janji getUserMedia ditolak. Dibutuhkan DOMException yang dihasilkan sebagai parameternya	Ya

Kait mengembalikan yang berikut:

Pengidentifikasi	Keterangan
startRecording	Memanggil metode ini memulai rekaman. Mengatur isRecording ke true
stopRecording	Memanggil metode ini menghentikan rekaman yang sedang berlangsung dan audio yang dihasilkan tersedia di recordingBlob . Mengatur isRecording ke false
togglePauseResume	Memanggil metode ini akan menjeda rekaman jika saat ini berjalan atau melanjutkan jika dijeda. Mengubah nilai isPaused
recordingBlob	Ini adalah gumpalan rekaman yang dibuat setelah stopRecording disebut
isRecording	Nilai boolean yang mewakili apakah rekaman saat ini sedang berlangsung
isPaused	Nilai boolean yang mewakili apakah rekaman yang sedang berlangsung dijeda
recordingTime	Jumlah detik yang direkam telah berlangsung. Ini diperbarui setiap detik
mediaRecorder	MediaRecorder saat ini digunakan. Dapat tidak terdefinisi dalam kasus perekaman tidak sedang berlangsung

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

---

Gabungkan hook useAudioRecorder dan komponen AudioRecorder

Ini untuk skenario di mana Anda ingin mengontrol komponen AudioRecorder dari luar komponen. Anda dapat menghubungi useAudioRecorder dan meneruskan objek yang dikembalikan ke recorderControls AudioRecorder . Ini akan memungkinkan Anda untuk mengontrol komponen AudioRecorder dari luar komponen juga

Penggunaan Sampel (melihatnya beraksi)

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

CATATAN: Saat menggunakan AudioRecorder dan useAudioRecorder dalam kombinasi, audioTrackConstraints dan onNotAllowedOrFound harus disediakan di Hook useAudioRecorder Hook