FlutterTtsでテキスト読み上げアプリを開発

今回はテキストを音声に変換するFlutterプラグイン「flutter_tts」の使い方と、それを用いた簡単なアプリの作成について説明します！

FlutterTtsとは

FlutterTtsは、iOS、Android、Web、macOSのプラットフォームでテキストを音声に変換するためのプラグインです。以下に主な機能を列挙します。

flutter_tts | Flutter Package

• テキストの音声化（speak）

• 音声の停止（stop）

• 利用可能な言語の取得（get languages）

• 言語の設定（set language）

• 話速の設定（set speech rate）

• 音量の設定（set speech volume）

• ピッチの設定（音の高さを調節）（set speech pitch） 

• 特定の言語が利用可能かどうかの確認（is language available）

FlutterTtsの使い方

まずは、flutter_ttsパッケージをプロジェクトに追加するために、pubspec.yamlファイルに以下を追加します。

/// pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_tts: ^3.7.0 /// here

次に、FlutterTtsのインスタンスを生成します。

FlutterTts flutterTts = FlutterTts();

基本的な使い方は以下のとおりです。

// テキストを音声化する
Future _speak() async{
    var result = await flutterTts.speak("Hello World");
    if (result == 1) setState(() => ttsState = TtsState.playing);
}

// 音声を停止する
Future _stop() async{
    var result = await flutterTts.stop();
    if (result == 1) setState(() => ttsState = TtsState.stopped);
}

// 利用可能な言語を取得する
List<dynamic> languages = await flutterTts.getLanguages;

// 言語を設定する
await flutterTts.setLanguage("en-US");

// 話速を設定する
await flutterTts.setSpeechRate(1.0);

// 音量を設定する
await flutterTts.setVolume(1.0);

// ピッチを設定する
await flutterTts.setPitch(1.0);

// 特定の言語が利用可能かどうかを確認する
await flutterTts.isLanguageAvailable("en-US");

// ボイスを設定する
await flutterTts.setVoice({"name": "Karen", "locale": "en-AU"});

初期の設定では日本語に対応していなかったので、自分はawait flutterTts.setLanguage("ja-JP");で日本語に対応させるようにしたり、テキストの読み上げ速度が遅いのでawait flutterTts.setSpeechRate(1.2);で速度を1.0から1.2倍にしたりと微調整をして使うようにしています。
()の中の数字を変えると各項目を簡単に調整できます。

簡単なアプリの作成

では、上記の知識を活かして、簡単なテキスト読み上げアプリを作成してみましょう。以下に基本的なコードを示します

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Text to Speech'),
        ),
        body: TextToSpeech(),
      ),
    );
  }
}

class TextToSpeech extends StatefulWidget {
  const TextToSpeech({super.key});

  @override
  _TextToSpeechState createState() => _TextToSpeechState();
}

class _TextToSpeechState extends State<TextToSpeech> {
  late FlutterTts flutterTts;
  String text = '';

  @override
  void initState() {
    super.initState();
    flutterTts = FlutterTts();

    flutterTts.setStartHandler(() {
      setState(() {
        print('Playing');
      });
    });

    flutterTts.setCompletionHandler(() {
      setState(() {
        print('Stop');
      });
    });

    flutterTts.setErrorHandler((msg) {
      setState(() {
        print('Error occurred: $msg');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          onChanged: (value) {
            setState(() {
              text = value;
            });
          },
        ),
        ElevatedButton(
          onPressed: () {
            flutterTts.speak(text);
          },
          child: const Text('Speak'),
        ),
      ],
    );
  }
}

このアプリケーションでは、ユーザーがTextFieldに入力したテキストを音声で読み上げます。
そのために、TextFieldウィジェットでユーザーの入力を取得し、ElevatedButtonウィジェットを押すことでflutterTts.speak(text)を実行し、テキストを音声化しています。