-2

明らかにオーディオを再生するjplayerオーディオプレーヤーがあります。今私が抱えている問題は、各質問をループしているということです。質問には、再生するオーディオが1つ、複数、またはまったくない場合があります。

各オーディオには、独自のオーディオ プレーヤーがあります。しかし、以下のコードで何が起こっているかというと、1 つのオーディオ プレーヤーを再生すると、残りの他のオーディオ プレーヤーも再生され、最終的にすべてのオーディオ プレーヤーが再生されることになります。オーディオ プレーヤーを再生すると、そのオーディオ プレーヤーのみが再生および制御されるようにするには、どうすれば修正できますか?

以下は、各オーディオ プレーヤーをループするコードです。

        //start:procedure audio
        $aud_result = '';
        if(empty($arrAudioFile[$key])){
          $aud_result = ' ';
        }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
?>
4

2 に答える 2

2

私は今あなたの例を完全に実行することはできませんが、それがどのように見えるかを見ると、サーバー側のすべてのオーディオ ファイルをループし、大量の html/js を書き出すことによって、同じページに複数の jPlayer インスタンスをロードしています。ページに。

jPlayer を使用してからしばらく経ちます。記憶違いでしたら申し訳ありませんが、jPlayer 内でオーディオ ファイルをキューに入れる機能が組み込まれている可能性があります。

私が間違っていれば、オーディオ ファイルの開始/終了時に発生する提供されたイベントのいくつかを使用して、この機能を簡単に複製できます。基本的に、オーディオ ファイルの URL を使用して、ある種の Javascript 配列を作成します。リスト内の最初のオーディオ ファイルの再生を開始します。そのファイルの再生が終了すると、jPlayer はある種の終了イベントを発生させる必要があります。その場合は、リストから削除して次に進みます。

これにより、曲を重ねて再生することがなくなり、好きな順序で再生できるようになります。

また、JS を画面に書き出すか、ある種の AJAX 呼び出しを介して URL を取得することにより、PHP コードのみを使用して URL の JS リストを作成する必要があることを忘れないでください。あなたが今やっているように見えるのは、あなたの HTML をループして、すべて互いに重なって再生される多くの異なる jPlayer インスタンスを作成することです。

于 2013-02-08T15:31:53.007 に答える
0

これが私が複製してテストした解決策です：

        //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-<?php echo $key.'-'.$j; ?>").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        <?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
      });
      $(this).bind($.jPlayer.event.play, function() { 
          $(this).jPlayer("pauseOthers");
        });
    },
    cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
    cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "<?php echo $info['extension'];?>"
});
}); 
</script>
  <div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
  <div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
        <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
?>
于 2013-02-09T21:59:25.597 に答える