点击按钮重载audio元素后sound.wav未更新的解决方法求助

我有一个时长14秒的音频文件sound.wav，当用户点击按钮时，我修改了该文件的源URL并重新加载，此时文件时长变为7秒。但浏览器并未显示这些变化，只有点击页面刷新按钮后才会生效。

以下是我的代码：

<div id="audioContainer">
  <audio id ="myAudio" controls>
    <source id = "wav_src" src="http://localhost:3000/sounds/sound.wav" type="audio/wav">
  </audio>
</div>

// 用户点击按钮后...
// 修改sound.wav的URL源
document.getElementById("myAudio").load(); // 尝试重新加载音频

如你所见，用户点击按钮后我重新加载了对应的HTML audio元素，但网站上的音频文件并未改变，除非手动刷新页面。请问该如何解决这个问题？

这个问题大概率是浏览器缓存在搞鬼——浏览器会缓存之前加载过的音频文件，即使你替换了服务器上的文件，浏览器还是会优先用本地缓存的旧文件，导致你看不到新音频的变化。下面给你几个可行的解决办法：

方法1：给URL添加随机参数，绕过缓存 #

修改音频源的时候，在URL末尾加上一个随机的查询参数（比如时间戳或者随机数），这样浏览器会认为这是一个全新的资源，不会调用缓存。示例代码：

// 用户点击按钮的处理逻辑
const audio = document.getElementById("myAudio");
const source = document.getElementById("wav_src");
// 给原URL添加时间戳参数，确保每次请求都是新资源
source.src = `http://localhost:3000/sounds/sound.wav?t=${Date.now()}`;
// 重新加载音频
audio.load();
// 要是需要立即播放新音频，可以额外调用 audio.play()

方法2：替换整个source元素 #

有时候直接修改src属性可能会有缓存残留，你可以直接删除原来的source元素，创建一个新的source元素插入进去，再重新加载：

const audio = document.getElementById("myAudio");
const container = document.getElementById("audioContainer");

// 移除旧的audio元素
container.removeChild(audio);

// 创建新的audio和source元素
const newAudio = document.createElement("audio");
newAudio.id = "myAudio";
newAudio.controls = true;

const newSource = document.createElement("source");
newSource.id = "wav_src";
newSource.src = "http://localhost:3000/sounds/sound.wav";
newSource.type = "audio/wav";

// 组装并插入到页面
newAudio.appendChild(newSource);
container.appendChild(newAudio);
// 新元素会自动加载，也可以手动调用 newAudio.load()

方法3：配置服务器禁用该音频文件的缓存 #

如果不想在前端加参数，你可以在服务器端设置响应头，让浏览器不要缓存sound.wav文件。比如在Node.js/Express里可以这样配置：

app.get('/sounds/sound.wav', (req, res) => {
  // 设置响应头禁用缓存
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  res.sendFile('path/to/sound.wav');
});

这样每次请求这个音频文件时，浏览器都会从服务器重新获取最新版本，不会依赖缓存。

你可以先试试方法1，这是最简单快捷的方案，一般就能解决问题啦！

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