react audio recorder

React-Audio-Voice-recorder

ตัวช่วยบันทึกเสียงสำหรับ React จัดเตรียมส่วนประกอบและตะขอเพื่อช่วยในการบันทึกเสียง

การติดตั้ง

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	วิธีการที่ได้รับการเรียกเมื่อกดตัวเลือก "บันทึกการบันทึก"	N/A	ใช่
audioTrackConstraints	ใช้ชุดย่อยของ MediaTrackConstraints ที่ใช้กับแทร็กเสียง	N/A	ใช่
onNotAllowedOrFound	สิ่งนี้ได้รับการเรียกเมื่อสัญญา getUserMedia ถูกปฏิเสธ ต้องใช้ DOMException ผลลัพธ์เป็นพารามิเตอร์ของมัน	N/A	ใช่
downloadOnSavePress	ค่า boolean ที่กำหนดว่าควรดาวน์โหลดการบันทึกหรือไม่เมื่อกดตัวเลือก "บันทึกการบันทึก"	false	ใช่
downloadFileExtension	ส่วนขยายไฟล์ที่จะใช้สำหรับไฟล์ที่ดาวน์โหลด ค่าที่อนุญาตคือ webm , mp3 และ wav ในการใช้ mp3 หรือ wav โปรดตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณแยกจากต้นกำเนิด การอ่านเพิ่มเติม	webm	ใช่
showVisualizer	แสดงการสร้างภาพคลื่นสำหรับเสียงเมื่อตั้งค่าเป็น true	false	ใช่
classes	สิ่งนี้จะช่วยให้ชื่อคลาสได้รับการแก้ไขสไตล์สำหรับส่วนประกอบทั้งหมดหรือบางส่วนของมัน	N/A	ใช่

หมายเหตุ: เพื่อให้การดาวน์โหลด mp3 และ wav ทำงานได้อย่างถูกต้องเว็บไซต์ของคุณจะต้องแยกจากต้นกำเนิด สิ่งนี้จำเป็นเพราะแพ็คเกจนี้ใช้ FFMPEG ซึ่งใช้ SharedArrayBuffer ภายใน

---

hook useaudiorecorder

หากคุณต้องการสร้าง UI ของคุณเอง แต่ใช้ประโยชน์จากการใช้งานที่จัดทำโดยแพ็คเกจนี้คุณสามารถใช้ตะขอนี้แทนส่วนประกอบ

พารามิเตอร์	คำอธิบาย	ไม่จำเป็น
audioTrackConstraints	ใช้ชุดย่อยของ MediaTrackConstraints ที่ใช้กับแทร็กเสียง	ใช่
onNotAllowedOrFound	สิ่งนี้ได้รับการเรียกเมื่อสัญญา getUserMedia ถูกปฏิเสธ ต้องใช้ DOMException ผลลัพธ์เป็นพารามิเตอร์ของมัน	ใช่

ตะขอส่งคืนสิ่งต่อไปนี้:

ตัวระบุ	คำอธิบาย
startRecording	การเรียกใช้วิธีนี้เริ่มการบันทึก ชุด isRecording เป็น true
stopRecording	การเรียกใช้วิธีนี้จะหยุดการบันทึกที่กำลังดำเนินการและเสียงที่เกิดขึ้นจะมีให้ใน recordingBlob BLOB ชุด 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 ] )

---

รวม hook 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 ใน hook useAudioRecorder