Native Speech Recognition

목표

웹캠 촬영에 이어 음성인식을 구현해 보려함
진짜 자바스크립트는 안되는게 없나봄

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speech Detection</title>
</head>
<body>
  <div class="words" contenteditable>
  </div>
<script>
  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
</script>

<style>
html {
  font-size: 10px;
}
body {
  background:#ffc600;
  font-family: 'helvetica neue';
  font-weight: 200;
  font-size: 20px;
}

.words {
  max-width:500px;
  margin:50px auto;
  background:white;
  border-radius:5px;
  box-shadow:10px 10px 0 rgba(0,0,0,0.1);
  padding:1rem 2rem 1rem 5rem;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
  background-size: 100% 3rem;
  position: relative;
  line-height:3rem;
}
p {
  margin: 0 0 3rem;
}

.words:before {
  content: '';
  position: absolute;
  width: 4px;
  top: 0;
  left: 30px;
  bottom: 0;
  border: 1px solid;
  border-color: transparent #efe4e4;
}
</style>
</body>
</html>

과정

코드 분석

  1. 브라우저에서 음성인식을 위해 설정

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

    브라우저에 따라 webkit속성을 적용

  2. 음성인식을 할 수 있도록 상수 생성

    const recognition = new SpeechRecognition();
    recognition.interimResults = true;
    

    recognition에 음성인식을 할 수 있는 함수를 담아 반환값을 주도록 함

  3. 말한 내용을 p태그로 브라우저에 표시

    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('');
    
       const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
       p.textContent = poopScript;
    
       if (e.results[0].isFinal) {
         p = document.createElement('p');
         words.appendChild(p);
       }
    });
    

    words에 클래스가 word인 요소를 담아 말하는 내용을 담음
    음성인식의 결과를 배열로 변환해 텍스트에 담고, 비속어는 💩로 표시함
    말이 끝나면 p에 한 문장으로 내용을 담고 말이 끝나면 새로운 문장에 다시 시작됨

  4. 이벤트 실행

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

    말을 하면 음성인식이 시작되고, 멈추면 음성인식이 다시 시작된다

찾아본 내용, 알게된 내용들

webkit - 사파리에서 사용하다 브라우저 전역으로 확대, 각종 기능들을 가지고 있음


'개발 > JavaScript30' 카테고리의 다른 글

22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17
20. Native Speech Recognition  (1) 2017.04.17
19. Webcam Fun  (0) 2017.04.17
18. Adding Up Times with Reduce  (0) 2017.04.16
17. Sort Without Articles  (0) 2017.04.13
  1. JW 2018.06.15 10:29

    안녕하세요:0
    자바스크립트로 STT를 구현하려고 하는데 정말 잘 봤습니다.
    제가 그대로 진행해보았는데 마이크가 차단된 페이지라고 나오네요ㅠ
    setting에서 마이크차단을 풀어도 계속 그러네요,,
    혹시 해결방법을 아시나요?ㅠ
    좋은 내용 정말 감사합니다!!

+ Recent posts