javascript - HTML:重新加载时音频文件未更新

Question

我有一个名为sound.wav的音频文件，该文件长14秒。当用户单击按钮时，sound.wav源url会更改，并且sound.wav会重新加载，现在为7秒。
但是，我的浏览器没有显示更改。仅在单击刷新按钮后，它才会显示更改。

这是我的代码:

  <div id="audioContainer">
    <audio id ="myAudio" controls>
      <source id = "wav_src" src="http://localhost:3000/sounds/sound.wav" type="audio/wav">
    </audio>
  </div>
//user clicks button... sound.wav's url source is changed
  document.getElementById("myAudio").load();   //code to reload the sound.wav  

如您所见，用户按下按钮后，我将重新加载 sound.wav的html音频元素。但是，除非我单击刷新，否则声音文件在网站上保持不变。

我该如何解决？

Answer 1

更改src元素的<source>时，它不会更改其父MediaElement(src或<audio>)的<video>。您必须调用此MediaElement的.load()方法:

set_src.onclick = function() {
  source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
  console.log('source src:', source.src);
  setTimeout(function(){console.log('audio src:', audio.currentSrc)});
}

load_btn.onclick = function() {
  audio.load(); // you must call this
  setTimeout(function(){console.log('audio src:', audio.currentSrc)});
};

<audio id="audio" controls="controls">
  <source id="source">
</audio>
<br>
<button id="set_src">set src</button>
<button id="load_btn">load</button>

当然，您通常会一次性执行此操作:

set_src.onclick = function() {
  source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
  audio.load(); // you must call this
}

<audio id="audio" controls="controls">
  <source id="source">
</audio>
<br>
<button id="set_src">set src</button>