如何强制 HTML 音频播放器每次点击按钮时加载最新 WAV 文件-html教程-PHP中文网

如何强制 HTML 音频播放器每次点击按钮时加载最新 WAV 文件

通过在音频资源 url 后添加时间戳参数实现缓存穿透，可确保浏览器始终请求并播放最新生成的 in.wav，避免因 http 缓存导致的旧音频复用问题。

通过在音频资源 url 后添加时间戳参数实现缓存穿透，可确保浏览器始终请求并播放最新生成的 in.wav，避免因 http 缓存导致的旧音频复用问题。

在 Web 音频开发中，当后端（如 Flask）动态覆盖同名文件（例如 /static/in.wav）时，浏览器出于性能考虑会缓存该资源——即使文件内容已更新，<audio></audio> 元素仍可能继续播放缓存版本。.load() 方法本身不会绕过缓存，它仅重新解析当前 src 指向的 URL；若 URL 未变，浏览器直接复用缓存响应。

解决此问题的核心思路是使每次请求的 URL 唯一，即实施「缓存破坏（Cache Busting）」。最常用、兼容性最佳的方式是在音频路径后附加一个随请求变化的查询参数，例如毫秒级时间戳：

$("#convert-button").on("click", function() {
    let textString = $("#text-input").val();
    let key = $("#key").val();
    let mode = $("#mode").val();
    let inst = $("#instrument").val();

    display(textString, key, mode, inst, function(returnedString) {
        $("#returned_string").text(returnedString);
    });

    const audioPlayer = document.getElementById("player");
    const audioSource = document.getElementById("audio-source");

    // ✅ 关键：生成唯一 URL，强制浏览器发起新请求
    const timestamp = Date.now();
    audioSource.src = `/static/in.wav?ver=${timestamp}`;

    // 重新加载并播放（注意：需在 src 更新后调用 load()）
    audioPlayer.load();

    // 可选：自动播放（如需，且符合浏览器自动播放策略）
    // audioPlayer.play().catch(e => console.warn("Auto-play prevented:", e));
});

? HTML 结构要求（请确保匹配）：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

<audio id="player" controls><source id="audio-source" src="/static/in.wav" type="audio/wav">
  Your browser does not support the audio element.
</source></audio>

⚠️ 注意事项：

必须通过 <source></source> 元素（而非直接设 audio.src）更新源地址，并确保其 id="audio-source" 与 JS 中获取的元素一致；
audioPlayer.load() 必须在 audioSource.src 赋值之后调用，否则无效；
若音频处于播放中，建议先调用 audioPlayer.pause() 再 load()，避免状态异常；
Flask 日志中出现 206 Partial Content 表明浏览器发起了范围请求（常见于音频流），这是正常行为，只要 200 OK 或 206 响应体包含最新 WAV 数据即可；
不推荐使用 location.reload() 或 cache: 'no-store' 等全局方案——它们开销大且不精准。