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 上尝试过 android。

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

Answer 1

多半是缓存问题，您可以这样解决：

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

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

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

Play button in HTML form not playing the latest audio file, plays an old version that is meant to have been overwritten

html

javascript

audio

browser-cache

node.js