如何清除流式音频缓存，实现播放时同步直播流？

我正在开发一款小型HTML5音频播放器，用来播放直播流式音频。播放/暂停控制用jQuery实现，功能基本正常，但遇到一个头疼的问题：暂停后再次点击播放，播放器不会刷新音频缓存同步直播流，而是从暂停的位置继续播放。现在必须按F5刷新页面才能重新同步直播，试过在URL后加时间戳、动态增删HTML标签、移除preload属性，但都没解决。

请问每次点击播放时，怎么彻底刷新流式音频、清空缓存，不用刷新页面就能同步直播流？

我的相关代码如下：

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");
});

你遇到的核心问题是浏览器会缓存音频流请求，即便加了时间戳，复用同一个<audio>元素可能仍会保留之前的缓存状态。试试下面几个方法，应该能搞定：

方法一：销毁并重建<audio>元素 #

每次播放时，不要复用原来的#music元素，直接移除它再创建新的插入DOM，彻底清空之前的缓存和状态：

$('#play').click(function() {
  // 移除旧的audio元素
  $('#music').remove();
  // 创建新的audio元素
  const newAudio = $('<audio id="music" loop="false"></audio>');
  // 插入到原来的位置（这里假设是body，你可以改成实际的容器选择器）
  $('body').append(newAudio);
  
  const timestamp = new Date().getTime();
  const streaming = `<source src="/radio/live.php?dev=${timestamp}" type="audio/mp3"><source src="/radio/live_2.php?dev=${timestamp}" type="audio/ogg">`;
  
  newAudio.html(streaming);
  newAudio[0].play();
  
  $('#play').css("visibility", "hidden");
  $('#pause').css("visibility", "visible");
});

$('#pause').click(function() {
  const audio = $('#music')[0];
  if (audio) {
    audio.pause();
    $('#music').remove(); // 暂停后直接移除，下次播放重建
  }
  $('#play').css("visibility", "visible");
  $('#pause').css("visibility", "hidden");
});

方法二：用load()强制重新加载资源 #

如果不想重建元素，试试调用load()方法，它会强制浏览器重新解析<audio>的源并加载最新数据，绕过缓存：

$('#play').click(function() {
  const timestamp = new Date().getTime();
  const streaming = `<source src="/radio/live.php?dev=${timestamp}" type="audio/mp3"><source src="/radio/live_2.php?dev=${timestamp}" type="audio/ogg">`;
  
  $('#music').html(streaming);
  $('#music')[0].load(); // 关键：强制重新加载资源
  $('#music')[0].play();
  
  $('#play').css("visibility", "hidden");
  $('#pause').css("visibility", "visible");
});

方法三：检查服务器端缓存头（必看） #

如果前端方法还不行，大概率是服务器给直播流接口设置了缓存。在你的live.php和live_2.php顶部添加以下代码，禁止浏览器缓存：

// 禁止缓存的响应头
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pragma: no-cache"); // HTTP 1.0
header("Expires: 0"); // 针对代理服务器

这样浏览器每次请求都会获取最新的直播流，不会用缓存的旧数据。

测试建议 #

先试方法二，改动最小见效快；如果不行再试方法一；最后检查服务器缓存设置，三者结合基本能解决问题。

内容的提问来源于stack exchange，提问作者Tormy Van Cool