javascript - jQuery：播放多个音频而不重叠

Question

我有一个网页，其中 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>

任何帮助都非常感谢！谢谢，祝你有美好的一天！

标签： javascripthtmljqueryaudio