File size: 3,293 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | import { useRecoilValue } from 'recoil';
import { useState, useEffect, useCallback } from 'react';
import type { VoiceOption } from '~/common';
import store from '~/store';
function useTextToSpeechBrowser({
setIsSpeaking,
}: {
setIsSpeaking: React.Dispatch<React.SetStateAction<boolean>>;
}) {
const voiceName = useRecoilValue(store.voice);
const [voices, setVoices] = useState<VoiceOption[]>([]);
const cloudBrowserVoices = useRecoilValue(store.cloudBrowserVoices);
const [isSpeechSynthesisSupported, setIsSpeechSynthesisSupported] = useState(true);
const updateVoices = useCallback(() => {
const synth = window.speechSynthesis as SpeechSynthesis | undefined;
if (!synth) {
setIsSpeechSynthesisSupported(false);
return;
}
try {
const availableVoices = synth.getVoices();
if (!Array.isArray(availableVoices)) {
console.error('getVoices() did not return an array');
return;
}
const filteredVoices = availableVoices.filter(
(v) => cloudBrowserVoices || v.localService === true,
);
const voiceOptions: VoiceOption[] = filteredVoices.map((v) => ({
value: v.name,
label: v.name,
}));
setVoices(voiceOptions);
} catch (error) {
console.error('Error updating voices:', error);
setIsSpeechSynthesisSupported(false);
}
}, [cloudBrowserVoices]);
useEffect(() => {
const synth = window.speechSynthesis as SpeechSynthesis | undefined;
if (!synth) {
setIsSpeechSynthesisSupported(false);
return;
}
try {
if (synth.getVoices().length) {
updateVoices();
} else {
synth.onvoiceschanged = updateVoices;
}
} catch (error) {
console.error('Error in useEffect:', error);
setIsSpeechSynthesisSupported(false);
}
return () => {
if (synth.onvoiceschanged) {
synth.onvoiceschanged = null;
}
};
}, [updateVoices]);
const generateSpeechLocal = (text: string) => {
if (!isSpeechSynthesisSupported) {
console.warn('Speech synthesis is not supported');
return;
}
const synth = window.speechSynthesis;
const voice = voices.find((v) => v.value === voiceName);
if (!voice) {
console.warn('Selected voice not found');
return;
}
try {
synth.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.voice = synth.getVoices().find((v) => v.name === voice.value) || null;
utterance.onend = () => {
setIsSpeaking(false);
};
utterance.onerror = (event) => {
console.error('Speech synthesis error:', event);
setIsSpeaking(false);
};
setIsSpeaking(true);
synth.speak(utterance);
} catch (error) {
console.error('Error generating speech:', error);
setIsSpeaking(false);
}
};
const cancelSpeechLocal = () => {
if (!isSpeechSynthesisSupported) {
return;
}
try {
window.speechSynthesis.cancel();
} catch (error) {
console.error('Error cancelling speech:', error);
} finally {
setIsSpeaking(false);
}
};
return { generateSpeechLocal, cancelSpeechLocal, voices, isSpeechSynthesisSupported };
}
export default useTextToSpeechBrowser;
|