[Flutter] TTS - Text To Speech - 今回のブログポストではFlutterでTTS(Text To Speech)機能を使う方法について説明します。

概要

今回のブログポストではFlutterで文字を発音して読んでくれる機能であるTTS(Text To Speech)を使う方法について説明します。このブログポストではFlutterでTTS機能を実装するため、flutter_ttsパッケージを使う予定です。

flutter_tts

このブログポストで紹介するソースコードはGitHubで確認できます。

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/packages/tts_example

そしたら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'))
        ],
      ),
    );
  }
  ...
}