아래 링크를 통해서, 간단하게 보이스 레코그 나이저를 활용한 단어 맞추기를 실행해보실 수 있습니다.

https://github.com/SUNGPAH/voice_recognizer_word_puzzle

npm install

외부라이브러리를 사용하지 않고, window object에서 제공하는 API를 활용했습니다.

var SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition

Voice Recognizer without library

상황에 따라서, 훅스 디자인의 스테이트를 하나로 모아도 좋습니다. ex)

app.js

import logo from './logo.svg';
import './App.css';
import {useRecognizer} from './useRecognizer';

function App() {
  const [outputText, startRecognizer, endRecognizer, error] = useRecognizer();

	useEFfect(() => {
		if(error){
			alert('에러가 발생했군요')
		}
	}, [error])

  return (
    <div className="App">
      <div onClick={startRecognizer}>gogo</div>
      <div>{outputText}</div>
    </div>
  );
}

export default App;

useRecognizer.js

import React, {useEffect, useState} from 'react';

var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition

export const useRecognizer = () => {
  const [outputText, setOutputText] = useState("");
  const [error, setError] = useState("");

  var recognition;

  useEffect(() => {
    recognition = new SpeechRecognition();
    recognition.continuous = false;
    recognition.lang = 'en-US';
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    recognition.onresult = function(event) {
      let text = event.results[0][0].transcript;
      setOutputText(text)
    }

    recognition.onend = (evt) => {
      console.log(evt);
    }

    recognition.onspeechend = (evt) => {
      console.log(evt);
    }

		//onError도 한 번!

  }, [])
  
  const startRecognizer = () => {
    recognition.start();
  }

  const endRecognizer = () => {
    recognition.stop()
  }

  return [outputText, startRecognizer, endRecognizer, error]
}