Hey guys I have made a react hook to convert text to speech, using web api.
With implementation with
React js
Next js
import { useCallback,useState } from "react";
export const useSpeachSynthesisApi = () => {
const [text, setText] = useState<string>("");
const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
const [isPaused, setIsPaused] = useState<boolean>(false);
const [isResumed, setIsResumed] = useState<boolean>(false);
const [isEnded, setIsEnded] = useState<boolean>(false);
const speak = useCallback(() => {
var msg = new SpeechSynthesisUtterance();
msg.text = <string>text;
function speak() {
window.speechSynthesis.speak(msg);
}
speak();
setIsSpeaking(true);
setIsEnded(false);
}, [text]);
const pause = useCallback(() => {
function pause() {
window.speechSynthesis.pause();
}
pause();
setIsPaused(true);
setIsSpeaking(false);
setIsEnded(false);
setIsResumed(false);
}, []);
const resume = useCallback(() => {
function resume() {
window.speechSynthesis.resume();
}
resume();
setIsPaused(false);
setIsSpeaking(false);
setIsEnded(false);
setIsResumed(true);
}, []);
const cancel = useCallback(() => {
function cancel() {
window.speechSynthesis.cancel();
}
cancel();
setIsPaused(false);
setIsResumed(false);
setIsSpeaking(false);
setIsEnded(true);
}, []);
return {
text,
setText,
isSpeaking,
isPaused,
isResumed,
isEnded,
speak,
pause,
resume,
cancel
}
}
Top comments (0)