js challenge day 20

Speech Detection

 

Code

  <script>
    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

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

    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();
  </script>

 

배운 점 & 느낀 점

speech api를 이용해 말하는걸 text로 남길 수 있는 과제였습니다.

appendchild를 이용해 글자를 붙여주는 방식을 이용합니다.

firefox에서는 지원이 안되기 때문에 크롬을 이용해야 합니다.