Update SpeechSynthesis.tsx

This commit is contained in:
bsu3338 2023-09-03 22:11:38 -05:00 committed by GitHub
parent c794f07678
commit d95fa19539
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,47 +1,51 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
function useSpeechSynthesis() { function useSpeechSynthesis() {
const [isSpeechEnabled, setIsSpeechEnabled] = useState(false); //const [isSpeechEnabled, setIsSpeechEnabled] = useState(false);
const [textToSpeak, setTextToSpeak] = useState(''); //const [textToSpeak, setTextToSpeak] = useState('');
const synthesizeSpeech = (text) => { const synthesizeSpeech = (text) => {
setTextToSpeak(text); const synth = window.speechSynthesis;
synth.cancel();
const utterance = new SpeechSynthesisUtterance(text);
synth.speak(utterance);
//setTextToSpeak(text);
}; };
const toggleSpeechSynthesis = () => { //const toggleSpeechSynthesis = () => {
setIsSpeechEnabled(!isSpeechEnabled); // setIsSpeechEnabled(!isSpeechEnabled);
console.log('Toggle Text-To-Speech', !isSpeechEnabled); // console.log('Toggle Text-To-Speech', !isSpeechEnabled);
}; //};
const cancelSpeech = () => { const cancelSpeech = () => {
const synth = window.speechSynthesis; const synth = window.speechSynthesis;
synth.cancel(); synth.cancel();
}; };
const handleKeyDown = (event) => { //const handleKeyDown = (event) => {
if (event.shiftKey && event.altKey && event.key === 'P') { // if (event.shiftKey && event.altKey && event.key === 'P') {
toggleSpeechSynthesis(); // toggleSpeechSynthesis();
} // }
}; //};
useEffect(() => { //useEffect(() => {
window.addEventListener('keydown', handleKeyDown); // window.addEventListener('keydown', handleKeyDown);
return () => { // return () => {
window.removeEventListener('keydown', handleKeyDown); // window.removeEventListener('keydown', handleKeyDown);
}; // };
}, [isSpeechEnabled]); // }, [isSpeechEnabled]);
useEffect(() => { //useEffect(() => {
if (!isSpeechEnabled || !textToSpeak) return; // if (!isSpeechEnabled || !textToSpeak) return;
const synth = window.speechSynthesis; // const synth = window.speechSynthesis;
synth.cancel(); // synth.cancel();
const utterance = new SpeechSynthesisUtterance(textToSpeak); // const utterance = new SpeechSynthesisUtterance(textToSpeak);
synth.speak(utterance); // synth.speak(utterance);
}, [textToSpeak, isSpeechEnabled]); //}, [textToSpeak, isSpeechEnabled]);
// return { synthesizeSpeech, toggleSpeechSynthesis, cancelSpeech, isSpeechEnabled };
return { synthesizeSpeech, toggleSpeechSynthesis, cancelSpeech, isSpeechEnabled }; return { synthesizeSpeech, cancelSpeech };
} }
export default useSpeechSynthesis; export default useSpeechSynthesis;