Autoriser un seul élément audio à jouer à la fois

Question

J'ai plusieurs lecteurs audio, chacun avec un bouton de lecture et d'arrêt, sur une page. Le seul problème que j'ai est lorsque vous cliquez sur un bouton de lecture, puis un autre, ils jouent les uns sur les autres. Quelqu'un peut-il m'aider avec le code que je devrais arrêter n'importe quelle chanson joue quand un autre bouton de jeu est cliqué - ainsi il n'y aurait jamais plus qu'une chanson jouant à la fois? Merci! Voici mon 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; 
    }) 
}) 

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

Answer 2

Voici mon code php

<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'); 
     } 
    }) 
})