1

I have made a component using react-speech-kit, it should speak the question whenever it comes on screen, but the speak function does not work for the very first question and works fine after that.

import { useSpeechSynthesis } from 'react-speech-kit';
import { useEffect } from 'react';

const TextToSpeech = ({question}) => {
  const {speak} = useSpeechSynthesis();

  useEffect(() => {
    speak({text:question});
  }, [question]);

}

export default TextToSpeech;
Khushboo Gour
  • 21
  • 2
  • How is `question` being passed and updated? Is this a single component whose `question` keeps getting updated, or does the parent component create multiple `TextToSpeech` component, one for each `question`? – cSharp Apr 12 '22 at 07:25
  • It is a single component whose question keeps updating. – Khushboo Gour Apr 12 '22 at 07:46
  • Try `console.log`ging `question` right before `speak()`, check if the first `question` is being passed correctly, or if it is being passed correctly but maybe `useSpeechSynthesis` is async and needs a bit of time to initialise. Try to locate the problem more. – cSharp Apr 12 '22 at 07:49
  • Tried this also, the question is coming correct but still not working : import { useSpeechSynthesis } from 'react-speech-kit'; import { useEffect } from 'react'; const TextToSpeech = ({question}) => { const {speak} = useSpeechSynthesis(); async function speakQuestion(){ await speak({text:question}); } useEffect(() => { console.log(question); speakQuestion(); }, [question]); } export default TextToSpeech; – Khushboo Gour Apr 12 '22 at 08:32
  • check if `useSpeechSynthesis` is async and try `const {speak} = await useSpeechSynthesis()`? – cSharp Apr 12 '22 at 23:29

0 Answers0