자바스크립트 async/await를 이용한 음성 인식

10 Sep 2023

javascript

음성 인식은 현재 많은 분야에서 중요한 역할을 하고 있으며, 웹 개발 또한 예외는 아닙니다. 자바스크립트를 이용하여 웹 애플리케이션에서 음성 인식을 구현하고 싶다면 async/await를 활용하는 것이 간단하면서도 효과적인 방법입니다. 이번 포스트에서는 자바스크립트의 async/await 문법을 이용하여 음성 인식을 구현하는 방법을 알아보겠습니다.

Web Speech API

Web Speech API는 웹 브라우저에서 음성 인식과 음성 합성을 가능하게 해주는 API입니다. 이 API를 활용하여 웹 페이지에서 음성 인식을 할 수 있습니다.

먼저, 음성 인식을 위해 SpeechRecognition 객체를 생성합니다. 이 객체는 음성 인식 서비스를 제공합니다.

// 음성 인식 객체 생성
const recognition = new webkitSpeechRecognition();

SpeechRecognition 객체를 생성한 후에는 다양한 설정을 할 수 있습니다. 예를 들어, 언어를 설정하거나 인식 결과를 자동으로 연속적으로 받을 것인지를 결정할 수 있습니다.

recognition.lang = 'ko-KR'; // 인식 언어 설정 (한국어)
recognition.continuous = true; // 연속적으로 인식 결과를 받을지 여부 설정

이제 음성 인식을 시작하고, 결과를 얻을 때마다 콜백 함수를 호출하도록 설정합니다.

recognition.start(); // 음성 인식 시작

recognition.onresult = function(event) {
  const result = event.results[0][0].transcript; // 인식 결과 추출
  console.log(result); // 인식 결과 출력
  
  // 여기서 인식 결과를 처리하는 로직을 작성하세요
}

위 코드에서 onresult 이벤트 핸들러는 음성 인식 결과가 나왔을 때 호출되는 콜백 함수입니다. 이 콜백 함수 내부에서는 인식 결과를 처리하는 로직을 작성하면 됩니다.

async/await를 이용한 음성 인식 구현

코드를 제어하는데 있어서 async/await 문법을 사용하면 비동기적인 작업을 간편하게 처리할 수 있습니다. 이를 이용하여 음성 인식을 구현해보겠습니다.

먼저, 음성 인식을 위한 함수를 async 함수로 만들어줍니다.

const recognition = new webkitSpeechRecognition();

async function startSpeechRecognition() {
  recognition.lang = 'ko-KR';
  recognition.continuous = true;
  recognition.start();

  return new Promise((resolve, reject) => {
    recognition.onresult = function(event) {
      const result = event.results[0][0].transcript;
      console.log(result);
      
      // 인식 결과를 처리하는 로직을 작성하세요

      resolve(result); // 인식 결과를 resolve하여 함수 완료
    }

    recognition.onerror = function(event) {
      reject(event.error); // 에러 발생 시 reject하여 함수 종료
    }
  });
}

위 코드에서 startSpeechRecognition 함수는 async 함수로 선언되었습니다. 이 함수 내부에서 음성 인식 설정을 수행하고, 인식 결과를 처리하는 콜백 함수를 등록한 후, Promise 객체를 생성하여 호출한 곳으로 결과를 반환합니다.

이제, 이 함수를 호출하여 음성 인식을 시작할 수 있습니다.

async function handleSpeechRecognition() {
  try {
    const result = await startSpeechRecognition();
    console.log("인식 결과: ", result);
    // 인식 결과를 활용하는 로직을 작성하세요
  } 
  catch (error) {
    console.error("에러 발생: ", error);
  }
}

handleSpeechRecognition();

위 코드에서 handleSpeechRecognition 함수는 startSpeechRecognition 함수를 호출하여 음성 인식을 시작합니다. 결과를 기다리기 위해 await 키워드를 사용하고, 실행 결과에 따라 적절한 처리를 수행합니다.

결론

이번 포스트에서는 자바스크립트의 async/await 문법을 이용하여 음성 인식을 구현하는 방법을 알아보았습니다. 음성 인식은 웹 애플리케이션에 다양한 기능을 추가할 수 있는 강력한 도구입니다. async/await를 활용하여 비동기 작업을 간편하게 처리하면서, 애플리케이션의 사용자 경험을 높일 수 있습니다. 음성 인식을 활용해보면 흥미로운 기능들을 구현해볼 수 있으니, 한 번쯤 시도해보시기 바랍니다.