音楽を再生する際にエラーが発生したら次へ進めたい

前提・実現したいこと

先日ご意見をいただいた　音楽をランダムに再生する際に曲名を表示させる機能　について、次の音楽を再生する際に404Errorになってしまった場合にそのログを残し、次の曲へ進むようにしたいのです。

不明な点

Javascriptでファイルを読み込んだ際に404エラーが出たときの動作を指定する方法がわかりません。

該当のソースコード

html
1<html>
2    <body>
3      <style>
4        td {
5          width: 370px;
6          }
7      </style>
8      <audio type="audio/mpeg" id="audioElement" controls="controls">
9            <source id="srcElement" src="" type="audio/mp3">
10        </audio>
11    　<script type="text/javascript">
12    var src = [
13/*　　No.01　　*/'001.mp3',
14/*　　No.02　　*/'002.mp3',
15];
16        var randmize_wrapper = function () {
17            var rand = Math.floor( Math.random() * src.length );
18            return rand;
19        }
20        var currentRand = 0;
21        document.addEventListener("DOMContentLoaded", function(){
22          var rand = randmize_wrapper(); 
23          document.getElementById("srcElement").setAttribute('src', src[rand]);
24          currentRand = rand;
25          var audio_elm = document.getElementById("audioElement");
26          audio_elm.load(); 
27          audio_elm.play();
28        });
29        var audio_elm = document.getElementById("audioElement"); 
30        audio_elm.addEventListener('ended', function(){
31          var rand = randmize_wrapper();
32          while ( currentRand == rand ) {
33            rand = randmize_wrapper();
34          }
35          currentRand = rand;
36          document.getElementById("srcElement").setAttribute('src', src[rand]);
37          audio_elm.load(); 
38          audio_elm.play();
39        });
40        function name() {
41            var element = document.createElement('div'); 
42            var from = new Date();
43          
44          function time(){
45            let nowTime = new Date();
46            
47            let nowHour = nowTime.getHours();
48            let nowMin  = nowTime.getMinutes();
49            let nowSec  = nowTime.getSeconds();
50
51            if(nowHour<10){
52                if(nowHour==0){
53                    NOWHour = "00"
54                }else{
55                    NOWHour = "0" + nowHour
56                }
57            }else{
58                NOWHour = nowHour;
59            }
60            
61            if(nowMin<10){
62                if(nowMin==0){
63                    NOWMin = "00"
64                }else{
65                    NOWMin = "0" + nowMin
66                }
67            }else{
68                NOWMin = nowMin;
69            }
70
71            if(nowSec<10){
72                if(nowSec==0){
73                    NOWSec = "00"
74                }else{
75                    NOWSec = "0" + nowSec
76                }
77            }else{
78                NOWSec = nowSec;
79            }
80            start_time = NOWHour + ":" + NOWMin + ":" + NOWSec;
81           }
82          setInterval(time, 500);
83            var playtime = audio_elm.currentTime;
84            if(playtime > 0 && playtime < 1){
85                switch(currentRand){
86case 0:
87element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:01　曲名A</td><td>作曲A</td></tr><table>';
88break;
89case 1:
90element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:02　曲名B</td><td>作曲B</td></tr><table>';
91break;
92default:
93element.innerHTML = start_time+' 【Error】NOT Found<br>';
94break;
95}
96
97                document.body.insertBefore(element, audio_elm .nextSibling);
98            }
99        };
100           setInterval(name, 1000);
101      </script>
102  　</body>
103</html>

y_waiwai

2021/06/29 00:04

提示のコードはどういう動作をするんでしょうか

Ito_Kazuki_

2021/06/29 04:30

相対パスの一覧からランダムに選択して再生する。再生開始後1秒以内に・再生開始時刻　・曲名　・作曲者を下に表示する。再生終了後は新たにランダムで再生する。その際表示していた3項目の上に追加して記述する。といった具合です。

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

回答2件

ベストアンサー

letを使っているところを見るとグローバル変数とローカル変数について勉強されたようですね。
なので、今回のコードは厳密に、letとvarを使い分けて書きました。

src属性を持つものが何らかの原因で読み込めないときは、すっごくありきたりな
errorというイベントを投げます。
なのでそいつを拾ってやって、再度乱数抽選、srcへセット、load、playとすればOKです。

参考文献：https://html.spec.whatwg.org/multipage/scripting.html#script

html
1<html>
2    <body background="https://helps2020.ml/_share/BGD.gif">
3      <style>
4        td {
5          width: 370px;
6          }
7      </style>
8      <audio type="audio/mpeg" id="audioElement" controls="controls">
9            <source id="srcElement" src="" type="audio/mp3">
10        </audio>
11    　<script type="text/javascript">
12        var src = [
13            '001.mp3', /*　　No.01　　*/
14            '002.mp3', /*　　No.02　　*/
15            '003.mp3', /* 用意してないファイル */
16        ];
17
18        /* global variables */
19        var currentRand = 0;
20        var src_elm = document.getElementById("srcElement");
21        var audio_elm = document.getElementById("audioElement");
22        var start_time;
23
24        /* create new randmize number */
25        var randmize_wrapper = function () {
26            var rand = Math.floor( Math.random() * src.length );
27            return rand;
28        }
29
30        /* 全コンテンツの読み込みが終わったタイミングで実行される処理 */
31        document.addEventListener("DOMContentLoaded", function() {
32          let rand = randmize_wrapper();
33          currentRand = rand; 
34          src_elm.setAttribute('src', src[rand]);
35          audio_elm.load(); 
36          audio_elm.play();
37        });
38        
39        /* audioタグで1曲の再生が終わったタイミングで呼び出される処理 */
40        audio_elm.addEventListener('ended', function() {
41          let rand = randmize_wrapper();
42          while ( currentRand == rand ) {
43            rand = randmize_wrapper();
44          }
45          currentRand = rand;
46          src_elm.setAttribute('src', src[rand]);
47          audio_elm.load(); 
48          audio_elm.play();
49        });
50        
51        /* srcに指定されたファイルが読み込めなかったときに発生するイベントを処理する */
52        src_elm.addEventListener('error', function(event) {
53          event.stopPropagation();
54          event.preventDefault();
55          time();
56          let element = document.createElement('div');
57          element.innerHTML = start_time + ' 【Error】NOT Found<br>';
58          document.body.insertBefore(element, audio_elm.nextSibling);
59
60          let rand = randmize_wrapper();
61          while ( currentRand == rand ) {
62            rand = randmize_wrapper();
63          }
64          currentRand = rand;
65          src_elm.setAttribute('src', src[rand]);
66          audio_elm.load(); 
67          audio_elm.play();
68        });
69
70        function time() {
71            let nowTime = new Date();
72
73            let nowHour = nowTime.getHours();
74            let nowMin  = nowTime.getMinutes();
75            let nowSec  = nowTime.getSeconds();
76
77            /* 0埋めの定型処理 */
78            nowHour = "00" + String(nowHour);
79            nowMin = "00" + String(nowMin);
80            nowSec = "00" + String(nowSec);
81            nowHour = nowHour.substr(nowHour.length-2, 2);
82            nowMin = nowMin.substr(nowMin.length-2, 2);
83            nowSec = nowSec.substr(nowSec.length-2, 2);
84
85            start_time = nowHour + ":" + nowMin + ":" + nowSec;
86        };
87
88
89        function name() {
90            let element = document.createElement('div'); 
91
92            setInterval(time, 500);
93
94            let playtime = audio_elm.currentTime;
95            if (playtime > 0 && playtime < 1) {
96                switch(currentRand) {
97                    case 0:
98                        element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:01　曲名A</td><td>作曲A</td></tr><table>';
99                        break;
100                    case 1:
101                        element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:02　曲名B</td><td>作曲B</td></tr><table>';
102                        break;
103                    default:
104                        element.innerHTML = start_time + ' 【Error】NOT Found<br>';
105                        break;
106                }
107
108                document.body.insertBefore(element, audio_elm.nextSibling);
109            }
110        };
111        setInterval(name, 1000);
112      </script>
113  　</body>
114</html>