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

Posted 2023-02-25

【中文标题】一次只允许播放一个音频元素

【英文标题】：Only allow one audio element to play at a time

【发布时间】：2010-11-16 17:20:56

【问题描述】：

我有一页上有多个音频播放器，每个播放器都有一个播放和停止按钮。我遇到的唯一问题是，当您单击一个播放按钮，然后单击另一个播放按钮时，它们会相互叠加播放。有人可以帮我编写代码，当单击另一个播放按钮时，我需要停止正在播放的任何歌曲 - 所以一次播放的歌曲永远不会超过一首？谢谢！这是我的代码：

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

【参考方案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;
    )
)

【讨论】：

好的，我尝试替换您的代码，现在没有歌曲可以播放。知道为什么会发生这种情况吗？

基本上在播放音频时，此代码之前会暂停所有音频，然后播放您选择的唯一音频

我知道这是它应该做的，但是当我使用你的代码时，没有一首歌曲会开始播放。代码中是否可能存在错误 - 它似乎不起作用。感谢您的帮助！

实际上，我能再问你一件事吗...有没有一种简单的方法可以更改代码，以便当您单击从歌曲播放到歌曲时，它总是从歌曲的开头开始- 当你点击另一个播放按钮时，而不是在它停止的地方暂停它？？希望这是有道理的。

是的，只需在函数 pauseAllAudio() 中添加 a.currenTime = 0

【参考方案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');
       
    )
)