[React Native] TTS 사용하기

TTS란?

Text-To-Speech의 약자로 문자를 음성으로 바꾸는 기술을 말한다.

TTS는 다음과 같은 방식으로 동작한다.

• 입력 테스트 분석
• 발음으로 변환
• 단어/문장을 사람 목소리처럼 생성

TTS 사용하기

먼저 TTS를 위한 라이브러리를 설치해준다.

npx expo install expo-speech

그리고 TTS를 사용하고자 하는 파일에 임포트 해준다.

import * as Speech from 'expo-speech';

그 후 음원 재생 함수를 추가해준다.

const readDescriptionsSequentially = (index = 0) => {
  if (index >= descriptions.length) return;

  Speech.speak(descriptions[index], {
    language: 'ko',
    pitch: 1.0,
    rate: 1.0,
    onDone: () => readDescriptionsSequentially(index + 1), // 다음 문장으로 재귀 호출
  });
};

나의 경우, 기존에 있던 코드에 급히 TTS를 추가하게 되었다.
코드 하나하나에 일일이 TTS 기능을 넣는 것은 어렵다고 판단하여 TTS에 사용할 멘트를 배열로 묶어서 버튼을 통해 한 번에 출력되도록 하였다.

const descriptions = [
  '캔은 내부를 깨끗히 세척해줘요.',
  '이후 세로로 찌그러트려서',
  '캔에 배출해요',
];

그리고 버튼을 누르면 readDescriptionsSequentially가 실행되어 소리가 들리도록 하였다.

<TouchableOpacity onPress={() => readDescriptionsSequentially()} style={{ marginVertical: 20 }}>
  <Text style={{ color: '#2e4010', fontSize: 14 }}>듣기</Text>
</TouchableOpacity>

코드를 실행하니 TTS가 한번 실행되면 다른 화면으로 이동해도 계속 나와서 아래의 코드를 추가해줬다.

import { useEffect } from 'react'; 

useEffect(() => {
  return () => {
    Speech.stop();
    shouldStopRef.current = true;
    setIsSpeaking(false);
  };
}, []);