JavaScript에서 음성 인식을 위해 웹 음성 API 사용

웹 음성 API는 음성 데이터를 웹 응용 프로그램에 병합하는 데 사용됩니다.본 강좌에서 우리는 웹 음성 API를 사용하여 음성 식별을 실현하는 간단한 웹 페이지를 구축할 것이다.웹 음성 API here의 브라우저 호환성을 확인할 수 있습니다.

선결 조건

이 강좌를 계속 공부하려면 다음과 같은 기능이 있어야 합니다.

은 HTML 및 JavaScript에 대해 기본적으로 알고 있습니다.

코드 편집기.Visual Studio Code을 사용하겠습니다.

은 브라우저를 사용하여 웹 페이지를 볼 수 있는데 가장 좋은 것은 Google Chrome 또는 Firefox이다.

클론 시작 코드

나는 음성인식에 더욱 집중하기 위해 시작 코드를 준비했다.너는 GitHub에서 그것을 복제할 수 있다. from this repository.저장소의 설명을 참조하십시오.
마지막 코드에 관해서는 이 GitHub Repository을 보실 수 있습니다.
초보자 코드에서 나는 언어와 사투리 선택 메뉴, 음성인식 시작/정지 버튼 두 개, 성적표를 표시하는 상자를 설정했다.나는 Bootstrap으로 웹 페이지를 디자인한다.

저희가 인코딩을 해볼게요.

먼저 새 JavaScript 파일을 만들고 이름을 speechRecognition.js으로 지정합니다.그런 다음 script 태그 다음에 body 태그를 사용하여 HTML 파일에 스크립트를 추가합니다.

Adding the script tag after the body tag will make sure that the script file is loaded after all the elements have been loaded to the DOM which aids performance.

<script src="./speechRecognition.js"></script>

현재 스크립트 파일에서 webkitSpeechRecognition 클래스가 window 대상에서 사용할 수 있는지 확인합니다.없으면 console.log을 사용하십시오. 그러면 사용할 수 없습니다.

if ("webkitSpeechRecognition" in window) {

  // Speech Recognition Stuff goes here

} else {
  console.log("Speech Recognition Not Available")
}

초기화

지금부터 우리가 쓴 모든 내용은 if 조건 내에 있다.webkitSpeechRecognition 대상을 만듭니다.

let speechRecognition = new webkitSpeechRecognition();

등록 정보

이제 이 speechRecognition 대상에 속성을 설정합니다.

경청

음성인식 대상자는 사용자가 말을 멈춘 후 듣는 것을 멈출 수도 있고, 듣는 것을 멈출 때까지 계속 들을 수도 있다.단어나 단어만 식별하려면 false으로 설정할 수 있습니다.본 강좌에 대해 우리는 그것을 true으로 설정한다.

speechRecognition.continuous = true;

중간 결과

중기 결과는 아직 확정되지 않은 결과다.이 속성을 사용하면 speechRecognition 대상은 중간 결과와 최종 결과를 되돌려줍니다.우리는 그것을 true으로 설정했다.

speechRecognition.interimResults = true;

언어

이것은 사용자가 사용할 언어입니다.이 속성을 설정하려면 로케일 코드를 사용해야 합니다.이 기능에는 아직 모든 언어가 제공되지 않았습니다.
사용자가 선택 메뉴에서 선택한 언어를 설정합니다.사투리 선택 메뉴를 선택하고 그 값을language 속성에 사용해야 합니다.

speechRecognition.lang = document.querySelector("#select_dialect").value;

이벤트 및 콜백

onStart, onEnd, onResult 및 onError 등의 이벤트에 대한 콜백을 제공할 수 있습니다.

부팅

사용자가 음성 인식을 시작할 때 이 이벤트를 터치합니다.음성 인식 실례가 웹 페이지에서 탐청하고 있음을 보여 주는 리셋 함수를 전달합니다.
시작 코드에는 <p> 요소가 있는데 그 ID는 status이고 Listening...을 나타낸다.CSS를 사용하여 요소의 display 속성을 none으로 설정하여 숨길 수 있습니다.
음성 인식이 시작되면 display: block으로 설정합니다.

speechRecognition.onstart = () => {
  document.querySelector("#status").style.display = "block";
};

오니드

사용자가 음성 인식을 끝낼 때 이 이벤트를 터치합니다.웹 페이지에 숨겨진 상태 <p> 요소를 리셋 함수로 전달합니다.
음성 인식이 시작되면 display: none으로 설정합니다.

speechRecognition.onend = () => {
  document.querySelector("#status").style.display = "none";
};

오넬로

음성 인식에 오류가 발생하면 이 이벤트를 터치합니다.웹 페이지에 숨겨진 상태 <p> 요소를 리셋 함수로 전달합니다.
음성 인식이 시작되면 display: none으로 설정합니다.

speechRecognition.onError = () => {
  document.querySelector("#status").style.display = "none";
};

onResult

speechRecognition 대상이 식별 결과가 있을 때 이 사건을 촉발합니다.그것은 최종 결과와 중기 결과를 포함할 것이다.결과를 텍스트 상자에 해당하는 <span>으로 설정하는 리셋 함수를 전달합니다.
웹 페이지의 텍스트 상자에 대한 HTML 코드입니다.중간 결과 범위는 중간 결과와 최종 결과를 구분하기 위해 다른 색으로 표시됩니다.

<div class="p-3" style="border: 1px solid gray; height: 300px; border-radius: 8px;">
  <span id="final" class="text-light"></span>
  <span id="interim" class="text-secondary"></span>
</div>

중간 결과는 중간 ID가 있는 span으로, 최종 결과는 최종 ID가 있는 span으로 설정해야 합니다.
결과 이벤트는 리셋 함수에 event 대상을 전달합니다.이 대상은 배열 형식으로 결과를 포함합니다.수조의 모든 원소는 isFinal이라는 속성을 가지고 이 항목이 임시 결과인지 최종 결과인지를 나타낸다.
리셋 함수 외부에서 최종 성적표에 변수를 설명하고, 리셋 함수 내부에서 임시 성적표에 변수를 설명합니다.

let final_transcript = "";

speechRecognition.onresult = (event) => {
  // Create the interim transcript string locally because we don't want it to persist like final transcript
  let interim_transcript = "";
};

이제 결과 그룹에서 문자열을 만듭니다.우리는 그것을 순환을 통해 실행해야 한다. 만약 결과 항목이 최종적이라면, 결과 항목을 최종 성적표에 추가해야 한다.만약 없다면, 임시 결과 문자열에 추가해야 합니다.

// Loop through the results from the speech recognition object.
for (let i = event.resultIndex; i < event.results.length; ++i) {
  // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
  if (event.results[i].isFinal) {
    final_transcript += event.results[i][0].transcript;
  } else {
    interim_transcript += event.results[i][0].transcript;
  }
}

마지막으로 기록된 값으로 DOM을 업데이트하겠습니다.

document.querySelector("#final").innerHTML = final_transcript;
document.querySelector("#interim").innerHTML = interim_transcript;

onResult 이벤트의 전체 코드 세그먼트입니다.

let final_transcript = "";

speechRecognition.onresult = (event) => {
  // Create the interim transcript string locally because we don't want it to persist like final transcript
  let interim_transcript = "";

  // Loop through the results from the speech recognition object.
  for (let i = event.resultIndex; i < event.results.length; ++i) {
    // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }

  // Set the Final franscript and Interim transcript.
  document.querySelector("#final").innerHTML = final_transcript;
  document.querySelector("#interim").innerHTML = interim_transcript;
};

인식 시작/중지

마지막으로 식별을 시작하고 멈추겠습니다.
음성 인식을 시작하고 중지하려면 시작 및 중지 버튼의 onClick 속성을 설정해야 합니다.

document.querySelector("#start").onclick = () => {
  speechRecognition.start();
};
document.querySelector("#stop").onclick = () => {
  speechRecognition.stop();
};

다음은 speechRecognition.js의 최종 코드입니다.

if ("webkitSpeechRecognition" in window) {
  // Initialize webkitSpeechRecognition
  let speechRecognition = new webkitSpeechRecognition();

  // String for the Final Transcript
  let final_transcript = "";

  // Set the properties for the Speech Recognition object
  speechRecognition.continuous = true;
  speechRecognition.interimResults = true;
  speechRecognition.lang = document.querySelector("#select_dialect").value;

  // Callback Function for the onStart Event
  speechRecognition.onstart = () => {
    // Show the Status Element
    document.querySelector("#status").style.display = "block";
  };
  speechRecognition.onerror = () => {
    // Hide the Status Element
    document.querySelector("#status").style.display = "none";
  };
  speechRecognition.onend = () => {
    // Hide the Status Element
    document.querySelector("#status").style.display = "none";
  };

  speechRecognition.onresult = (event) => {
    // Create the interim transcript string locally because we don't want it to persist like final transcript
    let interim_transcript = "";

    // Loop through the results from the speech recognition object.
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }

    // Set the Final transcript and Interim transcript.
    document.querySelector("#final").innerHTML = final_transcript;
    document.querySelector("#interim").innerHTML = interim_transcript;
  };

  // Set the onClick property of the start button
  document.querySelector("#start").onclick = () => {
    // Start the Speech Recognition
    speechRecognition.start();
  };
  // Set the onClick property of the stop button
  document.querySelector("#stop").onclick = () => {
    // Stop the Speech Recognition
    speechRecognition.stop();
  };
} else {
  console.log("Speech Recognition Not Available");
}

결실

프로젝트 here의 배포 버전을 볼 수 있습니다.

한번 되돌아보도록 하겠습니다.

GitHub 저장소에서 이니시에이터 코드를 복제했습니다.

새 JavaScript 파일을 만들고 HTML 파일에 링크했습니다.

우리는 webkitSpeechRecognition 클래스가 window 대상에서 사용할 수 있는지 검사했다.

우리는 webkitSpeechRecognition류의 새로운 실례를 창설했다.

우리는 음성인식 실례에 일부 속성을 설정했다. 예를 들어 continuous, interimResults과 language이다.

우리는 서로 다른 사건에 리셋 방법을 추가했다. 예를 들어 onStart, onEnd, onError과 onResult이다.

음성 인식을 시작하고 중지하는 온클릭 속성을 설정합니다.

축하해,🥳 해냈어.
읽어주셔서 감사합니다!