react audio recorder

React-Audio-Voice-Recorder

مساعد تسجيل الصوت للرد. يوفر مكونًا وخطافًا للمساعدة في تسجيل الصوت.

تثبيت

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

ترحيل من V1 → V2

كسر التغييرات

• في V2 ، لم يعد AudioRecorder Prop downloadFileExtension يدعم mp3 و wav دون استخدام موقع الويب الخاص بهذه الحزمة المعزولة. تم إجراء هذا التغيير من أجل إصلاح المشكلة رقم 54 في v1.2.1

الاستخدام

مكون AudioreCorder (تراه في العمل)

يمكنك استخدام مكون خارج الصندوق يأخذ طريقة onRecordingComplete كدعم وتدعوها عند حفظ التسجيل

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

الدعائم	وصف	تقصير	خياري
onRecordingComplete	طريقة يتم استدعاؤها عند الضغط على خيار "حفظ التسجيل"	ن/أ	نعم
audioTrackConstraints	يأخذ مجموعة فرعية من MediaTrackConstraints التي تنطبق على المسار الصوتي	ن/أ	نعم
onNotAllowedOrFound	يتم استدعاء هذا عندما يتم رفض وعد getUserMedia . يستغرق الأمر DOMException كمعلمة لها	ن/أ	نعم
downloadOnSavePress	قيمة boolean تحدد ما إذا كان ينبغي تنزيل التسجيل عند الضغط على خيار "حفظ التسجيل"	false	نعم
downloadFileExtension	تمديد الملف المراد استخدامه للملف الذي تم تنزيله. القيم المسموح بها هي webm و mp3 و wav . من أجل استخدام mp3 أو wav ، يرجى التأكد من عزل موقع الويب الخاص بك. مزيد من القراءة	webm	نعم
showVisualizer	يعرض تصور الموجي للصوت عند ضبطه على true	false	نعم
classes	يتيح هذا تمرير أسماء الفصول لتعديل الأنماط للمكون بالكامل أو أجزاء محددة منه	ن/أ	نعم

ملاحظة: من أجل تنزيل mp3 و wav للعمل بشكل صحيح ، يجب عزل موقع الويب الخاص بك. هذا ضروري لأن هذه الحزمة تستخدم FFMPEG التي تستخدم داخليًا SharedArrayBuffer

---

ateaureioreCorder هوك

إذا كنت تفضل إنشاء واجهة المستخدم الخاصة بك ولكن الاستفادة من التنفيذ المقدم من هذه الحزمة ، فيمكنك استخدام هذا الخطاف بدلاً من المكون

params	وصف	خياري
audioTrackConstraints	يأخذ مجموعة فرعية من MediaTrackConstraints التي تنطبق على المسار الصوتي	نعم
onNotAllowedOrFound	يتم استدعاء هذا عندما يتم رفض وعد getUserMedia . يستغرق الأمر DOMException كمعلمة لها	نعم

يعيد الخطاف ما يلي:

المعرفات	وصف
startRecording	استدعاء هذه الطريقة يبدأ التسجيل. يحدد isRecording إلى true
stopRecording	إن استدعاء هذه الطريقة يوقف التسجيل قيد التقدم ويتم توفير الصوت الناتج في recordingBlob . يضع isRecording على false
togglePauseResume	من شأن استدعاء هذه الطريقة إيقاف التسجيل إذا كان يعمل أو يستأنف حاليًا إذا تم إيقافه مؤقتًا. تبديل القيمة isPaused
recordingBlob	هذه هي نقطة التسجيل التي تم إنشاؤها بعد استدعاء stopRecording
isRecording	قيمة منطقية تمثل ما إذا كان التسجيل قيد التقدم حاليًا
isPaused	قيمة منطقية تمثل ما إذا كان التسجيل قيد التقدم قد توقف مؤقتًا
recordingTime	عدد الثواني التي استمر التسجيل. يتم تحديث هذا كل ثانية
mediaRecorder	MediArecorder الحالي في الاستخدام. يمكن أن يكون غير محدد في حالة التسجيل غير قيد التقدم

عينة استخدام الخطاف

  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

هذا للسيناريوهات حيث ترغب في التحكم في مكون AudioRecorder من خارج المكون. يمكنك استدعاء useAudioRecorder وتمرير الكائن الذي يعود إليه إلى recorderControls من AudioRecorder . سيمكنك ذلك من التحكم في مكون AudioRecorder من خارج المكون أيضًا

استخدام العينة (انظر في العمل)

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

ملاحظة: عند استخدام كل من AudioRecorder و useAudioRecorder مجتمعة ، يجب توفير audioTrackConstraints و onNotAllowedOrFound في خطاف useAudioRecorder