Web speech API (Speech recognition api)

 

 

Speech recognition이란 사람의 음성을 텍스트로 변환해주는 Speech-to-text(SST) 기술이다.

현재 진행하고 있는 프로젝트에 이 기술이 필요하게 되어서 다양한 API를 찾아보다가 대부분 유료인 것이 걸려 (네이버 Clova는 api가 직관적이고 옵션이 좋았는데 1초에 15원이었다..) 포기할 때 쯤 Web speech API를 찾게 되었다.

무료로 기술을 제공을 해준다는 점 뿐만 아니라 레퍼런스가 매우 잘 정리되어있다는 점에서 이것을 정리해보기로 했다.

 

내가 참고한 자료는 MDN 웹 문서이고 지금부터 내가 사용하기에 유용했던 인터페이스와

그것의 Property 밑 Method를 내용을 정리해보겠다.

 

먼저 이 Web speech API는 어떤 식으로 동작하는가?

Speech recognition은 크롬 브라우저 내부에서 device의 microphone으로부터 음성(speech) 데이터를 받아 이것을 구글 서버로 보낸다.

구글 서버의 speech recognition system이 오디오를 받아서 transcription(text)를 response에 담아 브라우저로 보낸다.

참고로 이 기술은 구글에서 제공해주는 system이기 때문에 크롬 브라우저에서만 사용이 가능하다.

 

인터페이스(객체) 설명

1. SpeechRecognition 객체

- 공식 문서에는 Web Speech API의 interface라고 정의되어있다. 

  이를 조금 더 쉽게 풀어쓰면 recognition service를 이용하는데 있어서 가장 최상위에서 controll 역할을 하는 루트 객체로 이해할 수 있다.

  이 객체는 speech service로부터 받은 SpeechRecognitionEvent를 handling 한다.

 Property

  1) SpeechRecognition.grammers

    - SpeechGrammar 객체를 리턴하거나, 설정해준다.

    - 이 객체는 현 SpeechRecognition에 의해 이해될 grammar이다.

 

  2) SpeechRecognition.lang

    - 현 speechRecognition의 언어를 설정한다.

    - 설정하지 않는다면 디폴트로 HTML의 lang 속성 값을 받는다.

       ex) SpeechRecognition.lang = 'ko-KR'

  3) SpeechRecognition.continuous

    - 각각의 인식 결과마다 continuous한 results를 받을지 혹은 single result를 받을지 결정합니다.

    - 디폴트 값은 single word를 리턴하는 false이다.

  4) SpeechRecognition.interimResults

    - interim results(중간 결과)를 리턴할지 아닐지를 결정한다 

    - interim results란 아직 인식이 완료되지 않은 중간 results를 의미한다.

    - 만약 이 property를 true로 설정하고 아직 완료되지 못한 result값인 interim result를 받는다면
       SpeechRecognitionResult.isFianl(자세 한 내용은 뒤에 언급)는 false를 리턴할 것이다.

  5) SpeechRecognition.maxAlternatives

    - 각각의 result 마다 제공 받을 SpeechRecognitionAlternative의 최대 숫자를 결정한다. (디폴트 값은 1개)

    - 우리는 recognition system으로부터 result 객체인 SpeechRecognitionResult를 받는다.
    - 그리고 이 객체는 여러개의 SpeechRecognitionAlternative 객체로 이루어져 있는데 (디폴트는 1개이긴 하다)
       이 객체에 바로 우리가 원하는 transcript 즉, 번역된 string이 들어있다.

Method

  1) SpeechRecognition.abort()

    - 현재 들어오는 audio 데이터를 듣고 있는 speech recognition service를 멈춘다.
       그리고 SpeechRecognitionResult 객체를 리턴하지 않게 해준다.

    - DB에서 사용하는 용어인 abort 와 유사.

 

  2) SpeechRecognition.start()

     - 아마 Web speech API를 사용하며 가장 많이 보게될 method가 아닐까 싶다.
     - 이 method는 speech recognition service를 시작하여 들어오는 audio 데이터를 현 객체에 관련한 grammar를 고려하여
        speech를 recognize 하기 시작한다.

 

  3) SpeechRecognition.stop()

      - speech recognition service를 멈춘다.
      - 지금까지 인식한 오디오에 대한 SpeechRecognitionResult 객체를 리턴한다.

 

 

2. SpeechRecognitionAlternative 객체

speech recognition service에 의해 인식된 "single word"를 뜻한다.

 

property(멤버 변수)

1) SpeechRecognitionAlternative.transcript

- 인식된 단어의 transcript(string)을 리턴한다.

 

2) SpeechRecognitionAlternative.confidence

-  speech recognition system이 recognition에 대해 얼마나 확신을 가지는지 수치적인 추정치를 리턴한다.

-  0 ~ 1 사이 값을 리턴.

 

 

3. SpeechRecognitionResult 객체

다수의 SpeechRecognitionAlternative 객체를 포함한 single recognition match를 나타내는 객체이다.

 

property(멤버 변수)

 

1) SpeechRecognitionResult.isFinal

- boolean을 리턴한다. true라면, recognition system으로 부터 리턴받은 result가 마지막임을 뜻한다.
- false를 받았다면 받은 result는 interim result(중간 결과)라는 뜻이다. 
  즉, 아직 recognition system이 계속 처리중이고 추후에 업데이트될 수 있다는 뜻이다.

 

 

4. Event handler

1) onstart

- speech recognition service가 들어오는 오디오 데이터를 듣기 시작할 때 실행되는 이벤트 핸들러이다.

 

 

2) onend

- speech recognition service가 끊길 때 호출되는 이벤트 핸들러이다.

 

3) onerror

- speech recognition service에 에러가 발생했을 때 호출되는 이벤트 핸들러이다.

- onerror 핸들러의 인자인 event는 SpeechRecognitionErrorEvent라는 이벤트 객체이다. 이 객체는 발생한 error의 타입을 리턴해주는 error 속성과, 디테일한 에러 메세지를 리턴해주는 message 속성이 있어서

위 코드처럼 onerror 이벤트 핸들러에서는 에러를 detail하게 처리할 수 있다.

 

 

4) onresult

- 이 이벤트 핸들러는 speech recognition service가 result를 리턴할 때 fire된다.

  인자로 받은 event.result로부터 우리가 원하는 인식된 word에 접근할 수 있다.

 

 위 코드에서 결과 text 값을 갖고 있는 event.results가 나왔다.

근데 위 예시 코드를 보고 혹자는 매우 궁금할 것이다. event.results에서 갑자기 튀어나온 results는 무엇인지,

그리고 왜 이것이 2차원 배열인지 말이다 (적어도 나는 그랬다.)

 

 첫번째 질문부터 답하자면 event.results는 여러개의 SpeechRecognitionResult 객체를 가지고 있는 SpeechRecognitionResultList라는 객체이다. 

 

 쉽게 예를 들어보자. 일단 "recognition"을 SpeechRecognition 객체의 인스턴스라고 하겠다.

그럼, recognition.start()를 호출하면 이 인스턴스로 들어오는 audio가 서버의 recognition system으로 들어가서 processing이 된 후

브라우저로 SpeechRecognitionResult 객체의 형태로 response를 보낸다고 하였다.

근데 이제 우리는 SpeechRecogitionResultList 객체를 사용할 것임을 안다. 그럼 이 객체 생성의 시작과 끝의 기준은 무엇인가? 앞의recognition.start()를 호출하면 Speech API는 계속 동작하고 있는 상태이다.

이 상태에서 계속 audio 데이터를 넘겨주면 이 엔진은 끝나지 않고 SpeechRecognitionResultList에 result 객체를 쌓아둔다.

그리고 recognition.stop()을 호출하면 구글 서버의 speech recognition system은 동작을 멈추고 SpeechRecognitionResultList 객체를 클라이언트에게 리턴하게 된다. 그래서 최종적으로 끝이 나는 것이다.

 

두번째 질문의 답은 다음과 같다. 앞에서 언급했다시피 SpeechRecognitionResult 객체는 여러개의 SpeechRecognitionAlternative 객체로 이뤄져있기 때문에 event.result[0][0] 이런식으로 접근해야 SpeechRecognitionAlternative.transcript 으로 번역된 string 값을 받을 수 있다.

 

 

 

 

아래는 위의 인터페이스를 사용해서 만든

간단한 구동영상이다.

 

www.youtube.com/watch?v=BN2LqF_EjsY

 

 

github.com/iwannagotonewyork/Meeting-helper

iwannagotonewyork/Meeting-helper

developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

Using the Web Speech API - Web APIs | MDN