JavaScriptで流す音声ファイルを動的に更新したい

html
1<body>
2  <button id="play">Play</button>
3  <audio id="sound" src="./hoge.mp3"></audio>
4  <script>
5      document.getElementById('play').addEventListener('click', function () {
6          var audio = document.getElementById('sound');
7          audio.play();
8      });
9  </script>
10</body>

このコードは現状、このページが読み込まれた時のhoge.mp3をボタンが押されたときに再生しますよね
ですが、実はhoge.mp3は常に裏で新しい内容に更新され続けていてボタンを押したら一番新しいhoge.mp3を再生したいです。

この場合、ボタンを押す前に更新をしないと再生される音声が変わりません。

検討している方法としては

常に自動更新させ、音声が流れている間は更新を止める

音声が流れ終わったら'addEventListener'でできるのはわかったのですが、if文等で流れていない、いるを判定する方法がわかりません

loadで新しく読み込みたい

そもそもaudio.load()で新しくよみこむと思ったのですがうまく行きませんでした。使い方が違うのでしょうか

なにかありませんでしょうか

行動規範の内容に同意します

回答1件

おそらくキャッシュの問題なので
下記で改善する気がします。

html
1<body>
2<button id="play">Play</button>
3<audio id="sound" src="./hoge.mp3"></audio>
4<script>
5  document.getElementById("play").addEventListener("click", function() {
6    var audio = document.getElementById("sound");
7    audio.load(audio.src + "?" + Date.now());
8    audio.play();
9  });
10</script>
11</body>