Only allow one audio element to play at a time

I have multiple audio players, each with a play and stop button, on one page. The only issue I have is when you click one play button, and then another, they play on top of one another. Can s开发者_运维问答omeone help me with the code I would need to stop whatever song is playing when another play button is clicked - so there would never be more than one song playing at a time?? Thanks! Here is my code:

$(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;
    })
})

$(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;
    })
})

Here is my php code

<div id="sourceplay"></div>
<table class="table tlm-table-epg">
                    <tbody>

                    <?php foreach (\common\models\Video::find()->orderBy('id desc')->all() as $valuevideo): ?>
                        <tr class="tlm-epg">
                            <td class="width35">
                                <a class="playbutton"
                                   values="<?= Yii::$app->urlManager->baseUrl . $valuevideo->url ?>" tss="<?=$valuevideo->id?>"><i
                                          id="ts-<?=$valuevideo->id?>"  class="fa fa-play-circle-o font-size-25"></i></a>
                            </td>
                            <td>
                                <p><?= $valuevideo->name ?></p>
                                <p class="margin-top-10px"><?php $date = date_create_from_format('Ymd', $valuevideo->code);
                                    echo date_format($date, 'd/m/Y'); ?></p>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>

 $(document).ready(function () {
    $(document).on('click','.playbutton',function () {
       var self=$(this);
       if(self.attr('class')!='playbutton actives'){
           var t = $(".fa.fa-pause-circle-o.font-size-25");
           var r = $("#ts-"+self.attr('tss'));
           var last = $(".playbutton.actives");
           $("#sourceplay").html('<audio controlsList="nodownload" id="mainpls" autoplay="true" controls="controls">' +
               '<source src="'+self.attr('values')+'" type="audio/mpeg" >' +
               '</audio>');
           t.attr('class','fa fa-play-circle-o font-size-25 actives');
           r.attr('class','fa fa-pause-circle-o font-size-25');
           self.attr('class','playbutton actives');
           last.attr('class','playbutton');
       }else {
           $("#mainpls").remove();
           var t = $(".fa.fa-pause-circle-o.font-size-25");
           var last = $(".playbutton.actives");
           t.attr('class','fa fa-play-circle-o font-size-25 actives');
           self.attr('class','playbutton');
           last.attr('class','playbutton');
       }
    })
})