리액트 - 음성 끝나고 나서 텍스트 새로 기록하기(react-speech-recognition)

원래처럼 transcript를 출력하면 여태껏 말했던 텍스트들을 그대로 가져오는 게 아니라,

말을 끝난 뒤에 다시 말을 하면 이전 텍스트를 지우고 다시 기록하는 방식

 

const [subtitle, setSubtitle] = useState('');

  const {
    transcript,
    interimTranscript,
    resetTranscript,
    browserSupportsSpeechRecognition,
    finalTranscript,
  } = useSpeechRecognition();

  useEffect( ()=>{
    console.log('마이크 녹화 시작');
    SpeechRecognition.startListening({continuous: true});
  }, [] );

  useEffect( ()=>{
    if(interimTranscript.length > 0)
      setSubtitle( interimTranscript );
  }, [interimTranscript] );

  useEffect( ()=>{
    if( finalTranscript.length > 0 )
      setSubtitle( finalTranscript );
    resetTranscript();
  }, [finalTranscript] );
  
  
    return (
    <div>
      <div id='box'>
        <p id='transcript'>{subtitle}</p>
      </div>
    </div>
  );

 

"if(interimTranscript.length > 0)"와 "if( finalTranscript.length > 0 )"를 안 주면 빈 텍스트가 출력이 되기 때문에 써준 것