90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-02-06 21:11:51
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-03-13 17:11:14
|
|
*/
|
|
import { type FC, useRef, useState } from 'react'
|
|
import RecordRTC from 'recordrtc'
|
|
|
|
import { fileUploadUrlWithoutApiPrefix } from '@/api/fileStorage'
|
|
import { request } from '@/utils/request'
|
|
|
|
/** Props for the AudioRecorder component */
|
|
interface AudioRecorderProps {
|
|
/** Callback fired when recording is complete, receives uploaded file info and raw blob */
|
|
onRecordingComplete?: (file: { file_id: string; file_key: string; url: string; type?: string; }, blob?: Blob) => void
|
|
className?: string;
|
|
/** Upload endpoint URL, defaults to fileUploadUrlWithoutApiPrefix */
|
|
action?: string;
|
|
/** Additional config passed to the upload request */
|
|
requestConfig?: Record<string, any>;
|
|
}
|
|
|
|
const AudioRecorder: FC<AudioRecorderProps> = ({
|
|
onRecordingComplete,
|
|
className = '',
|
|
action = fileUploadUrlWithoutApiPrefix,
|
|
requestConfig = {}
|
|
}) => {
|
|
// Whether the recorder is currently capturing audio
|
|
const [isRecording, setIsRecording] = useState(false)
|
|
// Holds the RecordRTC instance across renders
|
|
const recorderRef = useRef<RecordRTC | null>(null)
|
|
|
|
/** Request microphone access and start recording */
|
|
const startRecording = async () => {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
|
recorderRef.current = new RecordRTC(stream, {
|
|
type: 'audio',
|
|
mimeType: 'audio/webm'
|
|
})
|
|
recorderRef.current.startRecording()
|
|
setIsRecording(true)
|
|
} catch (error) {
|
|
console.error('Failed to start recording:', error)
|
|
}
|
|
}
|
|
|
|
/** Stop recording, upload the audio blob, then invoke the completion callback */
|
|
const stopRecording = () => {
|
|
if (recorderRef.current) {
|
|
recorderRef.current.stopRecording(() => {
|
|
const blob = recorderRef.current!.getBlob()
|
|
const url = recorderRef.current!.toURL()
|
|
const formData = new FormData()
|
|
formData.append('file', blob, `recording_${Date.now()}.webm`)
|
|
request
|
|
.uploadFile(action, formData, requestConfig)
|
|
.then(res => {
|
|
onRecordingComplete?.({
|
|
...(res as { file_id: string; file_key: string }),
|
|
type: blob.type,
|
|
url
|
|
}, blob)
|
|
// Release recorder resources after upload
|
|
recorderRef.current?.destroy()
|
|
recorderRef.current = null
|
|
})
|
|
})
|
|
setIsRecording(false)
|
|
}
|
|
}
|
|
|
|
// Toggle between recording/idle states on click;
|
|
// swap background image to reflect current state
|
|
return (
|
|
<div
|
|
className={`rb:size-5.5 rb:cursor-pointer rb:bg-cover ${className} ${
|
|
isRecording
|
|
? `rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]`
|
|
: `rb:bg-[url('@/assets/images/conversation/audio.svg')]`
|
|
}`}
|
|
onClick={isRecording ? stopRecording : startRecording}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default AudioRecorder
|