Web Speech API로 음성인식 시작할 때 직전의 오디오가 재생되는 이슈

Web Speech API의 SpeechRecognition 인터페이스를 이용하여 음성 인식을 구현한 react-speech-recognition이 있다.
이 라이브러리를 이용하여 음성인식 서비스를 만드는 중 만난 에러와 해결 과정을 담아보았다.

문제 상황

음성인식 서비스를 이용할 때 오디오가 자동재생되는 경우가 있다.
오디오를 다 재생한 후 음성인식을 할 경우 직전에 재생된 오디오가 시스템 볼륨보다 큰 소리로 재생되는 이슈가 있었다.
Safari에서만 발생하는 것으로 보였다.

해결 과정

음성인식을 시작할 때(SpeechRecognition.start()) SpeechRecognition 이벤트 start, audiostart가 같이 호출된다.

• start: 오디오 채널에 들어온 오디오를 듣기 시작할 때 발생
• audiostart: 사용자에 의해 오디오를 수집하기 시작할 때 발생

음성 인식을 하려면 녹음 기능이 선행되는데, 녹음할 때 오디오 채널에 오디오가 들어가니까 두 이벤트가 같이 발생하는 것으로 보인다.

react-speech-recognition은 audiostart 이벤트를 사용하거나 제어하는 코드가 없기 때문에 라이브러리를 fork해서 수정하였다.

react-speech-recognition의 useSpeechRecognition 훅이 원래 파라미터를 받지 않지만, audiostart와 audioend 등 오디오와 관련된 이벤트를 제어하는 파라미터를 받도록 수정하였다.

// as-is
import { useSpeechRecognition } from 'react-speech-recognition';
const { ... } = useSpeechRecognition();

// to-be
import { useSpeechRecognition } from 'react-speech-recognition';
const { ... } = useSpeechRecognition({
  onAudioStart: () => {},
  onAudioEnd: () => {},
});

결론

Safari에서 음성 인식을 시작할 때 start와 audiostart 이벤트가 함께 호출되기 때문에 audiostart 이벤트에 대한 제어도 필요할 수 있다.

참고

Web Speech API SpeechRecognition
react-speech-recognition