[Flutter] TTS - Text To Speech

2021-05-19 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機能を使って文字を読む機能を提供してみてください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts