🗣️ 라이브러리 없이 TTS(Text To Speech) 기능 구현하기

💭 음성 TTS 기능을 도입한 이유

---

편지를 읽기 어려운 사용자(핸드폰을 볼 수 없는 상황이거나 노안, 장애 등) 들도 Sendy(샌디) 서비스를 이용할 수 있도록 텍스트 ➡️ 음성으로 변환해주는 TTS 기능을 도입했다.

🧐 왜 별도 라이브러리나 API가 아닌 Window 내장 Web Speech API를 사용하였나?

---

카카오나 구글에서 제공하는 TTS 서비스의 경우, 음성이 좀 더 자연스럽고 호환성이 좋다는 장점이 있지만 유료 서비스인 관계로 무료로 사용할 수 있는 Window Web Speech API을 이용해 TTS를 구현하였다.

💌 샌디 속 음성 TTS 기능

---

아쉽게도 벨로그엔 동영상이 업로드되지 않아 GIF로 대체한다. 혹 궁금한 사람이 있다면, 위 샌디 사이트를 방문해주세요 ! 📮

🗣️ Web Speech API 기능 및 사용법

---

Web Speech API 는 웹 앱에서 음성 데이터를 처리하는 API로, SpeechSynthesis(텍스트 음성 변환) 및 SpeechRecognition(비동기 음성 인식)의 두 부분으로 구성된다.

1. SpeechSynthesis

컨트롤러 역할을 하는 Interface로 디바이스에서 사용가능한 목소리 정보를 가져와 음성을 스피치하고 정지할 수 있다.

주요 메서드	기능
getVoices()	현재 사용하고 있는 디바이스의 사용 가능한 목소리를 가져온다.
speak()	utterance(speech)를 utterrace queue에 쌓아 음성으로 읽을 수 있게 한다.

2. SpeechSynthesisUtterance

speech 요청을 표현하는 interface로 무엇을 어떻게 읽을지에 대한 정보를 포함하고 있다.

주요 프로퍼티	설정
lang	ko-KR 와 같이 사용할 언어에 대한 설정으로, 기본값은 lang값 또는 user-agent-default 값이다.
pitch	스피치의 pitch 값으로, 기본값은 1이며 0 ~ 2까지 조절 가능하다.
rate	스피치의 속도값으로 기본값은 1이다. 0.1에서 10까지 조절 할 수 있으며, 숫자가 클수록 속도가 빠르다.
voice	스피치 목소리 설정값으로, 미설정 시 utterance 언어의 default 언어 목소리가 기본값이 된다.

3. 딜레이 문제 해결

• TTS 기능을 구현해 사용해보니 window.speechSynthesis.getVoices() 메서드에서 딜레이가 발생해 최초 사용시 몇 초 후 TTS 음성이 나오는게 확인되었다. 따라서 페이지 초기 렌더링 시 해당 메서드도 함께 렌더링 될 수 있도록 useEffect 에 넣어 문제를 해결하였다. 결과적으로 딜레이 없이 TTS 기능을 사용 할 수 있게 되었다.

  //음성 변환 목소리 preload
  useEffect(() => {
    window.speechSynthesis.getVoices();
  }, []);

👩🏻‍💻 최종 구현한 코드

---

TTS. js

• 음성 TTS 재생

export const getSpeech = (text) => {
  let voices = [];

  //디바이스에 내장된 voice를 가져온다.
  const setVoiceList = () => {
    voices = window.speechSynthesis.getVoices();
  };

  setVoiceList();

  if (window.speechSynthesis.onvoiceschanged !== undefined) {
    //voice list에 변경됐을때, voice를 다시 가져온다.
    window.speechSynthesis.onvoiceschanged = setVoiceList;
  }

  const speech = (txt) => {
    const lang = "ko-KR";
    const utterThis = new SpeechSynthesisUtterance(txt);
    //rate : speech 속도 조절 (기본값 1 / 조절 0.1 ~ 10 -> 숫자가 클수록 속도가 빠름 )
    const rate = 0.8;

    utterThis.lang = lang;
    utterThis.rate = rate;

    /* 한국어 vocie 찾기
        디바이스 별로 한국어는 ko-KR 또는 ko_KR로 voice가 정의되어 있다.
    */
    const kor_voice = voices.find(
      (elem) => elem.lang === lang || elem.lang === lang.replace("-", "_")
    );

    //힌국어 voice가 있다면 ? utterance에 목소리를 설정한다 : 리턴하여 목소리가 나오지 않도록 한다.
    if (kor_voice) {
      utterThis.voice = kor_voice;
    } else {
      return;
    }

    //utterance를 재생(speak)한다.
    window.speechSynthesis.speak(utterThis);
  };

  speech(text);
};

• 음성 TTS 멈춤

export const pauseSpeech = () => {
  window.speechSynthesis.cancel();
};

ReadLetter. js

import { getSpeech, pauseSpeech } from "./TTS";

...

  //음성 value 상태
  const voiceValue = `${data.content}`;

  //음성tts speech 버튼
  const handleSpeechButton = () => {
    getSpeech(voiceValue);
  };
  //음성tts pause 버튼
  const handlePauseButton = () => {
    getSpeech(pauseSpeech());
  };

  //음성 변환 목소리 preload
  useEffect(() => {
    window.speechSynthesis.getVoices();
  }, []);

return (
  
   <>
    ...
     <AiOutlineSound onClick={handleSpeechButton} />
     <HiPause onClick={handlePauseButton} />
    ...
    
   </>   
  
  )
}

💭 아쉬운점

---

• 무료 API 이다보니 음성이 조금 부자연스럽고 이질감이 든다.
• 또 브라우저 기반으로 코드를 작성하였기 때문에, 모바일 환경에서는 음성 TTS 기능이 송출되지 않는다는 문제점이 있다.
• 추후tts-react , 혹은 react-speech-kit 를 통해 리팩토링해 사항들을 개선할 예정이다.

| 참고자료