34 lines
No EOL
1.2 KiB
TypeScript
34 lines
No EOL
1.2 KiB
TypeScript
import React, { useState, useRef } from 'react'
|
|
|
|
export const AudioRecorder= () => {
|
|
const [isRecording, setIsRecording] = useState(false)
|
|
const [audioURL, setAudioURL] = useState<string | null>(null)
|
|
const mediaRecorderRef = useRef<MediaRecorder | null>(null)
|
|
const audioChunks = useRef<Blob[]>([])
|
|
|
|
const startRecording = async () => {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
|
const mediaRecorder = new MediaRecorder(stream)
|
|
mediaRecorderRef.current = mediaRecorder
|
|
|
|
mediaRecorder.ondataavailable = (event) => {
|
|
audioChunks.current.push(event.data)
|
|
}
|
|
|
|
mediaRecorder.onstop = () => {
|
|
const audioBlob = new Blob(audioChunks.current, { type: "audio/wav" })
|
|
const url = URL.createObjectURL(audioBlob)
|
|
setAudioURL(url)
|
|
audioChunks.current = []
|
|
}
|
|
|
|
mediaRecorder.start()
|
|
setIsRecording(true)
|
|
|
|
}
|
|
|
|
const stopRecording = () => {
|
|
mediaRecorderRef.current?.stop()
|
|
setIsRecording(false)
|
|
}
|
|
} |