使用 Riverpod 和 Flutter 正确使用多个提供程序来渲染音频的字幕答案

【问题标题】：Correct use of multiple providers to render captions for audio using Riverpod and Flutter使用 Riverpod 和 Flutter 正确使用多个提供程序来渲染音频的字幕
【发布时间】：2021-12-03 04:58:56
【问题描述】：

我是riverpod 的新手，我一直在用它制作一个应用程序，该应用程序显示字幕以及旁白该文本的画外音。我的目标是让句子中的每个单词随着叙述到达单词而改变颜色。我已经确定了每个单词的时间，所以我知道他们在录音中说出来的时间。

显示当前所说单词的示例段落可能如下所示：

帽子里的猫

我已经设置了一些这样的提供程序：

final voiceoverAudioPlayerProvider = Provider((ref) {
  return AudioPlayer();
});

voiceoverTextNotifier 对画外音文本、音频文件 URL 和文本/旁白同步数据发出 API 请求，并将其设置为状态值。一旦 API 响应到达，它还会处理播放和停止音频。

final voiceoverTextProvider = StateNotifierProvider((ref) {
  final voiceoverTextRepository = ref.watch(voiceoverTextRepositoryProvider);


  return voiceoverTextNotifier(
      voiceoverTextRepository: voiceoverTextRepository,
      voiceoverAudioPlayer: voiceoverAudioPlayer);
});

小部件看起来像这样：

 @override
  Widget build(BuildContext context, WidgetRef ref) {
    final voiceoverTextState = ref.watch(voiceoverTextProvider);

    var words = <Widget>[];

    voiceoverTextState.when(
        data: (voiceoverText) {
          for (int i = 0; i < voiceoverText.paragraph.length; i++) {
            // Set text color here to `Colors.red`?
            words.add(Text(voiceoverText.paragraph[i].text, style: TextStyle(color: Colors.black)))
          }
          
        },
        ...

   return Wrap(children: words);
 }

音频播放器提供位置更新流audioPlayer.onAudioPositionChanged，它给了我持续时间。我可以使用该持续时间 + 每个单词附带的同步数据来确定应该显示哪个单词。

我不确定我应该在哪里/如何收听流并将其与字幕数据进行比较。根据我的阅读，将它放在小部件中是没有意义的。

我尝试了几种不同的方法，但无法以正确的性能使文本颜色发生变化。在一种情况下，它会注意到提供程序何时更改，但每隔几秒钟才会发生一次，因此会跳过单词。我认为我没有正确使用提供程序。有什么想法吗？

【问题讨论】：

标签： flutter riverpod

【解决方案1】：

事实证明，Flutter 和 Riverpod 不是罪魁祸首。 audioplayers 包文档表明位置事件流每 200 毫秒提供一次数据，这就是我看到事情跳跃的原因。我将研究用于音频播放的替代包。

【讨论】：