更新src，但播放上一个文件

当用户单击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>

您必须将新的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>

更改后的load

function music1(){  
audiosrc.src="https://www.w3schools.com/tags/horse.ogg";
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>
<br/>
<button onclick="music1()">new</button>

相关内容

最新更新

热门标签：