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  

Как видите, я перезагружаю html-аудиоэлемент для sound.wav после того, как пользователь нажимает кнопку.Тем не менее, звуковой файл остается неизменным на веб-сайте, если я не нажму кнопку обновить.

Как это исправить?

Answer 1

Когда вы изменяете src элемента <source>, он не меняет src его родительского MediaElement (<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>