回答編集履歴

1

ソース:修正の追記

2018/09/15 12:47

投稿

_lemon2003_
_lemon2003_

スコア274

test CHANGED
@@ -35,3 +35,141 @@
35
35
  })();
36
36
 
37
37
  ```
38
+
39
+
40
+
41
+ # 追記1
42
+
43
+ ```html
44
+
45
+ <!-- 曲リスト全体 -->
46
+
47
+ <script>
48
+
49
+ $(function() {
50
+
51
+ $.ajax({
52
+
53
+ url: 'musics.xml?20180808',
54
+
55
+ type: 'GET',
56
+
57
+ dataType: 'xml',
58
+
59
+ timeout: 1000,
60
+
61
+ error: function() {
62
+
63
+ console.log("曲リストの読み込みに失敗しました");
64
+
65
+ },
66
+
67
+ success: function(xml) {
68
+
69
+ $(xml).find('music').each(function() {
70
+
71
+ $("#musics_list").append(
72
+
73
+ '<article class="music"><div><div class="type"><div>' +
74
+
75
+ $(this).find('type').text() + '</div></div><h4>「' +
76
+
77
+ $(this).find('title').text() + '」</h4><img src="img/jacket/' +
78
+
79
+ $(this).find('jacket').text() + '" alt="' +
80
+
81
+ $(this).find('title').text() + '"><span class="mask"><p>' +
82
+
83
+ $(this).find('comment').text() + '</p><a href="' +
84
+
85
+ $(this).find('mp3').text() + '" download="music/' +
86
+
87
+ $(this).find('mp3').text() + '">MP3ダウンロード</a></span><div class="audio"><audio src="music/' +
88
+
89
+ $(this).find('mp3').text() + '" controls="controls"></audio></div></div></article>'
90
+
91
+
92
+
93
+ );
94
+
95
+ });
96
+
97
+
98
+
99
+ $(xml).find('music:lt(1)').each(function() {
100
+
101
+ $("#new_songs").append(
102
+
103
+ '<li><img src="img/jacket/' +
104
+
105
+ $(this).find('jacket').text() + '" alt="' +
106
+
107
+ $(this).find('title').text() + '"><h4>「' +
108
+
109
+ $(this).find('title').text() + '」</h4><p>' +
110
+
111
+ $(this).find('comment').text() + '</p><a href="music/' +
112
+
113
+ $(this).find('mp3').text() + '" download="' +
114
+
115
+ $(this).find('mp3').text() + '">MP3ダウンロード</a><audio src="music/' +
116
+
117
+ $(this).find('mp3').text() + '" controls="controls"></audio></li>'
118
+
119
+ );
120
+
121
+ });
122
+
123
+
124
+
125
+ let $playingAudio = null;
126
+
127
+ let $audioList = $("div.audio>audio, ul#new_songs>li>audio");
128
+
129
+
130
+
131
+ let playAudioHandler = function playAudioHandler(event){
132
+
133
+ if($playingAudio && $playingAudio[0] !== event.target){
134
+
135
+ $playingAudio[0].pause();
136
+
137
+
138
+
139
+ // 停止時に位置を最初にする場合は下↓のコメントを外す
140
+
141
+ // playingAudio.currentTime[0] = 0;
142
+
143
+ }
144
+
145
+ $playingAudio = $(event.target);
146
+
147
+ }
148
+
149
+
150
+
151
+ for(let i = 0, l = $audioList.length; i < l; i++){
152
+
153
+ $audioList[i].addEventListener("play", playAudioHandler);
154
+
155
+ }
156
+
157
+ }
158
+
159
+ });
160
+
161
+ });
162
+
163
+ </script>
164
+
165
+ ```
166
+
167
+
168
+
169
+ 動作しないため訂正版。
170
+
171
+ 当該ページの34行目辺りの `<!-- 曲リスト全体 -->` から
172
+
173
+ 115行目辺りの `<!-- 常に1曲のみ再生の制御 ここまで -->` までを
174
+
175
+ 上記のコードに書き換えてください。