html - 一次只允许播放一个音频元素

Question

我在一个页面上有多个音频播放器，每个播放器都有一个播放和停止按钮。我遇到的唯一问题是，当您单击一个播放按钮，然后单击另一个播放按钮时，它们会在彼此之上播放。有人可以帮助我编写代码，当单击另一个播放按钮时我需要停止正在播放的任何歌曲 - 所以一次播放的歌曲永远不会超过一首？谢谢!这是我的代码:

$(document).ready(function(){ 
    $("#play-bt").click(function(){
        $("#audio-player")[0].play();
    })

    $("#stop-bt").click(function(){
        $("#audio-player")[0].pause();
        $("#audio-player")[0].currentTime = 0;
    })
})


$(document).ready(function(){
    $("#play-bt1").click(function(){
        $("#audio-player1")[0].play();
    })

    $("#stop-bt1").click(function(){
        $("#audio-player1")[0].pause();
        $("#audio-player1")[0].currentTime = 0;
    })
})

Answer 1

$(document).ready(function(){ 

    var allAudioEls = $('audio');

    function pauseAllAudio() {
       allAudioEls.each(function() {
          var a = $(this).get(0);
          a.pause();
       });
    }


    $("#play-bt").click(function(){
        pauseAllAudio();
        $("#audio-player")[0].play();
    })

    $("#stop-bt").click(function(){
        $("#audio-player")[0].pause();
        $("#audio-player")[0].currentTime = 0;
    })

    $("#play-bt1").click(function(){
        pauseAllAudio();
        $("#audio-player1")[0].play();
    })

    $("#stop-bt1").click(function(){
        $("#audio-player1")[0].pause();
        $("#audio-player1")[0].currentTime = 0;
    })
})