🎤
Flutterで音声の読み上げ機能を実装する
Overview
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 {
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();
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
今回入力した文字を読み上げてくれるパッケージを初めて使用したのですが、本当に読み上げてくれるのだから、驚きましたね!
日本語に設定しないと、日本語で入力しても反応しませんが、英語も読み上げてくれて、ロボットみたいな声が面白いな〜と思いました。
補足情報
2024/08/12に久しぶりに使ってみると、Androdでエラーが出ました😱
Kotlinのバージョンを上げると解決できました😅
Discussion