我有一个网页,其中 3 个链接块播放 3 首不同的歌曲(每个链接块播放 1 首歌曲)。我发现了一个使用事件委托的代码,因此当用户单击新链接块时它们不会重叠。问题是如果你播放链接A,然后播放链接B,然后回到链接A,你需要双击链接A才能播放歌曲。
代码如下:
$('.play').click(function(){
var $this = $(this);
// starting audio
var audioID = "sound" + $(this).attr('id');
$this.toggleClass('active');
if($this.hasClass('active')){
$("#" + audioID).trigger('play');
} else {
$("#" + audioID).trigger('pause');
}
});
document.addEventListener('play', function(e){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len;i++){
if(audios[i] != e.target){
audios[i].pause();
}
}
}, true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<audio loop id="sound1" src="audio1.mp3"> </audio>
<audio loop id="sound2" src="audio2.mp3"> </audio>
<audio loop id="sound3" src="audio3.mp3"> </audio>
任何帮助都非常感谢!!谢谢,祝你有美好的一天!