質問編集履歴

2

コードの修正

2016/05/22 06:55

投稿

Praline
Praline

スコア46

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,23 @@
28
28
 
29
29
  html
30
30
 
31
+ <div class="audio_player" data-mp3="<?=$mp3file[$i]?>" data-playerid="<?=$i?>">
32
+
33
+ </div>
34
+
35
+ <div class="jp_container_<?=$i?>">
36
+
37
+ <div class="jp-play"></div>
38
+
39
+ <div class="jp-pause"></div>
40
+
41
+ </div>
42
+
43
+
44
+
45
+ <!--
46
+
31
- <div class="audio_player"></div><!--1つ目-->
47
+ <div class="audio_player"></div>
32
48
 
33
49
  <div class="jp_container">
34
50
 
@@ -38,9 +54,7 @@
38
54
 
39
55
  </div>
40
56
 
41
-
42
-
43
- <div class="audio_player"></div><!--2つ目-->
57
+ <div class="audio_player"></div>
44
58
 
45
59
  <div class="jp_container">
46
60
 
@@ -49,6 +63,8 @@
49
63
  <div class="jp-pause"></div>
50
64
 
51
65
  </div>
66
+
67
+ -->
52
68
 
53
69
  以後必要なだけ繰り返し
54
70
 
@@ -59,6 +75,50 @@
59
75
  ```
60
76
 
61
77
  javascript
78
+
79
+ $('.audio_player').each( function() {
80
+
81
+ var player = $(this);
82
+
83
+ var _id = player.data('playerid');
84
+
85
+ var _mp3 = player.data('mp3');
86
+
87
+
88
+
89
+ player.jPlayer({
90
+
91
+ ready: function(){
92
+
93
+ player.jPlayer('setMedia', {
94
+
95
+ mp3: "./mp3/" + _mp3
96
+
97
+ });
98
+
99
+ },
100
+
101
+ play: function() {
102
+
103
+ player.jPlayer("pauseOthers");
104
+
105
+ },
106
+
107
+ swfPath: './',
108
+
109
+ wmode: 'window',
110
+
111
+ cssSelectorAncestor: ".jp_container_" + _id,
112
+
113
+ keyEnabled: true
114
+
115
+ });
116
+
117
+ });
118
+
119
+
120
+
121
+ /*
62
122
 
63
123
  $('.audio_player').jPlayer({
64
124
 
@@ -87,6 +147,8 @@
87
147
  keyEnabled: true
88
148
 
89
149
  });
150
+
151
+ */
90
152
 
91
153
  ```
92
154
 

1

コードの追加

2016/05/22 06:55

投稿

Praline
Praline

スコア46

test CHANGED
File without changes
test CHANGED
@@ -15,3 +15,119 @@
15
15
 
16
16
 
17
17
  情報が少ないとは思いますが、なにか参考になるドキュメントなどあれば勉強させてください。
18
+
19
+
20
+
21
+ 追記
22
+
23
+ 1つ目のみ記載した場合問題なく再生出来ますが、2つ目を追加すると再生できない状態です。
24
+
25
+
26
+
27
+ ```
28
+
29
+ html
30
+
31
+ <div class="audio_player"></div><!--1つ目-->
32
+
33
+ <div class="jp_container">
34
+
35
+ <div class="jp-play"></div>
36
+
37
+ <div class="jp-pause"></div>
38
+
39
+ </div>
40
+
41
+
42
+
43
+ <div class="audio_player"></div><!--2つ目-->
44
+
45
+ <div class="jp_container">
46
+
47
+ <div class="jp-play"></div>
48
+
49
+ <div class="jp-pause"></div>
50
+
51
+ </div>
52
+
53
+ 以後必要なだけ繰り返し
54
+
55
+ ```
56
+
57
+
58
+
59
+ ```
60
+
61
+ javascript
62
+
63
+ $('.audio_player').jPlayer({
64
+
65
+ ready: function(){
66
+
67
+ $(this).jPlayer('setMedia', {
68
+
69
+ mp3: "./mp3/01.mp3"
70
+
71
+ });
72
+
73
+ },
74
+
75
+ play: function() {
76
+
77
+ $(this).jPlayer("pauseOthers");
78
+
79
+ },
80
+
81
+ swfPath: './',
82
+
83
+ wmode: 'window',
84
+
85
+ cssSelectorAncestor: ".jp_container",
86
+
87
+ keyEnabled: true
88
+
89
+ });
90
+
91
+ ```
92
+
93
+ ```
94
+
95
+ css
96
+
97
+ .jp-play{
98
+
99
+ position: absolute;
100
+
101
+ left: 5px;
102
+
103
+ width: 15px;
104
+
105
+ height: 15px;
106
+
107
+ background: url('../jplayer/icon.png') center top no-repeat;
108
+
109
+ cursor: pointer;
110
+
111
+ }
112
+
113
+
114
+
115
+ .jp-pause{
116
+
117
+ position: absolute;
118
+
119
+ left: 5px;
120
+
121
+ width: 15px;
122
+
123
+ height: 15px;
124
+
125
+ background: url('../jplayer/icon.png') center bottom no-repeat;
126
+
127
+ cursor: pointer;
128
+
129
+ display: none;
130
+
131
+ }
132
+
133
+ ```