Initial commit
This commit is contained in:
theshy
534
components/AudioRecorder.tsx
Normal file
534
components/AudioRecorder.tsx
Normal file
@ -0,0 +1,534 @@
|
||||
"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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user