5

以前に jplayer を使用したことがある人がいる場合は、この質問についてサポートが必要です。

各プレーヤーが独自のオーディオ ファイルを再生する複数の jplayers があります。jplayerを再生すると、すべてのjplayerが再生され、選択したjplayerからその1つのオーディオファイルがすべて再生されます。実際、1 つの jplayer でコントロールを使用すると、他のすべての jplayer もコントロールされます。

だから私はこれから情報が得られるマルチインスタンス jplayers を実装しようとしています:

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

しかし、私はこれを実装するのに本当に苦労しているので、私の質問は、jplayersが本来のように機能し、jplayerが自分のプレーヤーのみを制御し、他のjplayerに影響を与えないように、誰かがこれの実装を完了するのを手伝ってくれるでしょうか?

以下は、私が現時点でこれのために持っているJavaScriptコードです（ソースを表示）：

<script type="text/javascript">   
    $(document).ready(function(){
  $("#jquery_jplayer_1-72-0").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "AudioFiles/Kalimba.mp3"
      });
    },
    play: function() { // To avoid both jPlayers playing together.
      $(this).jPlayer("pauseOthers");
   },
    solution:"flash,html",
    swfPath: "jquery",
    supplied: "mp3"
  });
}); 
</script>

アップデート：

実際のコード:

オーディオ ファイルがない場合は、オーディオ ファイルごとに空白を表示し、オーディオ プレーヤーを表示します。html コントロールも含めましたが、必要かどうかはわかりませんが、念のため投稿しました

        //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; ?>"
      });
      $(this).bind($.jPlayer.event.play, function() { 
          $(this).jPlayer("pauseOthers");
        });
    },
    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

9

次のように を作成してfunctionパラメータ ( file and player id) を渡すと、競合することなく同じページに異なるプレーヤーを作成できます。

function js_audioPlayer(file,location) {
    jQuery("#jquery_jplayer_" + location).jPlayer( {
        ready: function () {
          jQuery(this).jPlayer("setMedia", {
        mp3: file
          });
        },
        cssSelectorAncestor: "#jp_interface_" + location,
        swfPath: "/swf"
    });
        return;
}

この例では、ファイルと場所の変数がラッパー関数に渡され、プレーヤーが構築されます。

次に、js_audioPlayer()プレイヤーが必要な回数だけ JavaScript 関数を実行します。

js_audioPlayer('file1.mp3',1); //Player 1
js_audioPlayer('file2.mp3',2); //Player 2
js_audioPlayer('file3.mp3',3); //Player 3

ID を持つプレーヤー DIV の作成:

jquery_jplayer_1 
jquery_jplayer_2
jquery_jplayer_3

および ID を持つインターフェース DIV:

jp_interface_1
jp_interface_2
jp_interface_3

お役に立てれば。

詳細：http ://www.nightbluefruit.com/blog/2011/08/multiple-jplayers-on-the-same-page/

于 2013-02-09T05:16:42.427 に答える
0

これは、jplayer を使用したオーディオ プレーヤーの複数インスタンスのコードです。次のコードは私のために働いています。これが誰にも役立つことを願っています。

$(document).ready(function(){
    /*---Create a jplayer instance on click on the play image---*/

    $(".audio").click(function() {
       $.jPlayer.pause();
       var record_id = this.id;
       var path = 'path for the audio file';
       $("#jquery_jplayer_"+record_id).jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
                    title: "Bubble",
                    oga: path,
                });
            },
            cssSelectorAncestor: "#jp_container_"+record_id,
            supplied: "oga",
            wmode: "window",
            errorAlerts: true,
            consoleAlerts: true,
            warningAlerts: true,
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        });
    });
});
于 2015-06-08T06:56:45.273 に答える