아래 링크를 통해서, 간단하게 보이스 레코그 나이저를 활용한 단어 맞추기를 실행해보실 수 있습니다.
https://github.com/SUNGPAH/voice_recognizer_word_puzzle
npm install
외부라이브러리를 사용하지 않고, window object에서 제공하는 API를 활용했습니다.
var SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition
상황에 따라서, 훅스 디자인의 스테이트를 하나로 모아도 좋습니다. 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]
}