[Flutter] TTS - Text To Speech

2021-05-16 hit count image

이번 블로그 포스트에서는 Flutter에서 TTS(Text To Speech) 기능를 사용하는 방법에 대해서 알아보겠습니다.

개요

이번 블로그 포스트에서는 Flutter에서 글자를 소리내어 읽어주는 기능인 TTS(Text To Speech)를 사용하는 방법에 대해서 알아봅시다. 이 블로그에서는 Flutter에서 TTS 기능을 구현하기 위해, flutter_tts 패키지를 사용할 예정입니다.

이 블로그에서 소개하는 소스코드는 GitHub에서 확인하실 수 있습니다.

그럼 Flutter에서 TTS 기능을 사용하기 위해 flutter_tts 패키지를 사용하는 방법에 대해서 알아봅시다.

Flutter 프로젝트 생성

다음 명령어를 사용하여 flutter_tts 패키지를 사용할 Flutter 프로젝트를 생성합니다.

flutter create tts_example

Null safety를 적용하기 위해 다음 명령어를 실행합니다.

cd tts_example
dart migrate --apply-changes

flutter_tts 패키지 설치

Flutter에서 TTS 기능을 사용하기 위해, 다음 명령어를 실행하여 flutter_tts 패키지를 설치합니다.

flutter pub add flutter_tts

안드로이드 설정

flutter_tts는 안드로이드 SDK 21 이상에서만 사용 가능합니다. 이를 위해 android/app/build.gradle 파일을 열고 다음과 같이 수정합니다.

minSdkVersion 21

사용법

이제 flutter_tts 패키지를 사용하여 Flutter에서 TTS 기능을 사용해 봅시다. main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  final FlutterTts tts = FlutterTts();
  final TextEditingController controller =
      TextEditingController(text: 'Hello world');

  Home() {
    tts.setLanguage('en');
    tts.setSpeechRate(0.4);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: controller,
          ),
          ElevatedButton(
              onPressed: () {
                tts.speak(controller.text);
              },
              child: Text('Speak'))
        ],
      ),
    );
  }
}

소스 코드를 자세히 살펴 봅시다.

import 'package:flutter_tts/flutter_tts.dart';

flutter_tts 패키지를 사용하기 위해 패키지를 import 하였습니다.

class Home extends StatelessWidget {
  final FlutterTts tts = FlutterTts();
  final TextEditingController controller =
      TextEditingController(text: 'Hello world');
  ...
}

Flutter에서 TTS 기능을 사용하기 위해 FlutterTts 인스턴스를 생성하였고, 사용자가 입력한 내용을 읽게 하기 위해 TextEditingController 인스턴스를 생성하여 사용자의 입력을 받을 준비를 하였습니다.

class Home extends StatelessWidget {
  ...
  Home() {
    tts.setLanguage('en');
    tts.setSpeechRate(0.4);
  }
  ...
}

Home 위젯이 생성될 때, FlutterTts에서 제공하는 기능을 사용하여 언어를 초기화하였고, 읽기 속도를 조절하였습니다.

class Home extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: controller,
          ),
          ElevatedButton(
              onPressed: () {
                tts.speak(controller.text);
              },
              child: Text('Speak'))
        ],
      ),
    );
  }
  ...
}

화면에 사용자로부터 텍스트를 입력받기 위한 TextField와 입력받은 텍스트를 읽기 위한 버튼을 ElevatedButton 위젯으로 구성하였습니다.

실행

지금까지 개발한 Flutter 앱을 다음 명령어로 실행해 봅니다.

flutter run

또는 사용하고 있는 에디터의 디버깅 기능으로 실행하면, 다음과 같은 화면을 볼 수 있습니다.

flutter tts

그리고 화면에 보이는 Speak 버튼을 누르면 Hello world를 읽어주는 소리를 들을 수 있습니다.

TextField에 다른 텍스트를 입력하하고 Speak 버튼을 눌러도 소리가 잘 들리는 것을 확인할 수 있습니다.

다른 기능들

  • speak: TTS로 글씨를 읽는다.
  • stop: 현재 읽고 있는 TTS를 중지한다.
  • get languages: TTS가 지원하는 언어 리스트를 가져온다.
  • set language: TTS의 언어를 설정한다.
  • set speech rate: TTS의 읽기 속도를 설정한다.
  • set speech volume: TTS의 볼륨을 조절한다.
  • get voices: TTS가 지원하는 음성 리스트를 가져온다.
  • set voice: TTS의 음성을 설정한다.

이 밖에도 다양한 기능을 제공하고 있습니다. 더 자세한 내용은 아래 링크를 참고하시기 바랍니다.

완료

이것으로 Flutter에서 TTS(Text To Speech) 기능을 사용하기 위해 flutter_tts를 사용하는 방법에 대해서 살펴보았습니다. 이제 Flutter에서 TTS 기능을 사용하여 글자를 읽는 기능을 제공해 보시기 바랍니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts