Speech Recognition project

javascript 30 사이트에는 재미있어 보이는 프로젝트가 아주 많다.

나는 그 중 아래의 5가지를 이번주까지 해보려고 한다.

• Unreal Webcam Fun
• Native Speech Recognition
• Geolocation based Speedometer and Compass (이건 아이폰 시뮬레이션도 공부하는 거라 흥미가 간다 )
• Video Speed Controller UI
• Countdown Clock

오늘은 Native Speech Recognition !

(사실 Geolocation based Speedometer and Compass을 하려고 시작했는데,
애플 시뮬레이션을 돌릴 수 있는 XCode를 다운로드 받는 시간이 너~~~무 오래걸려서 이건 내일 하려고 한다.)

무엇을 만들었나요?

Native Speech Recognition project는 마이크를 통해 음성을 인식하고 그것을 텍스트로 변환하여 한국어 혹은 영어로 화면에 출력하는 내용이었다.
(발화자의 컴퓨터에 어떤 언어가 사용되고 있는지에 따라 다른 것 같다.
강의에서는 영어만 출력되었고, 내가 독일어 혹은 프랑스어를 말해도 한국어 혹은 영어로만 출력되었다.)

텀 없이 쭉 말하면 한 개의 paragragh에 텍스트가 저장되고,
텀이 있을 경우 한 줄 띄어쓰기 후 새로운 paragragh에 텍스트가 저장된다.

어제 만든 Speech Detection 프로그램과 결합하고
중간에 언어가 번역되는 과정을 추가한다면,
번역 프로그램처럼 음성을 인식해 텍스트로 출력하고
그 텍스트를 번역해서 발화해주는 번역 프로그램을 만들 수 있을 것 같다!

또한,

시각장애인과 비시각장애인, 청각장애인과 비청각장애인이 대화를 할 수 있도록 사이에서 돕거나,
혹은 시각장애인과 청각장애인이 서로 무리 없이 대화를 할 수 있도록 돕는 프로그램을 만들 수도 있을 듯 하다!

항상 원하고 꿈꾸던 삶이었던 '세상을 보다 덜 불공평하게 돕는 일'을
코딩을 통해 이룰 수 있을 것 같다.

그런 기대감에 프로젝트를 하는 내내 온 몸이 저리고 감각이 둔화된다.
(꼭 롤러코스터 타고 있을 때처럼.)

어렸을 때부터 하고 싶은 게 너무 많았는데
막상 어른이 된 후 이룬 게 별로 없는 것 같아
무기력하고 불안한 상태가 지속되어왔다.

그런 상태가 지속되다 보니 어떤 목표를 이루는 것,
혹은 목표를 세우는 것 자체에도
자신감을 잃었다.

그런데 코딩을 시작하고 나니,
내가 생각해오던 것들을 이룰 수 있을 것 같은 기대감과 믿음이 생겨난다.

위코더 분들, 또 내가 앞으로 이 분야에서 일하면서 만나게 될 분들과 함께
한 걸음씩 나아가야겠다.

급하지 않게, 느리더라도 꾸준히.

오늘 익힌 메소드

• .interimResults
  예)
  const recognition = new SpeechRecognition(); 변수명.interimResults = true;
  : 음성인식이 아직 끝나지 않았을 때의 결과를 true 혹은 false로 return 한다.
  이걸 true로 두기 때문에, 우리가 말하는 동시에 언어인식 및 화면출력이 될 수 있다.
  만약 이 속성을 입력하지 않거나 false로 두면, 동시에 인식 및 출력이 불가하기 때문에 한 문장씩 띄어서 말해야 한다.
  (화자 한 문장 말하고, 쉬는 동안 컴퓨터가 인식 및 출력하고,
  또 화자가 한 문장 말하고, 쉬는 동안 컴퓨터가 인식 및 출력하고.)

• Document.createElement()

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

: 언어 인식이 멈출 때, 새로운 p 태그를 만들어서 언어를 저장한다.
나는 이게 정말 신기했다. 음성 인식을 통해 새로운 paragraph가 자동으로 생성되다니..!!

• Node.appendChild()
  : 새로운 단락 요소를 생성하고, 문서에 있는 바디 요소의 끝에 그 단락을 붙인다.

• Node.textContent
  : 나는 p.textContent = transcript 를 설정했기 때문에, p에 담기는 텍스트가 transcript가 된 결과로 반환된다.

• recognition.addEventListener('end', recognition.start)
  : 언어인식이 end가 되면, recognition.start가 작동하면서 다시 처음부터 코드가 시작된다.

오늘 만든 프로그램은 아래의 주소로 접속하면 만나볼 수 있다.
https://jeanbaek.github.io/projects/realSpeechRecognition.html