如何使用 MediaSource 寻找音频并继续播放？

Question

我目前正在尝试为我的 Angular Web 应用程序实现一个音频播放器，遵循 a tutorial on Google Developers 以及我在“Can't seek video when playing from MediaSource”上找到的一些帮助。

在我的情况下，最大的不同是我想流式传输音频块，这样用户不必下载整个文件即可立即收听。

从头到尾收听曲目已经开始工作了，因为我只是从服务器下载字节块，并在它们到达时简单地将每个块附加到 SourceBuffer。

但是，我无法实现“搜索”功能。

我不太明白如何在客户端处理这个问题。目前我只处理 mp3 文件。我找不到解释seeking 的任何示例。

我知道设置audio 元素的currentTime 将根据Media Events doc 触发seeking 事件。 我们有：

this.audioObj = document.createElement('audio');

还有一个二传手：

public seekTo(seconds) {
  this.logger.debug(`seekTo ${seconds.toFixed(2)} seconds`);
  // Setting currentTime will cause a "seeking" event to be emitted.
  this.audioObj.currentTime = seconds;
}

我认为我必须在设置currentTime 之前加载新数据并将其附加到sourceBuffer。但是，由于显而易见的原因，这根本行不通。

我怎样才能做到这一点？

Answer 1

如果你设置了持续时间，你应该可以设置 currentTime 但不会有什么可玩的。您可以使用 currentTime 通知块提取器您需要文件的哪个部分并将其附加，以便媒体元素可以继续播放。

请注意，使用 mp3 时，SourceBuffer 将在sequence 模式下运行，因为没有时间戳，这意味着如果你只是盲目地附加字节，它们将不会在正确的时间点 - 我相信你需要将timestampOffset 设置为相关帧的相关时间（我自己没有尝试过）。