jPlayerの複数配置について

###前提・実現したいこと
phpで動的に、1つのページにjPlayerを複数配置したい。

###発生している問題・エラーメッセージ
http://klutche.github.io/jPlayer/
上記ページを参考に複数を配置したいのですが、条件によって配置する数が異なり、動的に配置したいため、idではなくclassで配置できるようにしたい。
そもそも実現が可能なのか

情報が少ないとは思いますが、なにか参考になるドキュメントなどあれば勉強させてください。

追記
1つ目のみ記載した場合問題なく再生出来ますが、2つ目を追加すると再生できない状態です。

html
<div class="audio_player" data-mp3="<?=$mp3file[$i]?>" data-playerid="<?=$i?>">
</div>
<div class="jp_container_<?=$i?>">
 <div class="jp-play"></div>
 <div class="jp-pause"></div>
</div>

<!--
<div class="audio_player"></div>
<div class="jp_container">
  <div class="jp-play"></div>
  <div class="jp-pause"></div>
</div>
<div class="audio_player"></div>
<div class="jp_container">
  <div class="jp-play"></div>
  <div class="jp-pause"></div>
</div>
-->
以後必要なだけ繰り返し

javascript
  $('.audio_player').each( function() {
    var player = $(this);
    var _id = player.data('playerid');
    var _mp3 = player.data('mp3');

    player.jPlayer({
      ready: function(){
        player.jPlayer('setMedia', {
          mp3: "./mp3/" + _mp3
        });
      },
      play: function() {
        player.jPlayer("pauseOthers");
      },
      swfPath: './',
      wmode: 'window',
      cssSelectorAncestor: ".jp_container_" + _id,
      keyEnabled: true
    });
  });

/*
  $('.audio_player').jPlayer({
      ready: function(){
          $(this).jPlayer('setMedia', {
              mp3: "./mp3/01.mp3"
          });
      },
      play: function() {
          $(this).jPlayer("pauseOthers");
      },
      swfPath: './',
      wmode: 'window',
      cssSelectorAncestor: ".jp_container",
      keyEnabled: true
  });
*/

css
.jp-play{
    position: absolute;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url('../jplayer/icon.png') center top no-repeat;
    cursor: pointer;
}

.jp-pause{
    position: absolute;
    left: 5px;
    width: 15px;
    height: 15px;
    background: url('../jplayer/icon.png') center bottom no-repeat;
    cursor: pointer;
    display: none;
}

kei344

2016/05/19 18:13

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

CHERRY

2016/05/19 22:27

まずは、試してみて、テストしたソースコードを書いて問題点を質問される方が良いと思います。 PHP で、HTMLを生成するなら、id のままでも動的に設置数を変えれそうですが...

Praline

2016/05/21 23:32

失礼いたしました、コードを追記しました。

Praline

2016/05/22 06:57

皆さんご助言ありがとうございました… phpで動的に生成するということで、一部カスタムデータを追記するようアレンジすることで対応できるようになりました…！

kei344

2016/05/22 07:07 編集

ここのコメントは修正依頼とその回答に使われるものなので、上記のようなコメントをされる際は回答をお使いください。また、回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、元の文章まで置き換えるのはやめましょう。そういう場合は「追記」するものです。

行動規範の内容に同意します

回答2件

使ったこともありませんし、参考になるドキュメントは分かりませんが、クラスでも配置可能なんではないですか？

javascript
1$(function(){
2	
3	$('#audio_player_1').jPlayer({
4		ready: function(){
5			$(this).jPlayer('setMedia', {
6				mp3: 'media/01.mp3'
7			});
8		},
9		play: function() {
10			$(this).jPlayer("pauseOthers");
11		},
12		swfPath: './',
13		wmode: 'window',
14		keyEnabled: true
15	});
16	
17	$('#audio_player_2').jPlayer({
18		ready: function(){
19			$(this).jPlayer('setMedia', {
20				mp3: 'media/02.mp3'
21			});
22		},
23		play: function() {
24			$(this).jPlayer("pauseOthers");
25		},
26		swfPath: './',
27		cssSelectorAncestor: "#jp_container_2",
28		wmode: 'window',
29		keyEnabled: true
30	});
31	
32});
33</script>

と書かれている初期化処理のうち、ID指定の

javascript
1$('#audio_player_1').jPlayer({

などという箇所をクラス指定にすればいいだけと思いますが、一度試して見てはどうでしょうか。

javascript
1cssSelectorAncestor: "#jp_container_2",

という箇所も、cssのセレクタがそのまま使えそうに見えます。

それほどたいした手間でもなさそうなので、そもそも実現できるかどうかはやってみた方が早いのではないでしょうか。

投稿2016/05/20 11:21

munyagu

総合スコア479

Praline

2016/05/20 15:11

回答ありがとうございます。助言の通り全てクラスにしたのですが、再生ができませんでした。追加したコードが、全てクラスにて書き換えたものとなります。

munyagu

2016/05/21 11:42 編集

クラス指定でも再生はできました。 http://munyagu.com/demo/ jPlayerについているサンプルを２つにコピーし、クラスでの指定に変えただけですが・・・クラスで指定する場合も、プレイヤーに対するcssSelectorAncestorは個別のものである必要があります。ですので、クラスで指定する場合もユニークでなくてはなりません。お書きになっているjavascriptでは複数のエレメントが渡されているため、受け取った側でどのようにセットされているのか（あるいはセットに失敗しているのか）不明です。また、上記問題を解決できても記載されているようなJavaScriptでは、どのプレイヤーでも同じ曲を再生することになります。 APIリファレンスまでは確認できていませんが、メディアファイルやcssSelectorAncestorを後からセットできるのであれば、思われているような実装が可能かもしれません。

Praline

2016/05/21 23:44 編集

サンプルのご提示ありがとうございました。となると、やはり配置するプレイヤーの数だけjavascript部分の記述が必要になるということでしょうか… 個人的な希望としては、各プレイヤーの要素内に参照するファイル情報を記載し、javascript内ではそれを読み取り音楽ファイルを再生する、というシンプルな構造にしたかったのですが、やはり難しいでしょうか。追記 head部分をincludeしているために、後から追記するというのを避けたいというのがあります。自分の設計ミスと言われるとどうしようもないのですが…

munyagu

2016/05/23 01:03

.jPlayer()をループで動的に複数回呼び出せばいいのではないでしょうか。 #audio_player_1 #audio_player_2 #audio_player_3 とプレイヤーがあるのであれば、 for(var i=0;i<count;i++) $('#audio_player_' + i).jPlayer({ } というような感じで・・・ cssSelectorAncestorの指定も同様です。

行動規範の内容に同意します

ベストアンサー

いっそHTMLもjQueryで作ってしまえばいろいろ問題は解消するような。

JavaScript
1$( function() {
2	var mp3_list = [ 'media/01.mp3', 'media/02.mp3' ]
3	  , $wrap = $( '#audio_wrap' )
4	  ;
5	jQuery.each( mp3_list, function( i, v ) {
6		$wrap.append( '<div id="player' + i + '" class="audio_unit" data-mp3="' + v + '"><div class="audio_player"></div><div class="jp_container"><div class="jp-play"></div><div class="jp-pause"></div></div></div>' );
7	} );
8	$('.audio_unit').each( function() {
9		var $unit = $( this )
10		  , _id = $unit.attr( 'id' )
11		  , _mp3 = $unit.data( 'mp3' )
12		  ;
13		$( this ).jPlayer( {
14			ready: function() {
15				$( this ).jPlayer( 'setMedia', {
16					mp3: _mp3
17				});
18			},
19			play: function() {
20				$( this ).jPlayer( 'pauseOthers' );
21			},
22			swfPath: './',
23			wmode: 'window',
24			cssSelectorAncestor: _id + ' .jp_container',
25			keyEnabled: true
26		} );
27	} );
28} );

HTML
1<div id="audio_wrap">
2	<!-- この部分はjQuery.eachで生成するので実際は書かなくてよい
3	<div class="audio_unit">
4		<div class="audio_player"></div>
5		<div class="jp_container">
6			<div class="jp-play"></div>
7			<div class="jp-pause"></div>
8		</div>
9	</div>
10	 -->
11</div>