如何将文本与旁白音频文件同步并使文本与音频一起滚动（如卡拉 OK）？

Question

在我的应用程序中，我想播放音频文件并显示文本，以便用户可以随着音频一起阅读。我希望此文本自动滚动，以便用户不会丢失其位置。
为了让自动滚动工作，我想我可以为列表视图设置动画，根据时间戳显示正确的文本，但是，这会使添加新音频变得很费力，因为我必须手动浏览每个音频并添加文本时间戳，所以我希望有更好的方法来做到这一点。

如何将音频文件与文本同步而无需创建时间戳？是否可以使用 Flutter 中的语音识别库来做到这一点？

Answer 1

卡拉OK通常使用Lyric(LRC)文件格式来显示歌词。该格式类似于字幕 (SRT) 文件的格式 - 其中时间戳是使用要显示的文本定义的。有一些工具可以帮助您生成歌词文件，例如Aegisub。

目前还没有一种方法可以在没有时间戳的情况下同步音频和文本。如果您倾向于这种方法，到目前为止我见过的最接近的是自动生成的字幕 - 类似于 YouTube 上的应用方式。

解析歌词

这不是一个完整的示例，但您可以使用lyrics_parser插件来解析时间戳（毫秒）和文本。您可以考虑根据您的喜好将时间戳歌词存储在 Map 或 List<Model> 中。

突出显示文本

要突出显示歌词，您可以考虑使用突出显示插件。

歌词

根据视图可以处理的大小（宽度/估计的字符串长度）动态填充 ListView 行。假设一个字符的宽度估计为 5.0。如果我们将估计字符宽度提高到 5.5（以考虑间距和填充），则宽度为 200 的 ListView 行每行可以处理估计 36 个字符。如果大小超过估计的行宽度，则添加新的 ListView 行。

要获取视图的宽度，您可以使用 LayoutBuilder。该小部件获取其父小部件的尺寸。

LayoutBuilder(builder: (context, constraints) {
  debugPrint('Max width: ${constraints.maxWidth}');
})

自动滚屏

要管理自动滚动功能，您可以跟踪行上显示的第一个时间戳并使用ScrollController.animateTo()导航到特定行。

时间同步

对于同步时间，您可以考虑使用Timer.periodichighlightable ，并在滚动条上的时间戳与歌词匹配时使用插件突出显示文本

Row(
  children: [
    HighlightText(
      lyricsText,
      detectWords: true, // set to true to highlight text
    ),
    ...
  ],
)