안녕하세요!

Derek 입니다 😁

오랜만에.. 게시물을 올려봅니다. 조금 쉬는 시간을 가져봤어요.

아우.. 너무 춥기도하고 눈도 많이와서.. 약간은 한 박자 쿵 쉬었네요 :)

오늘은 Day 20 project 입니다! 저번 19번째랑 뭔가 비슷하게 눈에 딱 보이는 재밌는 기능을 구현해볼거에요.

개인적으로는 이거 잘 활용하면 꽤나 멋진 기능을 구현할 수 있지 않을까 합니다.

---

---

---

20. Speech Detection

목표

음성인식을 하는 프로그램을 만들어본다. 사용자가 말하는 것에 따라 바로바로 만들어지며, 잠깐 멈추면 다음 문단에 인식한 내용을 적는다.

마이크에 입력되는 말을 자동으로 인식하여 받아적는, 프로그램입니다.

이는 19번쨰 게시물처럼 내장함수를 많이 이용함 참고 부탁드려요.

---

Derek 과 Wes Bos의 구현 코드

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

const recognition = new SpeechRecognition();
recognition.interimResults = true;
// without this, we need to stop speaking bf it give us anything

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);
  }

  // API를 활용해서 날씨를 가져올 수 있다.
  if(transcript.includes("날씨 알려 줘")) {
    console.log("getting Weather...");
  }

})

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

recognition.start();

복잡합니다! 시작해볼게요.

---

01. SpeechRecognition 객체 생성

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

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

이 부분은 SpeechRecognition 객체를 생성합니다. 생성한 이 객체로 음성인식을 만들거에요.

interimResults를 true 로 하지 않으면, 실시간으로 음성인식이 된 글자가 적히지 않아요. 말을 멈춰야 음성인식 한 내용을 출력하는 양상인데, true 로 하면 해결된답니다 :)

02. 출력을 위한 태그 생성

다음은 음성인식 결과로 나온 문장을 HTML로 보여주기 위해서 태그를 생성하는 과정입니다.

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

간단해요! p 태그를 생성하고, HTML 에 있는 words 클래스를 찾아서 거기다가 넣어줍니다.

03. recognition 이벤트 등록

이제 본격적으로 입력되는 음성 input 을 받습니다.

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);
  }

  // API를 활용해서 날씨를 가져올 수 있다.
  if(transcript.includes("날씨 알려 줘")) {
    console.log("getting Weather...");
  }

})

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

recognition.start();

여기서 보시면,

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

recognition.start();

1번에서 생성한 recognition 객체에 end event 를 등록해줍니다. end event 는, 여기보시면 알 수 있듯이,

The end event of the Web Speech API SpeechRecognition object is fired when the speech recognition service has disconnected.

라고 합니다. 즉, 음성입력이 끝나면, 수행하는 이벤트죠!
끝나면, 등록된 recognition.start 함수를 수행하니까, 음성입력이 끝나도 다시 음성입력을 기다려라, 라는 뜻입니다 :)

이제 이벤트 함수를 보면,

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);
  }

  // API를 활용해서 날씨를 가져올 수 있다.
  if(transcript.includes("날씨 알려 줘")) {
    console.log("getting Weather...");
  }

})

이를 명확하게 설명하기는 어렵지만, e.results 에 대한 객체를 console.log 을 이용하면 좋을것 같아요.

발생하는 이벤트 객체인 e 의 result 맴버를 배열로 만든다음, 0번째 -> transcript 멤버에 접근하면, 음성으로 입력된 결과값들이 있어요. 그 친구들을 join 으로 묶어서 transcript 변수에 저장합니다.

객체가 어렵게만 생긴거고, 안에 추출할 인자만 알게되면 쉽다고 생각합니다!

이 과정만 하면 transcript 변수를 p.textContent 에 넣기만 하면 끝이에요.

---

다만, 이 부분은 한가지 기능때문에 들어가는 부분입니다.

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

음성 입력을 마쳐 잠깐 멈출때, 그러고 다시 말을 할때 문단을 띄워서 출력하기 위한 기능이에요.

isFinal 이라는 끝났는지 알수 있는 메소드가 있어 그친구가 참이라면, 앞선 HTML 요소를 조정해줍니다.

04. 응용

여기서 굉장히 유용하게 사용할 수 있을것 같은게 있더라구요.

// API를 활용해서 날씨를 가져올 수 있다.
if(transcript.includes("날씨 알려 줘")) {
  console.log("getting Weather...");
}

이벤트 함수에서 이런 코드가 있다면, 날씨 조회나 / 위치 조회나 / 다양한 명령을 구현할 수 있을 것 같아요.

transcript 는 사용자가 말하는 문자열이 들어가 있으니, "날씨 알려줘" 라는 음성이 인식된다면, 원하는 기능을 추가하면 될 것 같아요 :)

---

---

---

오늘은 지난번에 이어서 꽤나 재밌고 눈에 보이는 기능을 구현해보았습니다.

객체들만 다루는 내용이라 빠삭하게 설명은 어렵지만, 얼마든지 응용가능해서 좋을것 같아요!
틀린내용이나 수정할 내용이 있다면 언제든지 피드백 부탁드립니다!

감사합니다!🤗