Question

我有一个名为sound.wav的音频文件，长度为14秒。当用户点击按钮时，sound.wav源网址会被更改，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>的{{1}} 。您必须调用此MediaElement的 .load（）方法：

<video>

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
}

HTML：重新加载时音频文件不更新

1 个答案: