同様の質問をしました。→こちら
下記のように記載することができるようです。私もできました。
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() {
53 time();
54 let element = document.createElement('div');
55 element.innerHTML = start_time + ' 【Error】NOT Found<br>';
56 document.body.insertBefore(element, audio_elm.nextSibling);
57
58 let rand = randmize_wrapper();
59 while ( currentRand == rand ) {
60 rand = randmize_wrapper();
61 }
62 currentRand = rand;
63 src_elm.setAttribute('src', src[rand]);
64 audio_elm.load();
65 audio_elm.play();
66 });
67
68 function time() {
69 let nowTime = new Date();
70
71 let nowHour = nowTime.getHours();
72 let nowMin = nowTime.getMinutes();
73 let nowSec = nowTime.getSeconds();
74
75 /* 0埋めの定型処理 */
76 nowHour = "00" + String(nowHour);
77 nowMin = "00" + String(nowMin);
78 nowSec = "00" + String(nowSec);
79 nowHour = nowHour.substr(nowHour.length-2, 2);
80 nowMin = nowMin.substr(nowMin.length-2, 2);
81 nowSec = nowSec.substr(nowSec.length-2, 2);
82
83 start_time = nowHour + ":" + nowMin + ":" + nowSec;
84 };
85
86
87 function name() {
88 let element = document.createElement('div');
89
90 setInterval(time, 500);
91
92 let playtime = audio_elm.currentTime;
93 if (playtime > 0 && playtime < 1) {
94 switch(currentRand) {
95 case 0:
96 element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:01 曲名A</td><td>作曲A</td></tr><table>';
97 break;
98 case 1:
99 element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:02 曲名B</td><td>作曲B</td></tr><table>';
100 break;
101 default:
102 element.innerHTML = start_time + ' 【Error】NOT Found<br>';
103 break;
104 }
105
106 document.body.insertBefore(element, audio_elm.nextSibling);
107 }
108 };
109 setInterval(name, 1000);
110 </script>
111 </body>
112</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。