mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-22 06:00:56 +02:00
Update SpeechSynthesis.tsx
This commit is contained in:
parent
c794f07678
commit
d95fa19539
1 changed files with 31 additions and 27 deletions
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue