質問編集履歴
4
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,37 +17,41 @@
|
|
|
17
17
|
</head>
|
|
18
18
|
<body>
|
|
19
19
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
20
|
+
|
|
20
21
|
<!-- 音声ファイル -->
|
|
21
|
-
<audio id="bgm1"
|
|
22
|
+
<audio id="bgm1">
|
|
22
|
-
<source src="
|
|
23
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
23
24
|
</audio>
|
|
24
25
|
<!-- 再生ボタン -->
|
|
25
26
|
<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
27
|
+
|
|
28
|
+
<!-- 音声ファイル -->
|
|
26
|
-
<audio id="bgm1"
|
|
29
|
+
<audio id="bgm1">
|
|
27
|
-
<source src="
|
|
30
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
28
31
|
</audio>
|
|
29
32
|
<!-- 再生ボタン -->
|
|
30
33
|
<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
34
|
+
|
|
35
|
+
<!-- 音声ファイル -->
|
|
31
|
-
<audio id="bgm1"
|
|
36
|
+
<audio id="bgm1">
|
|
32
|
-
<source src="
|
|
37
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
33
38
|
</audio>
|
|
34
39
|
<!-- 再生ボタン -->
|
|
35
40
|
<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
41
|
+
|
|
42
|
+
<!-- 音声ファイル -->
|
|
36
|
-
<audio id="bgm1"
|
|
43
|
+
<audio id="bgm1">
|
|
37
|
-
<source src="
|
|
44
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
38
45
|
</audio>
|
|
39
46
|
<!-- 再生ボタン -->
|
|
40
47
|
<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
48
|
+
|
|
49
|
+
<!-- 音声ファイル -->
|
|
41
|
-
<audio id="bgm1"
|
|
50
|
+
<audio id="bgm1">
|
|
42
|
-
<source src="
|
|
51
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
43
52
|
</audio>
|
|
44
53
|
<!-- 再生ボタン -->
|
|
45
54
|
<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
46
|
-
<audio id="bgm1" preload>
|
|
47
|
-
<source src="●●●●" type="audio/mp3">
|
|
48
|
-
</audio>
|
|
49
|
-
<!-- 再生ボタン -->
|
|
50
|
-
<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
51
55
|
</body>
|
|
52
56
|
</html>
|
|
53
57
|
```
|
|
@@ -82,4 +86,88 @@
|
|
|
82
86
|
btn.innerHTML = '<i class="fas fa-play"></i>'; // 「再生ボタン」に変更
|
|
83
87
|
});
|
|
84
88
|
</script>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### 追記
|
|
92
|
+
|
|
93
|
+
id要素をclassに書き換えましたが当初の現象と変わりませんでした。
|
|
94
|
+
|
|
95
|
+
```HTML
|
|
96
|
+
<!DOCTYPE html>
|
|
97
|
+
<html>
|
|
98
|
+
<head>
|
|
99
|
+
<meta charset="UTF-8">
|
|
100
|
+
<title>HTML5 Audio Sample1</title>
|
|
101
|
+
</head>
|
|
102
|
+
<body>
|
|
103
|
+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
|
104
|
+
|
|
105
|
+
<!-- 音声ファイル -->
|
|
106
|
+
<audio class="bgm1">
|
|
107
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
108
|
+
</audio>
|
|
109
|
+
<!-- 再生ボタン -->
|
|
110
|
+
<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
111
|
+
|
|
112
|
+
<!-- 音声ファイル -->
|
|
113
|
+
<audio class="bgm1">
|
|
114
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
115
|
+
</audio>
|
|
116
|
+
<!-- 再生ボタン -->
|
|
117
|
+
<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
118
|
+
|
|
119
|
+
<!-- 音声ファイル -->
|
|
120
|
+
<audio class="bgm1">
|
|
121
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
122
|
+
</audio>
|
|
123
|
+
<!-- 再生ボタン -->
|
|
124
|
+
<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
125
|
+
|
|
126
|
+
<!-- 音声ファイル -->
|
|
127
|
+
<audio class="bgm1">
|
|
128
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
129
|
+
</audio>
|
|
130
|
+
<!-- 再生ボタン -->
|
|
131
|
+
<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
132
|
+
|
|
133
|
+
<!-- 音声ファイル -->
|
|
134
|
+
<audio class="bgm1">
|
|
135
|
+
<source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
|
|
136
|
+
</audio>
|
|
137
|
+
<!-- 再生ボタン -->
|
|
138
|
+
<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
|
|
139
|
+
</body>
|
|
140
|
+
</html>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
```JavaScript
|
|
144
|
+
<script>
|
|
145
|
+
for(var i=0;i<audios.length;i++){
|
|
146
|
+
audios[ i ].addEventListener( "play", function(){
|
|
147
|
+
for(var j=0;j<audios.length;j++){
|
|
148
|
+
if( audios[ j ]!=this ){ audios[ j ].pause() }
|
|
149
|
+
}
|
|
150
|
+
}, false );
|
|
151
|
+
}
|
|
152
|
+
const bgm1 = document.querySelector(".bgm1"); // <audio>
|
|
153
|
+
const btn = document.querySelector(".btn-play"); // <button>
|
|
154
|
+
btn.addEventListener("click", ()=>{
|
|
155
|
+
// pausedがtrue=>停止, false=>再生中
|
|
156
|
+
if( ! bgm1.paused ){
|
|
157
|
+
btn.innerHTML = '<i class="fas fa-play"></i>';
|
|
158
|
+
bgm1.pause();
|
|
159
|
+
}
|
|
160
|
+
else{
|
|
161
|
+
btn.innerHTML = '<i class="fas fa-pause"></i>';
|
|
162
|
+
bgm1.play();
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
/**
|
|
166
|
+
* [event] 再生終了時に実行
|
|
167
|
+
*/
|
|
168
|
+
bgm1.addEventListener("ended", ()=>{
|
|
169
|
+
bgm1.currentTime = 0; // 再生位置を先頭に移動
|
|
170
|
+
btn.innerHTML = '<i class="fas fa-play"></i>'; // 「再生ボタン」に変更
|
|
171
|
+
});
|
|
172
|
+
</script>
|
|
85
173
|
```
|
3
タイトル修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
音声再生の処理が一度しか実行されない
|
|
1
|
+
【JavaScript】音声再生の処理が一度しか実行されない
|
body
CHANGED
|
File without changes
|
2
初心者マーク追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
一つ目のボタンしか再生されず、二つ目以降のボタンはクリックしても一時停止に切り替わらず再生もされません。
|
|
8
8
|
|
|
9
9
|
コードは以下のようになっています。
|
|
10
|
-
|
|
10
|
+
|
|
11
11
|
```HTML
|
|
12
12
|
<!DOCTYPE html>
|
|
13
13
|
<html>
|
1
文法の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
■[HTML5] 音声ファイルをJSで再生/停止する – audioタグ編
|
|
4
4
|
https://blog.katsubemakito.net/html5/audio1
|
|
5
5
|
|
|
6
|
-
上記の記事を参考に音声再生ボタンを実装したいのですが、
|
|
6
|
+
上記の記事を参考にJavaScriptでシンプルな音声再生ボタンを実装したいのですが、
|
|
7
7
|
一つ目のボタンしか再生されず、二つ目以降のボタンはクリックしても一時停止に切り替わらず再生もされません。
|
|
8
8
|
|
|
9
9
|
コードは以下のようになっています。
|