如果选择了一个播放器，如何停止所有音频播放器的播放？

Posted 2023-02-25

【中文标题】如果选择了一个播放器，如何停止所有音频播放器的播放？

【英文标题】：how to stop all audio players playing if one player is selected?

【发布时间】：2013-02-08 23:26:21

【问题描述】：

我在这里有一个演示：demonstration

在演示中我有 2 个问题，在这些问题中，它包含 jplayer 音频播放器，它播放属于每个问题的音频。

所以在演示问题 1 中有 2 段音频，因此为什么问题 1 有 2 个音频播放器，每个播放器一个音频文件。在问题 2 中，它只有一个音频播放器，因为它只包含一个音频文件。现在下面的代码会显示此内容，如果问题没有音频文件，则显示空白，否则显示每个音频文件的音频播放器。

唯一的问题是，如果你点击一个音频播放器，那么所有的音频播放器都在播放它们的文件。我想要的是，如果用户使用音频播放器，则只有属于该音频播放器的音频文件应该播放，仅此而已。其他控件也是如此，如果用户在音频播放器中使用某个控件，则它只控制该音频播放器。

但是我需要做什么才能解决这个问题？

下面是代码：

<?php

foreach ($arrQuestionId as $key=>$question) 

?>

<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " .  htmlspecialchars($arrQuestionContent[$key]); ?></p>

<?php

        //start:procedure audio
        $aud_result = '';
        if(empty($arrAudioFile[$key]))
          $aud_result = '&nbsp;';
        else

$j = 0;
foreach ($arrAudioFile[$key] as $a)  

        $info = pathinfo('AudioFiles/'.$a); 
?>

<script type="text/javascript">   
    $(document).ready(function()
  $("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer(
    ready: function () 
      $(this).jPlayer("setMedia", 
        <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
      );
    ,
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $info['extension'];?>"
  );
); 
</script>
  <div id="jquery_jplayer_1-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
  <div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface">
        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
<?php $j++; 



//end:procedure audio
?>

</div>


<?php



?>

更新：

  $("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer(
    ready: function () 
      $(this).jPlayer("setMedia", 
        <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
      );
    ,
    $(this).bind($.jPlayer.event.play, function()  //ERROR HERE
      $(this).jPlayer("pauseOthers");
    ,
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $info['extension'];?>"
  );

上面的代码给了我这个错误：缺少：属性列表之后

【参考方案1】：

我们在最近的一个项目中遇到了这个问题。请参阅此 jPlayer 演示：

http://www.jplayer.org/latest/demo-03/

根据该页面，“已使用额外的 $.jPlayer.event.play 事件处理程序来避免 jPlayer 一起玩。”

在jPlayer属性中添加播放功能，如下：

  $("#jquery_jplayer_1-<?php echo $key.'-'.$j; ?>").jPlayer(
    ready: function () 
      $(this).jPlayer("setMedia", 
        <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
      );
    ,
    play: function()  // To avoid both jPlayers playing together.
      $(this).jPlayer("pauseOthers");
    ,
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $info['extension'];?>"
  );

【讨论】：

所以我需要在代码中包含$.jPlayer.event.play？如果是这样，我应该把它放在哪里？

只需将其添加为 jPlayer 属性之一即可。我已经编辑了我的答案以反映如何做到这一点。 （我只是去demo页面，查看源码，发现play事件行，没测试过。）

jPlayer("pauseOthers") 的文档可以在这里找到：jplayer.org/latest/developer-guide/#jPlayer-pauseOthers

能否请您查看更新，查看文档但仍有问题