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

我在一个页面上有多个音频播放器，每个播放器都有一个播放和停止按钮。我唯一的问题是，当你点击一个播放按钮，然后另一个播放按钮时，它们会互相重叠。有人可以用我需要的代码来帮助我，当另一个播放按钮被点击时停止播放歌曲 - 所以一次只能播放一首歌曲吗？谢谢！这里是我的代码：一次只允许一个音频元素播放

$(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

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

回答

相关问题