원래 webdeasy.de에 게시되었습니다!

With the JavaScript Speech Recoginition API you can implement quite simply ingenious functions that can quickly make native apps look old. This article will show you how to do this!

JavaScript Speech Recoginition API를 사용하면 방문자의 마이크에 액세스하고 음성 입력을 가로채 평가할 수 있습니다. 그리고 그것으로 몇 가지 멋진 것을 구현할 수 있습니다. 이것은 심지어 자신의 AI까지 갈 수 있습니다! 아니면 나만의 Amazon Echo(Alexa)를 만드시겠습니까? 당신에게는 모든 가능성이 있습니다. 🙂

요구 사항

음성 인식 API를 사용하려면 브라우저가 JavaScript를 지원해야 합니다. 다행스럽게도 현재는 표준입니다. 실제로 "사악한 JavaScript"를 차단하고 그 위에 추가 애드온을 설치하는 사람들이 있습니다. 🤯

또한 방문자는 마이크 사용에 1회 동의해야 합니다. 이를 위해 팝업이 표시되며 운영 체제 및 브라우저에 따라 다르게 보일 수 있습니다. 브라우저 설정에서 모든 웹사이트에서 마이크의 일반적인 사용을 허용할 수도 있습니다.

음성 인식 API를 사용하는 방법

처음에는 우리가 사용할 수 있는 인터페이스를 정의합니다. 모든 브라우저가 이 기능을 지원하는 것은 아니기 때문에 이 작업을 수행해야 합니다. Can I use에서 브라우저 지원의 현재 상태를 확인할 수 있습니다.

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

이제 SpeechRecognition 클래스의 인스턴스를 만듭니다. 매개변수 interimResults 를 true 로 설정하여 API가 음성 입력의 끝을 인식한 후에 뿐만 아니라 입력 중에 텍스트 입력을 검색할 수 있습니다. 이렇게 하면 문장이 아직 끝나지 않았더라도 이미 평가를 수행할 수 있습니다.

또한 lang 매개변수를 사용하여 언어를 지정합니다.

모든 이벤트와 매개변수는 Web Speech API documentation에서 직접 읽을 수도 있습니다.

// setup SpeechRecognation
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'en-US';

이제 모든 것이 준비되었으며 음성 입력을 기다리고 평가할 수 있습니다. result 이벤트는 API가 완전한 입력을 인식했을 때 트리거됩니다. 사용자가 문장을 마치고 휴식을 취하고 있을 때.
transcript 변수에서 결과를 찾습니다. 라인 6에서 부울 isFinal은 입력이 완료되었는지 다시 확인합니다.

선택적으로 입력이 특정 단어로 시작하는지 확인하기 위해 10행에서 쿼리를 추가했습니다. 다음 데모는 동일한 원칙을 기반으로 합니다.

// waiting for speech results
recognition.addEventListener('result', event => {
  const transcript = event.results[0][0].transcript;

  // check if the voice input has ended
  if(event.results[0].isFinal) {
    console.log(transcript);

    // check if the input starts with 'hello'
    if(transcript.indexOf('hello') == 0) {
      console.log('You said hello to somebody.');
    }
  }
});

마지막으로 .start() 함수로 음성 입력을 시작하고 입력이 완료되면 호출합니다. 이러한 방식으로 우리는 음성 인식 API가 "영구적으로"듣는다는 것을 달성합니다.

recognition.addEventListener('end', recognition.start);
recognition.start();

청취가 시작되도록 변경할 수 있습니다. 원하는 작업에 따라 버튼을 클릭할 때.

예: 음성 제어 ToDo 목록

또한 음성 인식 API로 약간의 시도를 했고 음성 기반 할 일 목록을 만들었습니다. 동일한 원리를 사용하여 자신만의 음성 컨트롤을 구축할 수도 있습니다. 직접 해보십시오. 처음에 생각했던 것만큼 많은 코드가 필요하지 않습니다!

결론

나 자신은 순수한 웹 애플리케이션의 열렬한 팬이며 일반적으로 많은 기본 앱이 필요하지 않습니다. 음성 인식 API는 이에 크게 기여할 수 있습니다. 구현은 보시다시피 매우 간단합니다. 어떤 멋진 기능을 구현하고 싶습니까? 댓글에 적어주세요. 🙂