([]);
+
+ /** SR 识别引擎不可用（无 SR 或已致命失败）时，改用录音上传通路 */
+ const useAudioPath = !SR || fatalRef.current;
+
+ // ---- 通路 1：SpeechRecognition ----
+
+ function launchSr() {
if (!SR) return;
try {
const rec = new SR();
@@ -81,46 +94,101 @@ export function VoiceInput({ onSubmit, disabled }: Props) {
setInterim(interimText);
};
rec.onerror = (e) => {
- if (e.error === 'not-allowed' || e.error === 'service-not-allowed') {
- fatalRef.current = true;
- }
+ if (e.error === 'not-allowed' || e.error === 'service-not-allowed') fatalRef.current = true;
};
rec.onend = () => {
recRef.current = null;
setInterim('');
if (wantRef.current && !fatalRef.current) {
- launch(); // 沉默超时，自动续录
+ launchSr(); // 沉默超时，自动续录
return;
}
setRecording(false);
- if (fatalRef.current) {
- setHint('麦克风没授权成功——可以直接打字，内容到位就行。');
- }
+ if (fatalRef.current) setHint('浏览器识别不可用——可以录音上传，或直接打字。');
};
recRef.current = rec;
rec.start();
} catch {
recRef.current = null;
setRecording(false);
- setHint('语音启动失败——可以直接打字。');
+ fatalRef.current = true;
+ setHint('浏览器识别启动失败——可以录音上传，或直接打字。');
}
}
- function startListening() {
+ function startSr() {
wantRef.current = true;
fatalRef.current = false;
setHint(null);
setRecording(true);
- launch();
+ launchSr();
}
- function stopListening() {
+ function stopSr() {
wantRef.current = false;
setRecording(false);
try {
recRef.current?.stop();
} catch {
- // 识别尚未真正启动（如权限弹窗打断）时 stop 会抛 InvalidStateError，吞掉
+ // 识别尚未真正启动时 stop 会抛 InvalidStateError，吞掉
+ }
+ }
+
+ // ---- 通路 2：MediaRecorder 录音 → server ASR ----
+
+ async function startAudio() {
+ setHint(null);
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ const recorder = new MediaRecorder(stream);
+ chunksRef.current = [];
+ recorder.ondataavailable = (e) => {
+ if (e.data.size > 0) chunksRef.current.push(e.data);
+ };
+ recorder.onstop = () => {
+ stream.getTracks().forEach((t) => t.stop());
+ mediaRecRef.current = null;
+ setRecAudio(false);
+ const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' });
+ chunksRef.current = [];
+ if (blob.size > 0) void transcribe(blob);
+ };
+ mediaRecRef.current = recorder;
+ recorder.start();
+ setRecAudio(true);
+ } catch {
+ setRecAudio(false);
+ setHint('麦克风不可用或未授权——直接打字也完全没问题。');
+ }
+ }
+
+ function stopAudio() {
+ try {
+ mediaRecRef.current?.stop();
+ } catch {
+ // 尚未启动时 stop 抛错，吞掉
+ }
+ }
+
+ async function transcribe(blob: Blob) {
+ setBusy(true);
+ try {
+ const fd = new FormData();
+ fd.append('audio', blob, 'narration.webm');
+ const res = await fetch(`${ASR_PROXY}/api/asr`, { method: 'POST', body: fd });
+ if (!res.ok) throw new Error(`ASR ${res.status}`);
+ const body = (await res.json()) as { transcript?: string };
+ const t = (body.transcript ?? '').trim();
+ if (t && !t.startsWith('[mock-asr]')) {
+ setText((prev) => (prev ? prev + t : t));
+ setHint(null);
+ } else {
+ setHint('语音服务还没接入真实识别（返回了占位结果）——这段请直接打字。');
+ }
+ } catch {
+ setHint('语音服务连不上（需要启动 server 代理）——直接打字也完全没问题。');
+ } finally {
+ setBusy(false);
}
}
@@ -130,7 +198,12 @@ export function VoiceInput({ onSubmit, disabled }: Props) {
try {
recRef.current?.stop();
} catch {
- // 卸载清理，忽略
+ // 卸载清理
+ }
+ try {
+ mediaRecRef.current?.stop();
+ } catch {
+ // 卸载清理
}
},
[],
@@ -150,69 +223,63 @@ export function VoiceInput({ onSubmit, disabled }: Props) {
}
}
- // ---- 降级路径：纯文本输入（不是错误，只是换个输入方式） ----
- if (!SR) {
- return (
-
-