JS中从数据库重新加载音频文件失效问题求助

问题核心是浏览器缓存：浏览器会把首次加载的音频文件存到本地，后续请求相同URL时直接读取缓存，哪怕服务器上的文件已经更新，调用load()也没法让浏览器重新请求新文件。

直接有效的解决办法是给音频URL追加唯一查询参数，让浏览器判定这是新资源，从而重新从服务器拉取最新文件：

比如修改代码为：

function action() {
  // 用当前时间戳做参数，保证每次请求的URL都唯一
  var audioUrl = "https://mydb.com/output.wav?timestamp=" + Date.now();
  var audio = new Audio(audioUrl);
  audio.play();
}

也可以用随机数当参数：

function action() {
  var audioUrl = "https://mydb.com/output.wav?rand=" + Math.random();
  var audio = new Audio(audioUrl);
  audio.play();
}

如果是在更新数据库后触发播放，只要保证每次播放用的URL都带不同参数即可，无需额外调用load()——创建新的Audio实例时会自动加载新URL对应的资源。

另外也可以在服务器端给音频文件配置更严格的缓存规则（比如缩短缓存过期时间），但前端追加参数的方法无需修改服务器配置，见效更快。

内容的提问来源于stack exchange，提问作者Pelgoos