535 lines
18 KiB
TypeScript
535 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useRef, useEffect } from "react";
|
||
import LoadingSpinner from "./LoadingSpinner";
|
||
import {
|
||
getBestRecordingFormat,
|
||
SUPPORTED_AUDIO_FORMATS,
|
||
} from "@/lib/config/audio-config";
|
||
|
||
interface AudioRecorderProps {
|
||
onRecordingComplete?: () => void;
|
||
}
|
||
|
||
export default function AudioRecorder({
|
||
onRecordingComplete,
|
||
}: AudioRecorderProps) {
|
||
const [isRecording, setIsRecording] = useState(false);
|
||
const [isPaused, setIsPaused] = useState(false);
|
||
const [recordingTime, setRecordingTime] = useState(0);
|
||
const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
|
||
const [isUploading, setIsUploading] = useState(false);
|
||
const [audioLevel, setAudioLevel] = useState(0);
|
||
const [recordingTitle, setRecordingTitle] = useState(""); // 录音标题
|
||
const [isRenaming, setIsRenaming] = useState(false); // 是否正在重命名
|
||
|
||
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
||
const streamRef = useRef<MediaStream | null>(null);
|
||
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
||
const animationFrameRef = useRef<number | null>(null);
|
||
const audioContextRef = useRef<AudioContext | null>(null);
|
||
const analyserRef = useRef<AnalyserNode | null>(null);
|
||
const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
|
||
|
||
// 音频分析器设置
|
||
const setupAudioAnalyzer = (stream: MediaStream) => {
|
||
try {
|
||
const audioContext = new AudioContext();
|
||
const analyser = audioContext.createAnalyser();
|
||
const source = audioContext.createMediaStreamSource(stream);
|
||
|
||
analyser.fftSize = 256;
|
||
analyser.smoothingTimeConstant = 0.8;
|
||
|
||
source.connect(analyser);
|
||
|
||
audioContextRef.current = audioContext;
|
||
analyserRef.current = analyser;
|
||
|
||
return true; // 表示设置成功
|
||
} catch (error) {
|
||
console.error("音频分析器设置失败:", error);
|
||
return false; // 表示设置失败
|
||
}
|
||
};
|
||
|
||
// 更新音频电平
|
||
const updateAudioLevel = () => {
|
||
if (!analyserRef.current || !isRecording || isPaused) {
|
||
setAudioLevel(0);
|
||
return;
|
||
}
|
||
|
||
const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
|
||
analyserRef.current.getByteFrequencyData(dataArray);
|
||
|
||
// 计算平均音量
|
||
const average =
|
||
dataArray.reduce((sum, value) => sum + value, 0) / dataArray.length;
|
||
const normalizedLevel = Math.min(average / 128, 1);
|
||
|
||
setAudioLevel(normalizedLevel);
|
||
|
||
if (isRecording && !isPaused) {
|
||
animationFrameRef.current = requestAnimationFrame(updateAudioLevel);
|
||
}
|
||
};
|
||
|
||
// 清理音频分析器
|
||
const cleanupAudioAnalyzer = () => {
|
||
if (animationFrameRef.current) {
|
||
cancelAnimationFrame(animationFrameRef.current);
|
||
animationFrameRef.current = null;
|
||
}
|
||
if (audioContextRef.current) {
|
||
audioContextRef.current.close();
|
||
audioContextRef.current = null;
|
||
}
|
||
analyserRef.current = null;
|
||
setAudioLevel(0);
|
||
};
|
||
|
||
const startRecording = async () => {
|
||
try {
|
||
// 录音参数直接写死
|
||
const constraints = {
|
||
audio: {
|
||
sampleRate: 48000,
|
||
channelCount: 2,
|
||
echoCancellation: true,
|
||
noiseSuppression: true,
|
||
autoGainControl: true,
|
||
},
|
||
};
|
||
|
||
const stream = await navigator.mediaDevices.getUserMedia(constraints);
|
||
streamRef.current = stream;
|
||
|
||
// 录音格式直接写死为 webm
|
||
const mimeType = "audio/webm;codecs=opus";
|
||
|
||
// 检查浏览器是否支持该格式
|
||
if (!MediaRecorder.isTypeSupported(mimeType)) {
|
||
console.warn(`不支持的格式: ${mimeType}，使用默认格式`);
|
||
// 使用默认格式
|
||
const defaultFormat = getBestRecordingFormat();
|
||
const mediaRecorder = new MediaRecorder(stream, {
|
||
mimeType: defaultFormat.mimeType,
|
||
});
|
||
mediaRecorderRef.current = mediaRecorder;
|
||
} else {
|
||
const mediaRecorder = new MediaRecorder(stream, {
|
||
mimeType: mimeType,
|
||
});
|
||
mediaRecorderRef.current = mediaRecorder;
|
||
}
|
||
|
||
const audioChunks: Blob[] = [];
|
||
|
||
mediaRecorderRef.current.ondataavailable = (event) => {
|
||
if (event.data.size > 0) {
|
||
audioChunks.push(event.data);
|
||
}
|
||
};
|
||
|
||
mediaRecorderRef.current.onstop = () => {
|
||
// 使用实际使用的 MIME 类型
|
||
const actualMimeType =
|
||
mediaRecorderRef.current?.mimeType || "audio/webm";
|
||
const audioBlob = new Blob(audioChunks, {
|
||
type: actualMimeType,
|
||
});
|
||
setAudioBlob(audioBlob);
|
||
stream.getTracks().forEach((track) => track.stop());
|
||
cleanupAudioAnalyzer();
|
||
};
|
||
|
||
// 设置音频分析器
|
||
let analyzerSetup = false;
|
||
try {
|
||
analyzerSetup = setupAudioAnalyzer(stream);
|
||
if (analyzerSetup) {
|
||
// 音频分析器设置成功
|
||
}
|
||
} catch (error) {
|
||
// 音频分析器设置失败，但不影响录音功能
|
||
return false; // 表示设置失败
|
||
}
|
||
|
||
// 开始录音
|
||
mediaRecorderRef.current.start();
|
||
setIsRecording(true);
|
||
setIsPaused(false);
|
||
setRecordingTime(0);
|
||
|
||
// 开始计时
|
||
timerRef.current = setInterval(() => {
|
||
setRecordingTime((prev) => prev + 1);
|
||
}, 1000);
|
||
|
||
// 开始音频分析
|
||
if (analyzerSetup) {
|
||
updateAudioLevel();
|
||
}
|
||
} catch (error) {
|
||
// 无法访问麦克风
|
||
alert("无法访问麦克风，请检查权限设置。");
|
||
}
|
||
};
|
||
|
||
const pauseRecording = () => {
|
||
if (mediaRecorderRef.current && isRecording) {
|
||
if (isPaused) {
|
||
// 继续录音
|
||
mediaRecorderRef.current.resume();
|
||
setIsPaused(false);
|
||
// 重新启动计时器
|
||
timerRef.current = setInterval(() => {
|
||
setRecordingTime((prev) => prev + 1);
|
||
}, 1000);
|
||
// 重新开始音频分析
|
||
updateAudioLevel();
|
||
} else {
|
||
// 暂停录音
|
||
mediaRecorderRef.current.pause();
|
||
setIsPaused(true);
|
||
// 停止计时器
|
||
if (timerRef.current) {
|
||
clearInterval(timerRef.current);
|
||
timerRef.current = null;
|
||
}
|
||
// 停止音频分析
|
||
if (animationFrameRef.current) {
|
||
cancelAnimationFrame(animationFrameRef.current);
|
||
animationFrameRef.current = null;
|
||
}
|
||
setAudioLevel(0);
|
||
}
|
||
}
|
||
};
|
||
|
||
const stopRecording = () => {
|
||
if (mediaRecorderRef.current) {
|
||
mediaRecorderRef.current.stop();
|
||
setIsRecording(false);
|
||
setIsPaused(false);
|
||
// setIsAnalyzing(false); // This line is removed
|
||
// 停止计时器
|
||
if (timerRef.current) {
|
||
clearInterval(timerRef.current);
|
||
timerRef.current = null;
|
||
}
|
||
// 清理音频分析器
|
||
cleanupAudioAnalyzer();
|
||
// 停止音频流
|
||
if (streamRef.current) {
|
||
streamRef.current.getTracks().forEach((track) => track.stop());
|
||
streamRef.current = null;
|
||
}
|
||
// 保持录音时长，不清零
|
||
}
|
||
};
|
||
|
||
const cancelRecording = () => {
|
||
if (mediaRecorderRef.current) {
|
||
mediaRecorderRef.current.stop();
|
||
setIsRecording(false);
|
||
setIsPaused(false);
|
||
// 停止计时器
|
||
if (timerRef.current) {
|
||
clearInterval(timerRef.current);
|
||
timerRef.current = null;
|
||
}
|
||
// 清理音频分析器
|
||
cleanupAudioAnalyzer();
|
||
// 停止音频流
|
||
if (streamRef.current) {
|
||
streamRef.current.getTracks().forEach((track) => track.stop());
|
||
streamRef.current = null;
|
||
}
|
||
setAudioBlob(null);
|
||
}
|
||
};
|
||
|
||
const uploadRecording = async () => {
|
||
if (!audioBlob) return;
|
||
|
||
setIsUploading(true);
|
||
try {
|
||
// 直接上传文件到后端，让后端处理 S3 上传
|
||
const formData = new FormData();
|
||
formData.append("audio", audioBlob, `recording-${Date.now()}.webm`);
|
||
formData.append("duration", recordingTime.toString());
|
||
|
||
// 添加录音标题
|
||
const title =
|
||
recordingTitle.trim() || `录音 ${new Date().toLocaleString("zh-CN")}`;
|
||
formData.append("title", title);
|
||
|
||
const response = await fetch("/api/recordings/upload", {
|
||
method: "POST",
|
||
body: formData,
|
||
});
|
||
|
||
if (response.ok) {
|
||
alert("录音上传成功！");
|
||
setAudioBlob(null);
|
||
setRecordingTitle(""); // 清空录音标题
|
||
// 保持录音时长用于显示，不重置为0
|
||
// 触发父组件刷新
|
||
console.log("录音上传成功，触发刷新事件");
|
||
window.dispatchEvent(new CustomEvent("recording-uploaded"));
|
||
} else {
|
||
const errorData = await response.json();
|
||
throw new Error(errorData.error || "保存录音记录失败");
|
||
}
|
||
} catch (error) {
|
||
console.error("上传失败:", error);
|
||
alert(`上传失败：${error instanceof Error ? error.message : "请重试"}`);
|
||
} finally {
|
||
setIsUploading(false);
|
||
}
|
||
};
|
||
|
||
const formatTime = (seconds: number) => {
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = seconds % 60;
|
||
return `${mins.toString().padStart(2, "0")}:${secs
|
||
.toString()
|
||
.padStart(2, "0")}`;
|
||
};
|
||
|
||
// 生成波形条
|
||
const generateWaveformBars = () => {
|
||
const bars = [];
|
||
const barCount = 20;
|
||
const baseHeight = 4;
|
||
|
||
for (let i = 0; i < barCount; i++) {
|
||
const height =
|
||
isRecording && !isPaused
|
||
? baseHeight + audioLevel * 20 * Math.random()
|
||
: baseHeight;
|
||
|
||
bars.push(
|
||
<div
|
||
key={i}
|
||
className="bg-blue-500 rounded-full transition-all duration-100"
|
||
style={{
|
||
height: `${height}px`,
|
||
width: "3px",
|
||
opacity: isRecording && !isPaused ? 0.8 : 0.3,
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return bars;
|
||
};
|
||
|
||
// 组件卸载时清理
|
||
useEffect(() => {
|
||
return () => {
|
||
cleanupAudioAnalyzer();
|
||
if (streamRef.current) {
|
||
streamRef.current.getTracks().forEach((track) => track.stop());
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border border-gray-100 dark:border-gray-700">
|
||
<div className="text-center">
|
||
<h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
||
录音机
|
||
</h3>
|
||
|
||
{/* 录音状态指示器 */}
|
||
<div className="mb-4">
|
||
<div className="flex items-center justify-center space-x-2">
|
||
<div
|
||
className={`w-3 h-3 rounded-full transition-colors ${
|
||
isRecording && !isPaused
|
||
? "bg-red-500 animate-pulse"
|
||
: isPaused
|
||
? "bg-yellow-500"
|
||
: "bg-gray-300"
|
||
}`}
|
||
></div>
|
||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||
{!isRecording ? "准备就绪" : isPaused ? "已暂停" : "录音中..."}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 波形可视化 */}
|
||
<div className="mb-6">
|
||
<div className="flex justify-center items-end gap-1 h-8">
|
||
{generateWaveformBars()}
|
||
</div>
|
||
{isRecording && (
|
||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||
{isPaused ? "已暂停" : "录音中..."}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{isRecording && (
|
||
<div className="mb-4">
|
||
<div className="text-2xl font-mono text-red-500">
|
||
{formatTime(recordingTime)}
|
||
</div>
|
||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-3">
|
||
{isPaused ? "已暂停" : "录音中..."}
|
||
</div>
|
||
{/* 录音进度条 */}
|
||
<div className="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mb-2">
|
||
<div
|
||
className="bg-red-500 h-2 rounded-full transition-all duration-300"
|
||
style={{
|
||
width: `${Math.min((recordingTime / 300) * 100, 100)}%`, // 5分钟为100%
|
||
}}
|
||
></div>
|
||
</div>
|
||
<div className="text-xs text-gray-400 dark:text-gray-500">
|
||
进度: {Math.round((recordingTime / 300) * 100)}% (最大5分钟)
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-center gap-4">
|
||
{!isRecording ? (
|
||
<button
|
||
onClick={startRecording}
|
||
className="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-full font-medium transition-colors"
|
||
>
|
||
开始录音
|
||
</button>
|
||
) : (
|
||
<>
|
||
<button
|
||
onClick={pauseRecording}
|
||
className="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-full font-medium transition-colors"
|
||
>
|
||
{isPaused ? "继续" : "暂停"}
|
||
</button>
|
||
<button
|
||
onClick={stopRecording}
|
||
className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-full font-medium transition-colors"
|
||
>
|
||
停止
|
||
</button>
|
||
<button
|
||
onClick={cancelRecording}
|
||
className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full font-medium transition-colors"
|
||
>
|
||
取消录音
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{audioBlob && (
|
||
<div className="mt-4 space-y-4">
|
||
{/* 录音标题 */}
|
||
<div className="text-center">
|
||
{isRenaming ? (
|
||
<div className="flex items-center justify-center gap-2">
|
||
<input
|
||
type="text"
|
||
value={recordingTitle}
|
||
onChange={(e) => setRecordingTitle(e.target.value)}
|
||
placeholder="输入录音标题"
|
||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white text-center min-w-0 flex-1 max-w-xs"
|
||
maxLength={100}
|
||
autoFocus
|
||
/>
|
||
<button
|
||
onClick={() => {
|
||
if (recordingTitle.trim()) {
|
||
setIsRenaming(false);
|
||
}
|
||
}}
|
||
className="px-3 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-colors"
|
||
>
|
||
确定
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setRecordingTitle("");
|
||
setIsRenaming(false);
|
||
}}
|
||
className="px-3 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-center justify-center gap-2">
|
||
<h4 className="text-lg font-medium text-gray-900 dark:text-white">
|
||
{recordingTitle || "录音"}
|
||
</h4>
|
||
<button
|
||
onClick={() => setIsRenaming(true)}
|
||
className="p-1 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors"
|
||
title="重命名"
|
||
>
|
||
<svg
|
||
className="w-4 h-4"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<audio controls className="w-full max-w-md mx-auto">
|
||
<source
|
||
src={URL.createObjectURL(audioBlob)}
|
||
type="audio/webm"
|
||
/>
|
||
您的浏览器不支持音频播放。
|
||
</audio>
|
||
<div className="flex justify-center gap-3">
|
||
<button
|
||
onClick={uploadRecording}
|
||
disabled={isUploading}
|
||
className="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white px-6 py-2 rounded-full font-medium transition-colors flex items-center justify-center gap-2"
|
||
>
|
||
{isUploading ? (
|
||
<>
|
||
<LoadingSpinner size="sm" color="white" />
|
||
上传中...
|
||
</>
|
||
) : (
|
||
"保存录音"
|
||
)}
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setAudioBlob(null);
|
||
setRecordingTitle("");
|
||
}}
|
||
className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-full font-medium transition-colors"
|
||
>
|
||
取消录音
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|