Web Speech API

Web Speech API를 활용한 음성 인식 기능 구현하기

웹 애플리케이션에서 음성 인식 기능을 구현하면 키보드를 사용하지 못하는 사용자의 경험을 향상시킬 수 있습니다.

Web Speech API란?

Web Speech API는 브라우저에서 음성 인식과 음성 합성을 가능하게 하는 웹 표준 API 입니다. 해당 API를 사용하면 사용자의 음성을 텍스트로 변환(SpeechRecognition)하거나, 텍스트를 음성으로 출력(SpeechSynthesis) 할 수 있는데 이를 활용하여 기능을 구현하였습니다.

브라우저 호환성

모든 브라우저에 완벽하게 지원되지 않지만 크롬에서는 지원이 제대로 이루어져 있기 때문에 기능을 사용하는데 어려움은 없습니다.

기능 구현

 const recognition = new SpeechRecognition();
  recognition.lang = "ko-KR";
  recognition.continuous = true;
  recognition.interimResults = true;

• lang: 인식할 언어를 설정합니다. 여기서는 한국어("ko-KR")로 설정했습니다.
• continuous: true로 설정하면 사용자가 말을 멈춰도 인식을 계속합니다.
• interimResults: true로 설정하면 최종 결과가 아닌 중간 결과도 반환합니다.

recognition.onstart = () => {
  setIsListening(true);
};

recognition.onend = () => {
  setIsListening(false);
};

recognition.onresult = (event: SpeechRecognitionEvent) => {
  const transcript = Array.from(event.results)
    .map((result) => result[0].transcript)
    .join("");

  // 음성 명령 처리
  if (transcript.includes("홈으로")) {
    router.push("/");
  } else if (transcript.includes("로그인")) {
    router.push("/login");
  } else if (transcript.includes("마이페이지")) {
    router.push("/profile");
  } else if (transcript.includes("로그아웃")) {
    executeCommand("logout");
  } else if (transcript.includes("코드 전송")) {
    executeCommand("submitCode");
  }
};

• onstart: 음성 인식이 시작될 때 호출됩니다.
• onend: 음성 인식이 종료될 때 호출됩니다.
• onresult: 음성 인식 결과가 있을 때 호출됩니다.

기능 설명

음성을 텍스트로 변환한 후 배열에 집어 넣어서 includes() 메서드를 사용하여 키워드의 존재여부를 확인하고 존재하면 해당 기능을 수행하도록 기능을 구현하였습니다.