🎤

Flutterで音声の読み上げ機能を実装する

2023/08/21に公開

Flutter

tts

tech

Overview

https://pub.dev/packages/flutter_tts
flutter_ttsとは、入力した文字を音声として読み上げてくれるパッケージです。

見た目はシンプルですが、音声を読み上げてくれるアプリが簡単に作れました。

summary

このパッケージを使用するには、Androidだけ設定の追加が必要みたいです。

最小バージョンに設定をする。これだけで大丈夫みたいです。

minSdkVersion 21

ttsのクラスのインスタンス化と日本語対応が必要なので、コンストラクターの箇所に設定を追加する。

class Home extends StatelessWidget {
  // コンストラクターにFlutterTtsの設定を記述
  Home({super.key}) {
    tts.setLanguage('ja-JP'); // 読み上げる言語を日本語に設定
    tts.setSpeechRate(0.2); // 読み上げる速度を設定
  }

  // FlutterTtsのインスタンスを作成
  final FlutterTts tts = FlutterTts();

音声を読み上げるメソッドをボタンを押したら実行されるようにする。

// ボタンを押したときに入力したテキストを読み上げる
                        tts.speak(controller.text);

音声を停止するメソッドはこちらを使います。

// 音声の呼び上げを停止する
                        tts.stop();

全体のコード

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 {
  // コンストラクターにFlutterTtsの設定を記述
  Home({super.key}) {
    tts.setLanguage('ja-JP'); // 読み上げる言語を日本語に設定
    tts.setSpeechRate(0.2); // 読み上げる速度を設定
  }

  // FlutterTtsのインスタンスを作成
  final FlutterTts tts = FlutterTts();

  @override
  Widget build(BuildContext context) {
    // 入力したテキストを取得するためのコントローラー
    final TextEditingController controller = TextEditingController();

    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                SizedBox(height: MediaQuery.of(context).size.height * 0.1),
                const Text('入力すると音声を読みあげます', style: TextStyle(fontSize: 20)),
                const SizedBox(height: 20),
                SizedBox(
                  width: 300,
                  height: 50,
                  child: TextFormField(
                    controller: controller,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: '入力してください',
                    ),
                  ),
                ),
                const SizedBox(height: 20),
                SizedBox(
                  width: 150,
                  height: 50,
                  child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.grey,
                      ),
                      onPressed: () {
                        // ボタンを押したときに入力したテキストを読み上げる
                        tts.speak(controller.text);
                      },
                      child: const Text('入力')),
                ),
                const SizedBox(height: 20),
                SizedBox(
                  width: 150,
                  height: 50,
                  child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.grey,
                      ),
                      onPressed: () {
                        // 音声の呼び上げを停止する
                        tts.stop();
                      },
                      child: const Text('停止')),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

注意点

thoughts

今回入力した文字を読み上げてくれるパッケージを初めて使用したのですが、本当に読み上げてくれるのだから、驚きましたね!
日本語に設定しないと、日本語で入力しても反応しませんが、英語も読み上げてくれて、ロボットみたいな声が面白いな〜と思いました。

Overview

summary

thoughts

Discussion