一次只允許一個音頻元素播放

我在一個頁面上有多個音頻播放器，每個播放器都有一個播放和停止按鈕。我唯一的問題是，當你點擊一個播放按鈕，然後另一個播放按鈕時，它們會互相重疊。有人可以用我需要的代碼來幫助我，當另一個播放按鈕被點擊時停止播放歌曲 - 所以一次只能播放一首歌曲嗎？謝謝！這裏是我的代碼：一次只允許一個音頻元素播放

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

來源

2010-11-16 marie

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

來源

2010-11-17 08:52:26

好吧，我試圖取代你的代碼，而現在沒有的歌曲將發揮。任何想法爲什麼可能會發生？ – marie 2010-11-17 22:42:08

基本上當您播放音頻時，此代碼先前暫停所有音頻，然後播放您選擇的唯一一個 – 2010-11-18 09:05:04

我意識到應該這樣做，但是當我使用您的代碼時，沒有任何歌曲會播放首先。代碼中可能有錯誤 - 它似乎沒有工作。謝謝你的幫助！ – marie 2010-11-18 16:40:29

這裏是我的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'); 
     } 
    }) 
})

來源

2017-10-20 09:36:47

一次只允許一個音頻元素播放

回答

相關問題