음성인식 기술(Web Speech API)어제 크롬 업데이트로 안정화버전(25 이상)에서도 사용가능하게 됐습니다. 구현하는 일이 그렇게 어렵지도 않고(작게 적으면 6줄로 구현 가능), 테스트하다보면 내가 말을 이렇게 어눌하게 했나ㅡ.. 하고 자기 반성도 해보고 재밌습니다. 책읽기 연습도 되고.ㅋㅋ

구현하기 정말 쉽다는 것을 보여드리기 위해 간단한 예제를 준비했습니다. 밑 상자의 시작 단추를 누르면 내부적으로 마이크 녹음이 시작되며 파비콘에 변화가 생깁니다.

재밌으셨나요? 적당히 놀았겠다, 소스 코드를 살펴보겠습니다.

Web Speech API를 사용하기 위해서 필요한 것은 webkitSpeechRecognition 객체입니다. 브라우저에서 지원하는 기능인지 확인하고 가는게 중요하겠죠.

if(!('webkitSpeechRecognition' in window)) $('#speechbbbbox').html('지원하지 않는 브라우저입니다.');
else {
  var mic = new webkitSpeechRecognition();
  mic.continuous = true;
  mic.interimResults = true;
  mic.lang = 'ko-KR';

continuous 속성은 마이크 캡쳐를 한 번만 하고 그만 둘 것인지를 정하는데요, 기본은 false로 잡혀있습니다.
interimResults 속성은 마이크 캡쳐 중에 브라우저가 단어를 감지할 때마다 결과값을 내보낼 지를 정하는데요, 기본은 역시 false입니다.
lang 속성은 감지할 언어를 정합니다. BCP-47를 사용하고, 구글 번역기에서 확인 가능한 언어라면 다 되는 것 같더군요. 영어는 en-US, 한국어는 ko-KR, 일본어는 ja-JP 등으로 넣어주면 됩니다. 기본은 ''입니다. 설정되있지 않습니다ㅡㅡ;

다음은 이벤트입니다. webkitSpeechRecognition의 이벤트에는 onstart, onerror, onend, onresult 등이 있습니다.

  mic.onresult = function(e) {
    var b = '', c = false;
    for(var i = e.resultIndex; i < e.results.length; ++i) {
      b += e.results[i][0].transcript;
      c = e.results[i].isFinal;
    }
    if($('#speechbbbbox .cning').length < 1) $('#speechbbbbox').append('<span class="cning"></span>');
    $('#speechbbbbox .cning').text(b);
    if(c) $('#speechbbbbox .cning').removeClass('cning');
  };
  mic.onend = function() {
    $('#speechbbbbox').removeClass('on');
  };
}

말소리가 인식되면 onresult 이벤트가 발생합니다. 발생시 받는 데이터의 results의 transcript에는 인식된 말이 저장됩니다.
results의 isFinal에는 인식이 완료됐으면 true가 들어가 있습니다. interimResults 속성을 true로 설정했으면 isFinal이 false일 때도 있다는 얘기겠죠.

마지막. 정말 중요한 것을 적지 않았네요. start()로 음성인식을 시작하고, stop()으로 음성인식을 종료합니다.

끝! 음성인식이라해서 처음에 엄청 겁먹었는데; 프로그램 내부적으로 지원해서 구현할 것도 별로 없고 참 좋네요.ㅋ html5의 매력에 점점 빠져들어가ㅡ


후에 이 기술이 정착되면 'webkit'이라는 키워드를 떼고 사용해야한다는 건 아시리라 믿습니다,

저작자 표시 비영리
신고
  1. 이건 JS인지 ml5인지 구분이 안 가는군요. 정체성에 혼란이 오는듯한 기분이...
  2. 송진우
    좋은자료네요. 스크랩좀해갈게요
  3. 이종민
    ie11은 미지원이라서 아쉽네요
  4. 나그네
    이건 웹에서만 사용가능한가요? 프로그램 형식으로 만들 방법은 없을까요?
  5. 나그네
    좋은 정보 감사합니다~ 그런데 모바일말고는 없나요?
  6. 니코
    그런데 구글 Web speech Api 쓰려면 GoogleDevelopers Console에서 여러가지 해야할 것들이 있고
    사용횟수 50번 제한 있지 않나요? 그리고 저자께서 코딩하신 건 webkit을 뗴지 않고도 아직 되네요?
    어떻게 된거죠? 주실 답변에 미리 감사드립니다.

Name __

Password __

Link (Your Website)

Comment