点击按钮无法播放更新后音频 缓存导致播放旧音频问题咨询

核心问题原因 #

浏览器对相同URL的静态资源默认启用缓存，只要请求地址不变，就会优先读取本地缓存的旧文件，不会请求服务器上的新版本。

可行解决方法 #

1. 动态追加随机查询参数破除缓存（最简便方案）

每次点击播放时，给音频URL追加一个唯一的时间戳参数，浏览器会识别为不同的请求地址，强制拉取最新文件。
修改你的JS代码如下：

window.play_single_sound = function() {
  const audioEl = document.getElementById('audiotag1');
  // 给音频地址追加时间戳参数，保证每次请求地址唯一
  const baseUrl = "{{url_for('static', filename='/screams/new_scream.wav')}}";
  audioEl.src = `${baseUrl}?t=${Date.now()}`;
  // 重新加载资源后播放
  audioEl.load();
  audioEl.play();
}

对应的HTML可以简化修正，避免原有标签写法不规范的问题：

<td style="position:relative; top:1px;">
  <input id="scream" type="button" class="btn" onclick="play_single_sound()">
</td>
<audio id="audiotag1" preload="metadata"></audio>

2. 服务端配置禁用音频资源缓存（可选，双保险）

你用的是Flask框架，可以给静态音频资源的响应添加禁用缓存的响应头，从服务端层面强制不缓存，示例代码放在Flask启动文件中即可：

from flask import make_response, request

@app.after_request
def add_no_cache_header(response):
    # 仅针对音频文件添加禁用缓存头
    if request.path.endswith('.wav') or request.path.endswith('.mp3'):
        response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
        response.headers['Pragma'] = 'no-cache'
        response.headers['Expires'] = '0'
    return response

3. 直接实例化Audio对象的写法适配

如果你偏好直接新建Audio实例的写法，同样可以加时间戳适配：

window.play_single_sound = function() {
  const baseUrl = "../screams/new_scream.wav";
  const song = new Audio(`${baseUrl}?t=${Date.now()}`);
  song.play();
}

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