html - 如何停止和恢复 HTML5 中的实时音频流而不是暂停它？

Question

当我在 HTML5 中构建一个简单的音频流元素时出现的一个值得注意的问题是 <audio>标签在播放和暂停实时音频流方面的行为并不像人们预期的那样。

我正在使用最基本的 HTML5 代码来传输音频，<audio>带有控件的标签，其来源是直播。

当前结果:首次播放流时，它会按预期播放任何正在流式传输的内容。但是，当它暂停并再次播放时，音频会从之前流暂停时停止的位置恢复。用户现在正在收听流的延迟版本。这种情况不是特定于浏览器的。

期望的结果:当流暂停时，我希望流停止。当它再次播放时，我希望它从流当前所在的位置恢复，而不是用户暂停流时的位置。

有谁知道有什么方法可以让这个音频流在暂停后正常恢复吗？

我为解决此问题所做的一些失败尝试:

• 改变 currentTime音频元素对流式音频没有任何作用。
• 我已在用户停止流播放时从 DOM 中删除音频元素，并在用户恢复播放时将其添加回去。流仍然在用户停止的地方继续，更糟糕的是在幕后下载流的另一个副本。
• 每次播放流时，我都会在流 URL 的末尾添加一个随机 GET 变量，以试图让浏览器相信它正在播放新流。播放仍会在用户暂停流的地方继续。

Answer 1

停止流然后再次启动它的最佳方法似乎是删除源然后调用加载:

var sourceElement = document.querySelector("source");
var originalSourceUrl = sourceElement.getAttribute("src");
var audioElement = document.querySelector("audio");

function pause() {
    sourceElement.setAttribute("src", "");
    audioElement.pause();
    // settimeout, otherwise pause event is not raised normally
    setTimeout(function () { 
        audioElement.load(); // This stops the stream from downloading
    });
}

function play() {
    if (!sourceElement.getAttribute("src")) {
        sourceElement.setAttribute("src", originalSourceUrl);
        audioElement.load(); // This restarts the stream download
    }
    audioElement.play();
}