Flutter动画效果插件riva_flutter的使用

Flutter动画效果插件riva_flutter的使用

简介

riva_flutter 是一个用于实现设备特定的语音识别和文本转语音功能的库。该插件包含一组类，使得在 Flutter 中使用底层平台的语音识别能力变得简单。它支持 Android 和 iOS 平台。该库的主要应用场景包括持续的语音转换或始终监听并转换连续的文本到语音。

使用方法

初始化 riva

首先，需要初始化 SDK：

await FRivaManager.initSdk(host: 'your_host_url');

这里 host 是你的主机 URL，languageTTS 是你想要使用的文本转语音的语言，languageSTT 是你想要使用的语音转文本的语言，sampleRateTTS 和 sampleRateSTT 分别是播放和录制数据的采样率，voiceName 是语音名称。

开始语音转文本

使用以下代码开始语音转文本，并通过回调接收结果：

FRivaManager.startSTT(
  onStart: () {},
  onSpeeching: (textSpeeching) {},
  onSuccess: (textRecognized) {},
  onError: (error) {},
  onComplete: () {}
);
  • onStart: 开始语音转文本时调用。
  • onSpeeching: 正在处理语音时调用。
  • onSuccess: 成功识别语音后调用。
  • onError: 发生错误时调用。
  • onComplete: 完成语音处理后调用。
开始文本转语音

使用以下代码开始文本转语音，并通过回调接收结果：

FRivaManager.startTTS(
  textOrigin, 
  onStart: () {}, 
  onPlaying: () {}, 
  onError: (error) {}, 
  onComplete: () {}
);
  • textOrigin: 要转换为语音的原始文本。
  • onStart: 开始文本转语音时调用。
  • onPlaying: 正在播放语音时调用。
  • onError: 发生错误时调用。
  • onComplete: 完成语音播放后调用。
翻译文本

使用以下代码将文本翻译成指定语言：

FRivaManager.translateText(
  inputText: 'your_input_text', 
  inputLanguageCode: LanguageSupport, 
  outputLanguageCode: LanguageSupport
);
  • inputText: 需要翻译的输入文本。
  • inputLanguageCode: 输入语言代码。
  • outputLanguageCode: 输出语言代码。

权限设置

iOS
  • 最小 SDK 版本：11.0
  • 在 Info.plist 文件中添加麦克风权限：
<key>NSMicrophoneUsageDescription</key>
<string>Some message to describe why you need this permission</string>
Android
  • 最小 SDK 版本：21（amrNb/amrWb: 26, Opus: 29）
  • 在 AndroidManifest.xml 文件中添加录音权限：
<uses-permission android:name="android.permission.RECORD_AUDIO" />

示例代码

以下是完整的示例代码，展示了如何使用 riva_flutter 插件进行语音转文本和文本转语音的操作。

import 'package:flutter/material.dart';
import 'package:model_viewer_plus/model_viewer_plus.dart';
import 'package:provider/provider.dart';
import 'package:riva_flutter/riva_shelf.dart';

import 'audio_model.dart';

void main() async {
  await FRivaManager.initSdk(host: '', languageTTS: LanguageSupport.vietnamese, voiceName: "huyennguyen");
  runApp(MultiProvider(
    providers: [ChangeNotifierProvider(create: (context) => AudioModel())],
    child: const MyApp(),
  ));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Riva Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Stack(children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Consumer<AudioModel>(
                builder: (BuildContext context, AudioModel value, Widget? child) {
                  return Stack(
                    alignment: Alignment.bottomRight,
                    children: [
                      Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8), color: Colors.lightBlueAccent.withAlpha(100)),
                          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
                          margin: const EdgeInsets.all(16),
                          height: 150,
                          width: double.infinity,
                          child: SingleChildScrollView(child: Text(value.resultRecord))),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: IconButton(onPressed: _startSpeak, icon: const Icon(Icons.volume_up_rounded)),
                      )
                    ],
                  );
                },
              ),
              Consumer<AudioModel>(
                builder: (BuildContext context, AudioModel value, Widget? child) {
                  return Center(
                    child: value.isRecording
                        ? const Text('Loading')
                        : TextButton(
                            onPressed: _startRecord,
                            style: ButtonStyle(
                              shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(8),
                                  side: const BorderSide(color: Colors.lightBlue))),
                              minimumSize: const MaterialStatePropertyAll(Size(double.minPositive, 100)),
                              backgroundColor: const MaterialStatePropertyAll(Colors.lightBlue),
                            ),
                            child: const Text('Start record', style: TextStyle(color: Colors.white)),
                          ),
                  );
                },
              ),
            ],
          ),
        ]),
      ),
    );
  }

  void _startRecord() {
    FRivaManager.startSTT(
        onStart: () {
          context.read<AudioModel>().isRecording = true;
        },
        onSpeeching: (textSpeeching) {},
        onSuccess: (textRecognized) {
          context.read<AudioModel>().resultRecord = textRecognized;
          context.read<AudioModel>().isRecording = false;
        },
        onError: (error) {
          context.read<AudioModel>().resultRecord = error;
          context.read<AudioModel>().isRecording = false;
        },
        onComplete: () {
          context.read<AudioModel>().isRecording = false;
        });
  }

  bool _toggleSpeak = true;

  void _startSpeak() {
    var textOrigin = context.read<AudioModel>().resultRecord;
    // var textOrigin = 'Hiện tại đối tác đã up lên server test, tuy nhiên họ bảo nếu làm auto login sẽ không kịp thời gian, hiện tại đang để login thủ công trong game luôn. Tuy nhiên là nó lại bị lỗi này khi login bằng facebook thì có cách nào khắc phục đc k?';

    if (_toggleSpeak) {
      FRivaManager.startTTS(textOrigin: textOrigin);
    } else {
      FRivaManager.stopTTS();
    }
    _toggleSpeak = !_toggleSpeak;
  }
}

更多关于Flutter动画效果插件riva_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画效果插件riva_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，riva_flutter 是一个用于在 Flutter 应用中实现复杂动画效果的插件，它基于 RivaScript，一个专门为动画设计的小巧且强大的脚本语言。下面是一个简单的示例，展示如何在 Flutter 项目中使用 riva_flutter 插件来播放动画。

首先，确保你已经在 pubspec.yaml 文件中添加了 riva_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  riva_flutter: ^最新版本号  # 替换为实际的最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，你需要一个 .riv 文件，这是一个 RivaScript 动画文件。假设你已经有一个名为 animation.riv 的文件，并且它已经被放置在项目的 assets 文件夹中。

在 Flutter 项目中，你可以按照以下步骤来使用 riva_flutter 播放动画：

  1. 在 pubspec.yaml 中添加资源文件：
flutter:
  assets:
    - assets/animation.riv
  1. 创建一个 Flutter Widget 来加载和播放动画：
import 'package:flutter/material.dart';
import 'package:riva_flutter/riva_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Riva Flutter Animation Example'),
        ),
        body: Center(
          child: RivaAnimationPlayer(
            // 加载 .riv 文件
            asset: 'assets/animation.riv',
            // 设置动画开始播放时触发的回调
            onLoad: (RivaAnimationController controller) {
              // 开始播放名为 "idle" 的动画
              controller.play('idle');
            },
            // 设置动画循环播放时的回调（可选）
            onLoop: (RivaAnimationController controller) {
              // 可以在这里重置动画状态或执行其他操作
            },
            // 设置动画完成时触发的回调（可选）
            onComplete: (RivaAnimationController controller) {
              // 动画完成后的操作
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，RivaAnimationPlayer 小部件负责加载和播放 .riv 文件中的动画。onLoad 回调在动画加载完成后被触发，此时你可以调用 controller.play('animation_name') 来播放指定的动画。

请注意，RivaAnimationController 提供了许多方法来控制动画，比如暂停、恢复、跳转到特定帧等。你可以根据需要扩展这个示例来实现更复杂的动画控制。

确保你的 .riv 文件已经正确配置，并且动画名称与你在代码中使用的名称相匹配。如果你不熟悉如何创建 .riv 文件，你可以使用 Rive (以前称为 Flutter Riva) 的桌面应用程序来设计动画。

以上代码提供了一个基本的框架，展示了如何在 Flutter 应用中使用 riva_flutter 插件来播放动画。根据你的具体需求，你可以进一步自定义和扩展这个示例。

回到顶部