如何使用 MediaSource 尋找音頻並繼續播放？

Question

我目前正在嘗試按照Google Developers 上的教程為我的 Angular Web 應用程序實現音頻播放器，以及我在“ 從 MediaSource 播放時無法搜索視頻”中找到的一些幫助。

不過，在我的情況下，最大的不同是我想流式傳輸音頻塊，這樣用戶就不必下載整個文件即可立即收聽。

從頭到尾收聽曲目已經開始工作，因為我只是從服務器下載字節塊，並在每個塊到達時將它們附加到SourceBuffer 。

但是，我無法實現“搜索”功能。

我不太明白如何在客戶端上處理這個問題。 目前我只處理 mp3 文件。 我找不到任何地方例如seeking解釋。

我知道根據Media Events doc設置audio元素的currentTime將觸發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設置為相關有問題的框架的時間（我自己沒有嘗試過）。