Web Speech API로 음성인식 구현하기

브라우저 API를 찾아보다 보면 "이런 게 있었어?" 라는 생각이 들 정도로 기상천외한 API가 많은데요, 오늘은 브라우저에서 음성 인식을 구현할 수 있는 Web Speech API에 대해 간략히 소개해보고자 합니다.

 

음성인식 API는 아직 많은 브라우저에서 지원하지 않지만, 그래도 타 클라우드 서비스와는 달리 무료로 활용할 수 있다는 점이 강점입니다.

(* 다만 후술하겠지만 실제 프로덕트에서 활용하기는 아직 쉽지 않아 보입니다.)

🎤 음성인식 체험하기 - MDN 예제

mdn.github.io/web-speech-api/speech-color-changer/

 

먼저 간단하게 음성인식 API를 활용하는 예제를 소개해보려 합니다.

위 링크는 사용자가 말한 색으로 배경색을 바꾸는 예제인데요, 화면을 클릭하면 인식을 시작하고 화면 하단에 인식한 텍스트를 출력합니다.

💉 리액트 프로젝트에 이식하기

브라우저 API는 대부분 리액트 프로젝트에 직접 사용할 수 없습니다.

따라서 이를 리액트에 적용한 라이브러리들이 일부 존재하는데요, 저는 이 중 react-speech-kit 이라는 패키지를 추천드립니다.

(* 설치 시 디펜던시 이슈가 출력되면 npm i --force react-speech-kit 명령으로 설치할 수 있습니다.)

MikeyParton/react-speech-kit

react-speech-kit은 함수 컴포넌트를 위한 훅을 제공하며 useState 훅과 함께 간단하게 사용할 수 있습니다.

import React, { useState } from 'react';
import { useSpeechRecognition } from 'react-speech-kit';

function Example() {
  const [value, setValue] = useState('');
  const { listen, listening, stop } = useSpeechRecognition({
    onResult: (result) => {
      // 음성인식 결과가 value 상태값으로 할당됩니다.
      setValue(result);
    },
  });

  return (
    <div>
      <div>{value}</div>
      <button onMouseDown={listen} onMouseUp={stop}>
        🎤
      </button>
      {listening && <div>음성인식 활성화 중</div>}
    </div>
  );
}

만약 인식이 완전히 완료된 텍스트만을 얻고자 한다면 listen 함수에 { interimResults: false } 옵션을 줄 수도 있습니다.

import React, { useState } from 'react';
import { useSpeechRecognition } from 'react-speech-kit';

function Example() {
  const [value, setValue] = useState('');
  const { listen, listening, stop } = useSpeechRecognition({
    onResult: (result) => {
      // 음성인식 결과가 value 상태값으로 할당됩니다.
      setValue(result);
    },
  });

  return (
    <div>
      <div>{value}</div>
      <button onMouseDown={() => listen({ interimResults: false })} onMouseUp={stop}>
        🎤
      </button>
      {listening && <div>음성인식 활성화 중</div>}
    </div>
  );
}

⛔️ 한계

다만 Web Speech API를 실제 서비스에 활용하는데는 다소 무리가 있습니다.

 

교내 산학프로젝트 I 과목을 진행하면서 알아낸 사실로 Web Speech API는 브라우저에서 처리되는 것이 아니라 구글의 클라우드 자원을 활용하는데요, 이로 인해 일정 할당량 이상을 활용할 시 음성인식이 어느 순간부터 동작하지 않습니다.

 

이 기준은 정확하게 공개되어있지 않는 듯 하며, 추가로 요금을 지불해 사용 한도를 늘릴 수도 없다고 명시되어 있습니다.

따라서 실제 서비스에서 음성인식 기능을 활용하고자 한다면 AWS transcribe 나 Google Speech API를 활용하는 것을 추천드립니다.

📋 참고 링크

Using the Web Speech API - Web APIs | MDN

Is there Web Speech API Limitation?

Speech API issue