Wesbos - 음성인식

---

음성인식 라이브러리를 통해 내 말을 자동으로 받아쓰여지도록 구현해볼 수 있다 !

---

로직

1. 라이브러리 불러오기 및 기본설정 (window.SpeechRecognition)
2. addEventListener ⇒ 이벤트 수신과 메서드

3. 태그 형태로 append

---

라이브러리 불러오기 및 기본설정!

💡 SpeechRecognition이라는 웹 라이브러리를 사용한다. (크롬, 엣지)

파이어폭스에선 window.webkitSpeechRecognition 이 사용된다.

사용법

const OOOO = new SpeechRecognition();

// 브라우저 호환성을 위해 두 개의 라이브러리를 선언
window.SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
// interimResults = false로 줄 경우, 문장이 아닌 단어만을 인식한다.
recognition.interimResults = true;

// 'en-US'도 가능!
recognition.lang = 'ko-KR';

---

이벤트리스너

💡 result = 결과값이 도출될 경우

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
        .map(result => result[0]) // 제일 첫번째에 results, transcript 담겨있음
        .map(result => result.transcript)
        .join('');
    };
})

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

우리에게 필요한건 results의 transcript!

---

p태그로 append!

let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p); // .words의 자식요소로 넣기

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

  p.textContent = transcript;
  // 만약 말이 끝났으면, 다시 p태그를 생성 -> 음성 인식 -> 인식된 결과 붙여넣기
  if (e.results[0].isFinal) {
    p = document.createElement('p');
    words.appendChild(p);
  }
});

덮어쓰기 → 줄글 형태로 쭉 쓰기

---

최종 완성 코드

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

const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'ko-KR';

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('');

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

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

---