텍스트 음성 변환 프로그램

Text to Speech, for short, TTS.

텍스트를 음성으로 변환하는 프로그램을 만들었다.

구글 번역기를 쓸 때, 스피커 모양 버튼을 눌러 외국어를 읽어주고
e-book을 읽을 때, 오디오북 서비스를 통해 책을 읽어주는 그 기능을!!!
내가 만들었다!!!

너무 신기하다.

작년부터 구상하고 있는 앱 개발 아이디어가 있는데,
그 아이디어를 구현하는 데 한 발짝 다가선 것 같다.

요즘 엄마가 영어회화를 공부하면서 내게 영어로 말을 구사해달라고 하실 때가 종종 있다.

내가 만든 이 프로그램은 말 속도도 느리거나 빠르게 조정할 수 있어서,
영어 문장을 연습하고 싶어하시는 엄마에게도 도움이 될 수 있을 것 같다.

익힌 메소드

• lable for="rate" / "pitch"
  : lable은 폼의 양식에 이름을 붙이는 태그이다.
  lable for의 값과 input의 id 값을 동일하게 하면 연결되므로, 다양한 기능을 연결시킬 수 있다.

• input name="rate" type="range" min="0" max="3" value="1" step="0.1"
  : range 타입은 유튜브에서 소리를 조절할 때와 같은 양식을 가진다.
  value는 default 값을 지정하고, step은 한 칸에 어느 정도씩 움직이는 지 정한다.

• textarea
  : 글을 입력하는 박스를 출력해주며, 웹페이지 상에서 박스 내 글을 수정할 수 있다.

• SpeechSynthesisUtterance()
  : 브라우저에 내장되는 웹 음성 API이다.
  음성 발화와 관련한 6개의 속성을 가지고 있다.
  왜 처음 선언할 때는 SpeechSynthesisUtterance를 사용하고, 이후에는 계속 speechSynthesis를 사용하는지 궁금하다.

  • addEventListener()를 통해 7개의 이벤트 속성을 사용할 수 있다.
  • .getVoices() 함수를 통해 SpeechSynthesisVoice 목록을 반환받을 수 있다.

• SpeechSynthesis

  • .speak(msg)
    (msg는 미리 const msg = new SpeechSynthesisUtterance();로 지정한 변수명이다.)
    : 글을 음성으로 발화한다.

  • .cancel()
    : 작업을 중지하거나 취소한다.

• .querySelector('[name="voice"]')
  : 태그 내의 속성을 지정할 때는 따옴표, 대괄호를 함께 입력한다.

• .innerHTML
  : element의 속성으로 element 내에 포함 된 HTML 또는 XML 마크업을 불러오거나 설정한다.

• .bind(null, false)
  : 새롭게 바인딩한 함수를 생성한다. 바인딩한 함수는 원본 함수 객체를 감싼다.

오늘 만든 코드는 아래의 웹주소로 만나볼 수 있다.
(디자인 요소는 하나도 고려하지 않고, 순수하게 기능을 작동하는 것에 의의를 뒀다.
크롬으로 접속하길 추천한다.
(이유는 아직 못찾았는데, 사파리로 접속할 경우 언어 리스트가 출력되지 않는다.))
https://jeanbaek.github.io/projects/speech