Javascript30 - day20 : Speech Recognition

Javascript만을 이용해서 음성인식 기능을 구현해본다.

 

새로운 문장이 아래로 추가된다.

 

 

컴퓨터에 마이크가 연결되어 있지 않아서 영상을 보면서 코딩을 따라해봤다.

 

 

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
// instance 생성
const recognition = new SpeechRecognition();
// true이면 음절을 연속적으로 인식, false면 한 음절만 기록함
recognition.interimResults = true;
 
recognition.start();

SpeechRecognition 설정

SpeechRecognition이 없으면(Chrome을 사용할 경우) webkitSpeechRecognition을 가져오도록 한다.

 

SpeechRecognition object를 생성한 후

interimResults = true; 로 음절을 연속적으로 인식할 수 있도록 설정한다.

 

recognition.start(); 를 해야 실행된다.

 

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

음성인식을 통해 만들어진 문장을 넣을 p를 class=words div 안에 만들어준다.

 

 

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
    // e.results는 SpeechRecognitionResult 안에 transcript를 가진다
      .map(result => reseult[0])
      .map(result => reseult.transcript)
      .join('')
 
    // 변환된 text를 p에 집어넣음  
    p.textContent = transcript;
 
    // 한 문장이 끝나면 새로운 p를 만들어줌/ 이 과정을 하지 않으면 이전 문장이 사라지고 새로운 문장이 기존 p에 입력됨
    // speech recognition이 끝나면 isFinal = true
    if(e.results[0].isFinal) {
        p = document.createElement('p');
        words.appendChild(p);
    }
 
    // 특정 단어를 찾을 수 있다.
    if(transcript.includes('get the weather')) {
        console.log('Getting the weather');
    }
  });

recognition이 result event를 생성하면(음성을 듣고 인식하기 시작하면) 익명함수를 실행한다.

result event의 구조는 아래와 같다.

ResultList - Result - Alternative - transcript

로 들어가야 우리가 원하는 문장을 얻을 수 있다.

map을 반복해 우리가 원하는 transcript만 모은 array를 만들고, join을 통해 하나의 str로 만들어준다.

Array.from(e.results) -> result[0] (alternative) -> transcript

 

변환된 텍스트를 p.textContent 에 입력해주고, 한 문장이 끝나면 새로운 p를 만들어준다(isFinal = true확인)

 

transcript.inclue()를 사용하면 문장 안에 우리가 찾는 내용이 있는지 찾을 수 있다.

 

 

// 쉬고 나서 다시 새롭게 recognition이 시작하도록 함
recognition.addEventListener('end', recognition.start);
 

recognition은 말을 하다가 중간에 쉬면 end상태로 바뀌고, 더이상 음성인식을 진행하지 않는다.

addEventListener()을 통해 끝난 후 새롭게 시작하도록 한다.