annyang 음성인식 사용

0. 음성인식 사용 이유

전에 손동작을 이용해 이벤트를 발생시키려했지만 현재 개발에 적용하기엔 허들이 많이서 음성인식으로 변경.

음성인식은 전에 잠깐 javascript api가 있는 기억이 남.

1. 음성인식 종류

음성인식 할 수 있는 방법이 많음.

google stt, naver 음성인식, kakao 음성인식, annyang.js 등등.

각 장단점이 있다.

1. google stt

장점 : google이라는 이름값. 언어가 다양함. 스트리밍시 바로 자막 나옴.
단점 : 상업용으론 무료로 쓸 수 없음. 비상업용이어도 한도 넘어갈때 과금됨. 한글 인식 정확성이 naver, kakao보다 떨어짐. sdk, rest api로만 제공됨.

2. naver 음성인식

장점 : kakao와는 다르게 ai적용 되어있음. 한국어 인식이 kakao보다 뛰어남.
단점 : 인식 가능 언어가 4개밖에 없음. 인식 가능 시간도 1분으로 google보단 짧음. 구글과 같이 한도가 있음. sdk, rest api로만 제공됨.

기타 : 상업용으로 써도 한도까진 무료로 쓸 수 있는진 안나옴.

3. kakao 음성인식

장점 : google보다 한국어 인식이 좋음. 상업용으로 이용가능함(카카오 로고를 삽입해야함)
단점 : naver와 다르게 ai 적용 안되어있음. sdk, rest api로만 제공됨.

4. annyang.js

장점 : javascript로 음성인식이 가능함.
단점 : javascript lib다보니 speech관련 기능이 부라우저에서도 제공이 되어야 사용가능. 현재 크롬과 엣지만 가능함.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API#Browser_compatibility

그래서 처음엔 간단하게 annyang.js로 해보고 내가 원하는 기능이 구현되지 않는다면 google stt를 이용하고, 한글이 생각보다 인식이 잘 안된다면 마지막엔 naver 음성인식으로 구현해보려함.

2. annyang.js

annyang.js 홈페이지에 나와있는데로 하면 되긴하는데 SpeechKITT은 제대로 작동이 안됨. 수정이 필요함.

SpeechKITT시작 위에 annyang관련된 부분을 유지해야함.

  //commands 정의하는 부분~~
  annyang.addCommands(commands);
  annyang.debug();  //입력된 음성을 크롬 console에 출력함
  annyang.setLanguage('ko');    //언어를 한글로
  
  SpeechKITT.annyang();
  SpeechKITT.setStylesheet('//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/themes/flat.css');
  SpeechKITT.vroom(); 

 

마이크 클릭하면 이렇게 이미지가 길게 변함

위와 같은 마이크 이미지가 나오는데 마이크 클릭하고 말하면 됨.

 

그런데 음성 인식해서 출력까지 시간이 조금 걸리는 듯 함.

3. 수정사항

이젠 문장을 듣고 출력해서 그 안에 내가 원하는 단어들이 있는지에 따라 이벤트를 다르게 발생하게끔 구현해야함.

문장을 받아서 단어가 있는지 찾으면 될거같은데 될려나...