Voice Recognizer Chrome

아래 링크를 통해서, 간단하게 보이스 레코그 나이저를 활용한 단어 맞추기를 실행해보실 수 있습니다.
npm install
Plain Text
외부라이브러리를 사용하지 않고, window object에서 제공하는 API를 활용했습니다.
var SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition
Plain Text

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;
JavaScript
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] }
JavaScript