正确使用多个提供者来使用 Riverpod 和 Flutter 渲染音频字幕

Question

我是 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 ，它给了我持续时间。 我可以使用该持续时间 + 每个单词附带的同步数据来确定应该显示哪个单词。

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

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

Answer 1

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