Flutter网页视图与文本转语音插件web_view_tts的使用

Flutter网页视图与文本转语音插件web_view_tts的使用

概览

该库用于在Android WebView中添加文本转语音（Text-To-Speech）支持。

开始使用

使用flutter_inappwebview进行WebView开发，并使用flutter_tts进行Android TTS支持。

在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter_inappwebview: ^5.4.3+7
  web_view_tts: 0.0.1

设置WebView，请参考flutter_inappwebview文档。对于添加TTS支持，请参考flutter_tts文档。

使用方法

在flutter_inappwebview的onLoadStart回调中，添加以下方法：

onLoadStart(controller) async {
  await WebViewTTS.init(controller: controller);
}

功能特性

web_view_tts库支持以下TTS API：

• Speak
• Stop
• Pause
• Resume
• getVoices
• setVolume
• setPitch
• setRate

注意事项

此库仅在Android上添加TTS polyfill，因为iOS的WebView已支持这些功能。

额外信息

这是初始版本，欢迎贡献或报告任何问题！

示例代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:web_view_tts/web_view_tts.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (Platform.isAndroid) {
    await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);
  }
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flowser",
      home: WebsiteView(),
    ),
  );
}

class WebsiteView extends StatefulWidget {
  const WebsiteView({Key? key}) : super(key: key);

  [@override](/user/override)
  State<WebsiteView> createState() => _WebsiteViewState();
}

class _WebsiteViewState extends State<WebsiteView> {
  var url = "https://dlutton.github.io/flutter_tts/#/";

  final urlController = TextEditingController();
  InAppWebViewController? webViewController;
  bool canGoBack = false;
  double? progress;
  int currentKey = 1;

  // 在页面加载开始时初始化TTS
  onLoadStart(controller) async {
    await WebViewTTS.init(controller: controller);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flowser"),
        centerTitle: true,
        leading: canGoBack
            ? IconButton(
                onPressed: () {
                  webViewController?.goBack();
                },
                icon: const Icon(Icons.arrow_back_ios),
              )
            : const SizedBox(),
        actions: [
          IconButton(
            onPressed: () async {
              setState(() {
                currentKey++;
              });
            },
            icon: const Icon(Icons.sync),
          ),
        ],
      ),
      body: SafeArea(
        child: Column(
          children: [
            progress == null
                ? const SizedBox()
                : LinearProgressIndicator(
                    color: Colors.green,
                    value: progress,
                  ),
            TextField(
              decoration: const InputDecoration(prefixIcon: Icon(Icons.search)),
              controller: urlController,
              keyboardType: TextInputType.url,
              onSubmitted: (value) {
                var url = Uri.parse(value);
                if (url.scheme.isEmpty) {
                  url = Uri.parse("https://www.google.com/search?q=$value");
                }
                webViewController?.loadUrl(urlRequest: URLRequest(url: url));
              },
            ),
            Expanded(
              child: Stack(
                children: [
                  InAppWebView(
                    key: Key('$currentKey'),
                    initialUrlRequest: URLRequest(url: Uri.parse(url)),
                    onLoadStart: (controller, url) => onLoadStart(controller),
                    initialOptions: InAppWebViewGroupOptions(
                      android: AndroidInAppWebViewOptions(
                        useHybridComposition: true,
                      ),
                    ),
                    pullToRefreshController: PullToRefreshController(
                      onRefresh: () async {
                        await webViewController?.reload();
                      },
                    ),
                    onLoadStop: (controller, uri) async {
                      bool canGoBack = await controller.canGoBack();
                      setState(() {
                        urlController.text = uri.toString();
                        canGoBack = canGoBack;
                      });
                    },
                    onProgressChanged: ((controller, prg) {
                      setState(() {
                        progress = prg / 100;
                        if (prg == 100) {
                          progress = null;
                        }
                      });
                    }),
                    onConsoleMessage: (controller, consoleMessage) {
                      print("ConsoleMessage : ${consoleMessage.messageLevel.toString()} :  ${consoleMessage.message}");
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}