回答編集履歴

FireFoxでエラーハンドリングで止まることに対応。Chrome、FireFox、Edgeで完全動作することを確認。

2022/04/15 01:44

投稿

nekora

スコア501

test CHANGED Viewed

@@ -1,247 +1,126 @@
 letを使っているところを見るとグローバル変数とローカル変数について勉強されたようですね。
 なので、今回のコードは厳密に、letとvarを使い分けて書きました。
 src属性を持つものが何らかの原因で読み込めないときは、すっごくありきたりな
 errorというイベントを投げます。
 なのでそいつを拾ってやって、再度乱数抽選、srcへセット、load、playとすればOKです。
 [参考文献：https://html.spec.whatwg.org/multipage/scripting.html#script](https://html.spec.whatwg.org/multipage/scripting.html#script)
 ```html
 <html>
     <body background="https://helps2020.ml/_share/BGD.gif">
       <style>
         td {
           width: 370px;
           }
       </style>
       <audio type="audio/mpeg" id="audioElement" controls="controls">
             <source id="srcElement" src="" type="audio/mp3">
         </audio>
     　<script type="text/javascript">
         var src = [
             '001.mp3', /*　　No.01　　*/
             '002.mp3', /*　　No.02　　*/
             '003.mp3', /* 用意してないファイル */
         ];
         /* global variables */
         var currentRand = 0;
         var src_elm = document.getElementById("srcElement");
         var audio_elm = document.getElementById("audioElement");
         var start_time;
         /* create new randmize number */
         var randmize_wrapper = function () {
             var rand = Math.floor( Math.random() * src.length );
             return rand;
         }
         /* 全コンテンツの読み込みが終わったタイミングで実行される処理 */
         document.addEventListener("DOMContentLoaded", function() {
+          let rand = randmize_wrapper();
+          currentRand = rand;
+          src_elm.setAttribute('src', src[rand]);
+          audio_elm.load();
+          audio_elm.play();
+        });
+        /* audioタグで1曲の再生が終わったタイミングで呼び出される処理 */
+        audio_elm.addEventListener('ended', function() {
+          let rand = randmize_wrapper();
+          while ( currentRand == rand ) {
+            rand = randmize_wrapper();
+          }
+          currentRand = rand;
+          src_elm.setAttribute('src', src[rand]);
+          audio_elm.load();
+          audio_elm.play();
+        });
+        /* srcに指定されたファイルが読み込めなかったときに発生するイベントを処理する */
+        src_elm.addEventListener('error', function(event) {
+          event.stopPropagation();
+          event.preventDefault();
+          time();
+          let element = document.createElement('div');
+          element.innerHTML = start_time + ' 【Error】NOT Found<br>';
+          document.body.insertBefore(element, audio_elm.nextSibling);
           let rand = randmize_wrapper();
+          while ( currentRand == rand ) {
+            rand = randmize_wrapper();
+          }
-          currentRand = rand;
+          currentRand = rand;
           src_elm.setAttribute('src', src[rand]);
           audio_elm.load();
           audio_elm.play();
         });
-        /* audioタグで1曲の再生が終わったタイミングで呼び出される処理 */
-        audio_elm.addEventListener('ended', function() {
-          let rand = randmize_wrapper();
-          while ( currentRand == rand ) {
-            rand = randmize_wrapper();
-          }
-          currentRand = rand;
-          src_elm.setAttribute('src', src[rand]);
-          audio_elm.load();
-          audio_elm.play();
-        });
-        /* srcに指定されたファイルが読み込めなかったときに発生するイベントを処理する */
-        src_elm.addEventListener('error', function() {
-          time();
-          let element = document.createElement('div');
-          element.innerHTML = start_time + ' 【Error】NOT Found<br>';
-          document.body.insertBefore(element, audio_elm.nextSibling);
-          let rand = randmize_wrapper();
-          while ( currentRand == rand ) {
-            rand = randmize_wrapper();
-          }
-          currentRand = rand;
-          src_elm.setAttribute('src', src[rand]);
-          audio_elm.load();
-          audio_elm.play();
-        });
         function time() {
             let nowTime = new Date();
             let nowHour = nowTime.getHours();
             let nowMin  = nowTime.getMinutes();
             let nowSec  = nowTime.getSeconds();
             /* 0埋めの定型処理 */
             nowHour = "00" + String(nowHour);
             nowMin = "00" + String(nowMin);
             nowSec = "00" + String(nowSec);
             nowHour = nowHour.substr(nowHour.length-2, 2);
             nowMin = nowMin.substr(nowMin.length-2, 2);
             nowSec = nowSec.substr(nowSec.length-2, 2);
             start_time = nowHour + ":" + nowMin + ":" + nowSec;
         };
         function name() {
             let element = document.createElement('div');
             setInterval(time, 500);
             let playtime = audio_elm.currentTime;
             if (playtime > 0 && playtime < 1) {
                 switch(currentRand) {
                     case 0:
                         element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:01　曲名A</td><td>作曲A</td></tr><table>';
                         break;
                     case 1:
                         element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:02　曲名B</td><td>作曲B</td></tr><table>';
                         break;
                     default:
                         element.innerHTML = start_time + ' 【Error】NOT Found<br>';
                         break;
                 }
                 document.body.insertBefore(element, audio_elm.nextSibling);
             }
         };
         setInterval(name, 1000);
       </script>
   　</body>
 </html>
 ```

誤字の修正

2021/06/29 12:52

投稿

nekora

スコア501

test CHANGED Viewed

@@ -150,8 +150,6 @@
           audio_elm.play();
         });

誤字の修正

2021/06/29 12:52

投稿

nekora

スコア501

test CHANGED Viewed

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