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

Answer 2

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

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

2 个答案: