【JavaScript】音声再生の処理が一度しか実行されない

Iroha Board（CakePHP）でe-ラーニングシステムを試作しています。

■[HTML5] 音声ファイルをJSで再生/停止する – audioタグ編
https://blog.katsubemakito.net/html5/audio1

上記の記事を参考にJavaScriptでシンプルな音声再生ボタンを実装したいのですが、
一つ目のボタンしか再生されず、二つ目以降のボタンはクリックしても一時停止に切り替わらず再生もされません。

コードは以下のようになっています。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>HTML5 Audio Sample1</title>
6</head>
7<body>
8<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
9
10<!-- 音声ファイル -->
11<audio id="bgm1">
12  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
13</audio>
14<!-- 再生ボタン -->
15<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
16
17<!-- 音声ファイル -->
18<audio id="bgm1">
19  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
20</audio>
21<!-- 再生ボタン -->
22<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
23
24<!-- 音声ファイル -->
25<audio id="bgm1">
26  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
27</audio>
28<!-- 再生ボタン -->
29<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
30
31<!-- 音声ファイル -->
32<audio id="bgm1">
33  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
34</audio>
35<!-- 再生ボタン -->
36<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
37
38<!-- 音声ファイル -->
39<audio id="bgm1">
40  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
41</audio>
42<!-- 再生ボタン -->
43<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
44</body>
45</html>

JavaScript
1<script>
2  for(var i=0;i<audios.length;i++){
3audios[ i ].addEventListener( "play", function(){
4for(var j=0;j<audios.length;j++){
5if( audios[ j ]!=this ){ audios[ j ].pause() }
6}
7}, false );
8}
9  const bgm1 = document.querySelector("#bgm1");       // <audio>
10  const btn  = document.querySelector("#btn-play");   // <button>
11  btn.addEventListener("click", ()=>{
12    // pausedがtrue=>停止, false=>再生中
13    if( ! bgm1.paused ){
14      btn.innerHTML = '<i class="fas fa-play"></i>';
15      bgm1.pause();
16    }
17    else{
18      btn.innerHTML = '<i class="fas fa-pause"></i>';
19      bgm1.play();
20    }
21  });
22  /**
23   * [event] 再生終了時に実行
24   */
25   bgm1.addEventListener("ended", ()=>{
26    bgm1.currentTime = 0;  // 再生位置を先頭に移動
27    btn.innerHTML = '<i class="fas fa-play"></i>';  // 「再生ボタン」に変更
28  });
29</script>

追記

id要素をclassに書き換えましたが当初の現象と変わりませんでした。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>HTML5 Audio Sample1</title>
6</head>
7<body>
8<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
9
10<!-- 音声ファイル -->
11<audio class="bgm1">
12  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
13</audio>
14<!-- 再生ボタン -->
15<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
16
17<!-- 音声ファイル -->
18<audio class="bgm1">
19  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
20</audio>
21<!-- 再生ボタン -->
22<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
23
24<!-- 音声ファイル -->
25<audio class="bgm1">
26  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
27</audio>
28<!-- 再生ボタン -->
29<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
30
31<!-- 音声ファイル -->
32<audio class="bgm1">
33  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
34</audio>
35<!-- 再生ボタン -->
36<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
37
38<!-- 音声ファイル -->
39<audio class="bgm1">
40  <source src="https://miku3.net/asset/sound/html5/op.mp3" type="audio/mp3">
41</audio>
42<!-- 再生ボタン -->
43<button class="btn-play" type="button"><i class="fas fa-play"></i></button>
44</body>
45</html>

JavaScript
1<script>
2  for(var i=0;i<audios.length;i++){
3audios[ i ].addEventListener( "play", function(){
4for(var j=0;j<audios.length;j++){
5if( audios[ j ]!=this ){ audios[ j ].pause() }
6}
7}, false );
8}
9  const bgm1 = document.querySelector(".bgm1");       // <audio>
10  const btn  = document.querySelector(".btn-play");   // <button>
11  btn.addEventListener("click", ()=>{
12    // pausedがtrue=>停止, false=>再生中
13    if( ! bgm1.paused ){
14      btn.innerHTML = '<i class="fas fa-play"></i>';
15      bgm1.pause();
16    }
17    else{
18      btn.innerHTML = '<i class="fas fa-pause"></i>';
19      bgm1.play();
20    }
21  });
22  /**
23   * [event] 再生終了時に実行
24   */
25   bgm1.addEventListener("ended", ()=>{
26    bgm1.currentTime = 0;  // 再生位置を先頭に移動
27    btn.innerHTML = '<i class="fas fa-play"></i>';  // 「再生ボタン」に変更
28  });
29</script>

Lhankor_Mhy

2021/11/10 01:51 編集

削除リクエストをお願いします。 https://teratail.com/help#:~:text=%E3%81%BE%E3%81%9F%E3%80%81teratail%E4%B8%8A%E3%81%A6%E3%82%99%E8%AA%A4%E3%81%A3%E3%81%A6%E5%90%8C%E3%81%97%E3%82%99%E8%B3%AA%E5%95%8F%E3%82%92%E8%A4%87%E6%95%B0%E6%8A%95%E7%A8%BF%E3%81%97%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AF%E3%80%81%E8%B3%AA%E5%95%8F%E3%81%AE%E5%89%8A%E9%99%A4%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%82%92%E9%80%81%E3%81%A3%E3%81%A6%E3%81%8F%E3%81%9F%E3%82%99%E3%81%95%E3%81%84%E3%80%82 https://teratail.com/questions/368584

MK-95

2021/11/10 01:55

こちら削除いたしました。

Lhankor_Mhy

2021/11/10 01:59

ありがとうございます。

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

回答1件

#bgm1 #btn-play が複数存在しています。
ID属性は一意なので、想定しているような動作をしない可能性が高いです。

id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。

id - HTML: HyperText Markup Language | MDN

解決方法ですが、複数存在することが想定される要素は、クラスで識別する方がいいかと思います。

投稿2021/11/10 02:19

Lhankor_Mhy

総合スコア36981

MK-95

2021/11/10 02:31 編集

ご回答ありがとうございます。 #bgm1と#btn-playをclassに書き換え、scriptタグ内も書き換えましたが変わりませんでした。

Lhankor_Mhy

2021/11/10 02:34

具体的なコードがないと具体的なお返事はできませんが、一般論的な解決方法としては Devtools などで変数の値を確認してみるのがいいかと思いますね。

MK-95

2021/11/10 02:43

先ほどソースを追加しました。

Lhankor_Mhy

2021/11/10 02:55 編集

拝見しました。 querySelectorは最初の一つだけしか取得しないです。 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector querySelectorAllを使ってみてはどうですか？

MK-95

2021/11/10 02:58

ご回答ありがとうございます。 querySelectorからquerySelectorAllに書き換えました。今度は一つ目も音声再生できなくなりました。

Lhankor_Mhy

2021/11/10 03:02 編集

「querySelectorAll addEventListener 動作しない」あたりでググるといいのではないでしょうか。たとえば、こういう記事が検索で挙がってきます。 https://teratail.com/questions/223878 ググり力はエンジニアに必要な能力だと思いますので、もう少し鍛えた方がいいかもですね。

MK-95

2021/11/10 03:03

ご回答ありがとうございます。ちょっと自身で調べてみます。

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