[JS30] - 20) Speech Detection

🎤 세팅

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

🎧 SpeechRecognition

Web Speech API로, 음성인식

SpeechRecognition.interimResults

interim results는 최종이 아닌 중간 결과를 말하는 것으로, boolean 값을 반환한다.

이 값을 설정해주어야 음성인식이 끝나지 않아도 말하는 도중에 계속해서 스크립트가 작성된다.

🎧 SpeechRecognition: result event

speech recognition service가 결과를 리턴했을 때 이벤트가 발생한다.
여기서 말하는 결과란, 단어나 구가 정상적으로 인식되어 앱으로 전달되는 것을 말한다.

  recognition.addEventListener('result', e => {
    console.log(e);
  })

  recognition.start();

console.log(e)의 출력문은 다음과 같다.

e.result를 보면

여기에 이렇게 transcript 란에 음성인식 결과가 들어있다.

🎤 화면에 출력하기

 recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
      .map(result => result[0])
      .map(result => result.transcript)
      .join('')

      p.textContent = transcript;
  })

🎧 노드 추가하기

  let p = document.createElement('p');
  const words = document.querySelector('.words');
  words.appendChild(p);

🎧 음성인식된 문자를 조합해 문장으로 만들기

 recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
      .map(result => result[0])
      .map(result => result.transcript)
      .join('')

e.results의 결과를 배열로 만든다.

results[0]이 SpeechRecognitionResult
results[0][0]이 SpeechRecognitionAlternative이다.
result.transcript에서 음성인식 된 내용을 가져와 병합한다.

병합한 내용은 p의 textContent로 할당해 화면에 표시되도록 한다.

여기까지 하면 음성인식은 한번만 진행되고 끝난다.

🎤 지속적으로 음성인식 하기

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

recognition이 끝날때마다 다시 시작시킨다.
음성인식은 한 번 말하고 나서는 종료되기 때문에 이렇게 해야 끊고 나서 다시 말해도 음성인식이 된다.

🎤 다시 말할 때 줄바꿈해 내용 적기

SpeechRecognitionResult.isFinal

음성인식이 끝났는지 여부를 불리언 값으로 반환한다.
var myIsFinal = speechRecognitionResultInstance.isFinal;

      if(e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
      }

한번 시작될 때 p태그를 새로 만든다음 노드에 추가해 인식 내용을 할당하기 때문에, 한번 끊고 말하면 다음 줄 새로운 텍스트 노드에 인식 내용이 표시된다.

🎤 음성인식

가장 흥미로웠던 부분이다. 주위에서 볼 수 있는 음성인식 기술을 구현해 볼 수 있다.

      if(transcript.includes('get the weather')) {
        console.log('geting the weather')
      }

transcript는 문자열 형태이니, 특정단어를 포함하는지 판별해 원하는 함수 혹은 API를 실행시킬 수 있다.
예를 들어, '날씨 알려줘'라는 단어를 들으면 날씨를 보여주는 기능을 구현해놓으면, 음성인식 기능이 구현되는 것이다.

Reference

• https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognitionResult/isFinal
• https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition