JS에서 음성 인식 시작하기

소개가 마음에 들지 않으면 건너뛰세요 -

Google Assistant에서 Apple의 Siri, Amazon의 Alexa에서 Microsoft의 Cortana에 이르기까지 모든 곳에서 음성 인식이 사용되고 있습니다. 무언가를 검색하거나 질문을 할 때 모두가 핸즈프리 경험을 즐깁니다!!

당사 웹사이트도 음성 인식 시스템과 통합될 수 있다는 사실을 알고 계셨습니까? 몇 가지 명령을 사용하여 웹 사이트를 운영하고 테마를 변경하고 텍스트를 음성으로 출력할 수도 있습니다.

이 자습서에서는 JavaScript에서 Web Speech API를 사용하여 음성 인식을 설정하는 프로세스를 안내합니다.

이제 더 이상 기다리지 않고 시작하겠습니다.

전제 조건 -

JavaScript용 IDE 설치/Repl.it을 온라인 IDE로 사용할 수도 있습니다.

JavaScript에 대한 기본 지식. (JavaScript에 대한 개요는 이전 항목을 참조하십시오.

그리고 언제나처럼 배움에 대한 열정!

Web Speech API 이해 -

이름에서 알 수 있듯이 Web Speech는 기본적으로 음성/텍스트 명령을 처리하기 위한 API입니다.
그것은 2 부분이 있습니다:

음성 인식(Voice to text)

음성 합성(텍스트 음성 변환)

참고 - API는 모든 브라우저와 호환되지 않습니다. 호환성 차트는 다음과 같습니다.
Speech Recognition에 대한 호환성 -

Speech Synthesis에 대한 호환성 -

설정 -

우선 인식 인터페이스를 Speech Recognition로 설정하여 시작합니다.

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

음성 인식 실행 기능 -

이제 음성 인식을 시작하는 기능을 정의합니다.

recognition.onstart = function(){
    console.log("The Recognition has fired, start speaking!");
}

참고 - concole.log 명령은 콘솔에 지정된 명령문을 인쇄합니다(검사 페이지 또는 Ctrl + Shift + I에서 볼 수 있음).

인식 결과 처리 기능 -

대화를 마치면 onresult 이벤트 핸들러가 2차원 배열인 속성 결과와 함께 SpeechRecognitionEvent를 반환합니다. 이러한 결과를 사용하기 위해 아래와 같이 recognition.onresult 함수를 정의합니다.

recognition.onresult = function(event){
    var transcript = event.results[0][0].transcript; 
    document.querySelector("#OutputBox").textContent = transcript;

recognition.start();

반환된 event.results 행렬에는 변환된 Speech가 transcript라는 첫 번째 개체로 포함되어 있습니다.
querySelector 의 도움으로 HTML 코드에 있는 요소의 ID를 얻을 수 있고 그 결과를 해당 요소에 인쇄하여 사용자 화면에 표시할 수 있습니다.
recognition.start()는 인식을 시작하는 데 사용됩니다.

마무리-

Speech-to-Text를 사용한 음성 인식은 다소 덜 유용해 보일 수 있지만 다른 아이디어와 통합하면 사용자 경험을 훨씬 더 좋게 만들 수 있습니다.
예를 들어, 다음과 같이 사용할 수 있습니다.

실제로 모든 세부 정보를 입력하지 않고 양식을 채웁니다.

지정된 키워드만 사용하여 테마를 변경합니다.

웹 사이트의 한 부분에서 다른 부분으로 텍스트를 복사하여 붙여넣습니다.

무엇 향후 계획?

이 기사를 여기까지 따라했다면 음성 인식을 성공적으로 통합할 수 있었을 것입니다.

기사가 마음에 들었고 도움이 되었다면 저에게 유니콘 🦄을 선물해 주세요.

또한 다음 자습서에서 멋진 웹 응용 프로그램을 만들기 위해 음성 인식을 통합할 것이므로 더 많은 자습서를 위해 계속 지켜봐 주십시오!

출처 -

MDN web docs