jquery - <audio> 如何防止缓存流文件？

Question

我正在创建一个小型 HTML5 音频播放器，用于播放流文件。 控件(仅播放和暂停)由 jQuery 管理，并且工作正常。

但是我看到的是，当我停止播放并重新开始播放时，它不会刷新音频缓冲区，使其与流媒体音乐保持同步......而只是暂停它，然后从我播放的点重新开始停了下来。 要正确重新启动文件流(我的意思是:保持流同步)，我必须按 F5!

为了尝试在每次按下 PLAY 时强制更新，我将经典时间戳添加到 URL，并根据单击的按钮添加(和删除)html 标签，但不成功。

我还从音频中删除了“预加载”标签，但这也不起作用。

如何在每次按“播放”时完全刷新流文件，清空缓冲区？与原始流媒体文件保持同步而不是被迫按 F5？

HTML

...
...
<audio id="music" loop="false">
</audio>
...
...

jQuery

...
...
$('#play').click(function() {
    var d = new Date();
    var n = d.getTime();
    var streaming = "<source src=\"/radio/live.php?dev=" + n + "\" type=\"audio/mp3\">" +   "<source src=\"/radio/live_2.php?dev=" + n + "\" type=\"audio/ogg\">";
    $('#music').html(streaming);
    $('#music')[0].play();
    $('#play').css("visibility", "hidden");
    $('#pause').css("visibility", "visible");
});

$('#pause').click(function() {

    $('#music').empty();
    $('#music')[0].pause();
    $('#play').css("visibility", "visible");
    $('#pause').css("visibility", "hidden");
});
...
...

Answer 1

我确实找到了办法。也许这就是解决方案，也许不是，但它确实有效。

我在单击“暂停”时添加了这一行

location.reload(true ); 

因此，暂停的代码现在位于下面。 换句话说，当单击 Puse 时，它​​会:

$('#pause').click(function() {
    location.reload(true ); // reload the content and flush any cache or buffer
});

一旦点击“播放”，一切都会与流媒体同步正确开始