0

ここにデモがあります:デモンストレーション

デモには2つの質問があり、それらの質問には、各質問に属するオーディオを再生するjplayerオーディオプレーヤーが含まれています。

したがって、デモの質問 1 には 2 つの音声があるため、質問 1 に 2 つの音声プレーヤー (プレーヤーごとに 1 つの音声ファイル) があるのはなぜですか。質問 2 では、オーディオ ファイルが 1 つしか含まれていないため、オーディオ プレーヤーは 1 つです。以下のコードは、質問に音声ファイルがない場合はこれを表示し、空白の場合は各音声ファイルの音声プレーヤーを表示します。

唯一の問題は、オーディオ プレーヤーをクリックすると、すべてのオーディオ プレーヤーが再生され、ファイルが再生されることです。私が望むのは、ユーザーがオーディオ プレーヤーを使用する場合、そのオーディオ プレーヤーに属するオーディオ ファイルのみを再生することだけです。これは他のコントロールでも同じです。ユーザーがオーディオ プレーヤーでコントロールを使用する場合、そのコントロールはそのオーディオ プレーヤーのみを制御します。

しかし、これを修正するために何をする必要がありますか?

以下はコードです：

<?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'];?>"
  });

上記のコードでこのエラーが発生しました: missing : after property list

4

1 に答える 1

1

最近のプロジェクトでこれに遭遇しました。この jPlayer デモを参照してください。

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

そのページによると、「追加の $.jPlayer.event.play イベント ハンドラーを使用して、jPlayer が一緒にプレイするのを回避しています。」

次のように、jPlayer プロパティに play 関数を追加します。

  $("#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'];?>"
  });
于 2013-02-09T00:11:01.353 に答える