리액트 음성인식 사용해보기

 

https://www.npmjs.com/package/react-speech-recognition

react-speech-recognition

 

사용한 api는 react-speech-recongition

 

 

아래의 명령어를 통해 프로젝트에 설치해준다.

npm install --save react-speech-recognition

 

 

사이트 밑에 보시면 기본적인 코드가 제공되어 있습니다.

import React from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const Dictaphone = () => {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>;
  }

  return (
    <div>
      <p>Microphone: {listening ? 'on' : 'off'}</p>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  );
};
export default Dictaphone;

 

 

이 코드를 사용해서 제대로 되는지 테스트부터 해보았습니다.

 

 

잘뜨네용,,,

아 참고로 한글로 인식하고 싶어서

이렇게 언어를 한국어로 설정해주었습니다.

 

 

https://github.com/JamesBrill/react-speech-recognition/blob/HEAD/docs/API.md#SpeechRecognition

GitHub - JamesBrill/react-speech-recognition: 💬Speech recognition for your React app

이 사이트 들어가면 API 문서 볼 수 있습니다.

하단에 보면 여러가지 언어 지원하는 데 원하시는 언어 골라서 사용하면 될 것 같습니다.

 

tmi . 이렇게 많은 언어를 지원해주더라

 

 

근데 저는 음성인식으로 이미지를 다음 이미지로 넘기기 그런걸 하고 싶어서 좀 수정을 해보았습니다.

 

 

일단 아래에 간단하게 이미지를 띄우는 코드를 짜봤습니다.

 

여기서 이전 버튼 누르면 이전 이미지로

다음 버튼 누르면 다음 이미지로 가도록 해놓았습니다.

 

이제 음성인식을 사용해서 넘겨보도록 하겠습니다,,!

 

아래는 결과입니다. 화면 녹화를 어떻게 하는지 잘모르겠읍니다,,!

 

아주 간단하게 야매로 했습니다.

 

 

일단 끝까지 가면 다시 처음으로 돌아가게 구성하였습니다.

 

후 checking 이라는 함수를 통해서 다음이 인식되면 nextButton()이 실행되도록

이전이 인식되면 prevButton()을 실행시켰습니다.

 

 

그리고 useEffect통해서 체크해주었습니다.

 

 

 

 

 

비루하지만 혹시 누가 참고하실까봐 전체 코드입니다.

 

import React ,{useState,useEffect}from 'react';
import SpeechRecognition, {useSpeechRecognition} from 'react-speech-recognition';
// import "../../css/DictaPhone.css";

const Dictaphone = () => {
    const {transcript, listening, resetTranscript, browserSupportsSpeechRecognition} = useSpeechRecognition();
    const [imageList, setImageList] = useState([
        "https://i.pinimg.com/564x/c3/21/f6/c321f62ac98c92ca483e5172ec43eb3f.jpg",
        "https://i.pinimg.com/564x/08/07/de/0807dee6ae87715dd00c6881b5f72325.jpg",
        "https://i.pinimg.com/564x/83/83/35/838335ba98c405b799422a24b28b45e8.jpg",
        "https://i.pinimg.com/564x/49/ad/54/49ad541a46127857f13ac041d2b3695c.jpg"
    ]);

    const [scrollState,setScrollState] = useState(Number(0));
    var word = transcript.split(" ");


    console.log(transcript);
    const prevButton = () =>{
        if(scrollState === 0){
            setScrollState(imageList.length-1);
        }
        else{
            setScrollState(scrollState-1);
        }

    }

    const nextButton = () => {
        if(scrollState === imageList.length-1){
            setScrollState(0);
        }
        else{
            setScrollState(scrollState+1);
        }

    }

    const checking = () =>{
        console.log("체크",word[word.length-1]);
        if((word[word.length-1])==='다음'){
            nextButton();
        }
        else if((word[word.length-1])==='이전'){
            prevButton();
        }
    }

    if (!browserSupportsSpeechRecognition) {
        return <span>Browser doesn't support speech recognition.</span>;
    }

    useEffect(() => {
        // checking();
        return () => {
            
            checking();
        }
    }, [transcript])

    return (
        <div>
            <p>Microphone: {
                    listening
                        ? 'on'
                        : 'off'
                }</p>
            <button
                onClick={SpeechRecognition
                    .startListening({continuous: true, language: 'ko'})}>Start</button>
            <button onClick={SpeechRecognition.stopListening}>Stop</button>
            <button onClick={resetTranscript}>Reset</button>
            <p>{transcript}</p>
            <img src={imageList[scrollState]} />

            <div className="imageTest">
                <div className="prevButton">
                    <button onClick={prevButton}>이전</button>
                </div>
                <div className="nextButton">
                    <button onClick={nextButton}>다음</button>
                </div>
            </div>
        </div>
    );
};
export default Dictaphone;