HTML 形式的播放按钮不播放最新的音频文件，播放的是旧版本，该版本已被覆盖

Question

我已经构建了一个网页，它将表单中输入的文本发送到 Node.js 服务器，该服务器合成音频文件 speech.wav 并将其存储在 /public 文件夹中。当我转到localhost:8000 并且第一次加载页面时，我可以输入文本，提交，然后单击播放按钮以播放正确的音频。播放文件的脚本是

function playAudio() {
  var audioFile = new Audio('./speech.wav');
  audioFile.play()
}

播放按钮的代码是

          <div class="d-grid col-3">
            <button type="button" value="sound" class="btn btn-secondary" onclick="playAudio()"
              id="playbutton">Play</button>
          </div>

但是当我第二次在同一页面中输入一些不同的文本并提交时，按播放按钮一次又一次地播放旧演讲。但是，我注意到服务器正确合成了新的语音音频并将其存储在speech.wav 中，删除了之前的音频。 （我通过转到目录并使用 Windows 媒体播放器播放它进行了检查。） 打开另一个选项卡并转到localhost:8000 并直接单击播放按钮会令人惊讶地播放新演讲！但在上一个选项卡中，它仍然会播放旧语音。我在 Chrome、Edge 和 Chrome for android 上试过这个。

我无法确定此错误出现的位置。

Answer 1

很可能是缓存问题，您可以这样解决：

function playAudio() {
  var audioFile = new Audio('./speech.wav?' + new Date().getTime());
  audioFile.play()
}

正如@fdcpp 下面提到的，在开发过程中使用浏览器的private 模式将消除缓存问题。但是在生产中（如果您在更改文件的同时保持名称不变）?time 方法是一种快速修复