javascript - 更新 src 但播放上一个文件

Question

我想在用户点击div时播放音乐，但是，当用户点击div时，src改变了，但音频标签仍然播放之前的文件

代码如下

function music1() {
  document.getElementById("audiosrc").src = "j.mp3";
}

<audio controls id="audio" loop autoplay>
<source id="audiosrc" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/new_year_dubstep_minimix.ogg" type="audio/ogg">Your browser dose not Support the audio Tag
</audio>

Answer 1

您必须将新的 src 加载到音频元素。使用 .load() 函数可以解决这个问题。

function changeSrc() {
  const audio = document.getElementById("audio");
  const source = document.getElementById("audiosrc");
  source.src = "https://www.myinstants.com/media/sounds/yeah-boymp4.mp3"
  audio.load();
}

<audio controls id="audio" loop autoplay>
  <source id="audiosrc" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/new_year_dubstep_minimix.ogg" type="audio/ogg">
Your browser dose not Support the audio Tag
</audio>

<button onclick="changeSrc()">change src</button>