teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問音楽を再生する際にエラーが発生したら次へ進めたい

編集履歴

回答編集履歴

3

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

2022/04/15 01:44

投稿

nekora
nekora

スコア501

answer CHANGED
@@ -1,124 +1,126 @@
1
- letを使っているところを見るとグローバル変数とローカル変数について勉強されたようですね。
2
- なので、今回のコードは厳密に、letとvarを使い分けて書きました。
3
-
4
- src属性を持つものが何らかの原因で読み込めないときは、すっごくありきたりな
5
- errorというイベントを投げます。
6
- なのでそいつを拾ってやって、再度乱数抽選、srcへセット、load、playとすればOKです。
7
-
8
- [参考文献：https://html.spec.whatwg.org/multipage/scripting.html#script](https://html.spec.whatwg.org/multipage/scripting.html#script)
9
-
10
-
11
- ```html
12
- <html>
13
- <body background="https://helps2020.ml/_share/BGD.gif">
14
- <style>
15
- td {
16
- width: 370px;
17
- }
18
- </style>
19
- <audio type="audio/mpeg" id="audioElement" controls="controls">
20
- <source id="srcElement" src="" type="audio/mp3">
21
- </audio>
22
- 　<script type="text/javascript">
23
- var src = [
24
- '001.mp3', /*　　No.01　　*/
25
- '002.mp3', /*　　No.02　　*/
26
- '003.mp3', /* 用意してないファイル */
27
- ];
28
-
29
- /* global variables */
30
- var currentRand = 0;
31
- var src_elm = document.getElementById("srcElement");
32
- var audio_elm = document.getElementById("audioElement");
33
- var start_time;
34
-
35
- /* create new randmize number */
36
- var randmize_wrapper = function () {
37
- var rand = Math.floor( Math.random() * src.length );
38
- return rand;
39
- }
40
-
41
- /* 全コンテンツの読み込みが終わったタイミングで実行される処理 */
42
- document.addEventListener("DOMContentLoaded", function() {
43
- let rand = randmize_wrapper();
44
- currentRand = rand;
45
- src_elm.setAttribute('src', src[rand]);
46
- audio_elm.load();
47
- audio_elm.play();
48
- });
49
-
50
- /* audioタグで1曲の再生が終わったタイミングで呼び出される処理 */
51
- audio_elm.addEventListener('ended', function() {
52
- let rand = randmize_wrapper();
53
- while ( currentRand == rand ) {
54
- rand = randmize_wrapper();
55
- }
56
- currentRand = rand;
57
- src_elm.setAttribute('src', src[rand]);
58
- audio_elm.load();
59
- audio_elm.play();
60
- });
61
-
62
- /* srcに指定されたファイルが読み込めなかったときに発生するイベントを処理する */
63
- src_elm.addEventListener('error', function() {
64
- time();
65
- let element = document.createElement('div');
66
- element.innerHTML = start_time + ' 【Error】NOT Found<br>';
67
- document.body.insertBefore(element, audio_elm.nextSibling);
68
-
69
- let rand = randmize_wrapper();
70
- while ( currentRand == rand ) {
71
- rand = randmize_wrapper();
72
- }
73
- currentRand = rand;
74
- src_elm.setAttribute('src', src[rand]);
75
- audio_elm.load();
76
- audio_elm.play();
77
- });
78
-
79
- function time() {
80
- let nowTime = new Date();
81
-
82
- let nowHour = nowTime.getHours();
83
- let nowMin = nowTime.getMinutes();
84
- let nowSec = nowTime.getSeconds();
85
-
86
- /* 0埋めの定型処理 */
87
- nowHour = "00" + String(nowHour);
88
- nowMin = "00" + String(nowMin);
89
- nowSec = "00" + String(nowSec);
90
- nowHour = nowHour.substr(nowHour.length-2, 2);
91
- nowMin = nowMin.substr(nowMin.length-2, 2);
92
- nowSec = nowSec.substr(nowSec.length-2, 2);
93
-
94
- start_time = nowHour + ":" + nowMin + ":" + nowSec;
95
- };
96
-
97
-
98
- function name() {
99
- let element = document.createElement('div');
100
-
101
- setInterval(time, 500);
102
-
103
- let playtime = audio_elm.currentTime;
104
- if (playtime > 0 && playtime < 1) {
105
- switch(currentRand) {
106
- case 0:
107
- element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:01　曲名A</td><td>作曲A</td></tr><table>';
108
- break;
109
- case 1:
110
- element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:02　曲名B</td><td>作曲B</td></tr><table>';
111
- break;
112
- default:
113
- element.innerHTML = start_time + ' 【Error】NOT Found<br>';
114
- break;
115
- }
116
-
117
- document.body.insertBefore(element, audio_elm.nextSibling);
118
- }
119
- };
120
- setInterval(name, 1000);
121
- </script>
122
- 　</body>
123
- </html>
1
+ letを使っているところを見るとグローバル変数とローカル変数について勉強されたようですね。
2
+ なので、今回のコードは厳密に、letとvarを使い分けて書きました。
3
+
4
+ src属性を持つものが何らかの原因で読み込めないときは、すっごくありきたりな
5
+ errorというイベントを投げます。
6
+ なのでそいつを拾ってやって、再度乱数抽選、srcへセット、load、playとすればOKです。
7
+
8
+ [参考文献：https://html.spec.whatwg.org/multipage/scripting.html#script](https://html.spec.whatwg.org/multipage/scripting.html#script)
9
+
10
+
11
+ ```html
12
+ <html>
13
+ <body background="https://helps2020.ml/_share/BGD.gif">
14
+ <style>
15
+ td {
16
+ width: 370px;
17
+ }
18
+ </style>
19
+ <audio type="audio/mpeg" id="audioElement" controls="controls">
20
+ <source id="srcElement" src="" type="audio/mp3">
21
+ </audio>
22
+ 　<script type="text/javascript">
23
+ var src = [
24
+ '001.mp3', /*　　No.01　　*/
25
+ '002.mp3', /*　　No.02　　*/
26
+ '003.mp3', /* 用意してないファイル */
27
+ ];
28
+
29
+ /* global variables */
30
+ var currentRand = 0;
31
+ var src_elm = document.getElementById("srcElement");
32
+ var audio_elm = document.getElementById("audioElement");
33
+ var start_time;
34
+
35
+ /* create new randmize number */
36
+ var randmize_wrapper = function () {
37
+ var rand = Math.floor( Math.random() * src.length );
38
+ return rand;
39
+ }
40
+
41
+ /* 全コンテンツの読み込みが終わったタイミングで実行される処理 */
42
+ document.addEventListener("DOMContentLoaded", function() {
43
+ let rand = randmize_wrapper();
44
+ currentRand = rand;
45
+ src_elm.setAttribute('src', src[rand]);
46
+ audio_elm.load();
47
+ audio_elm.play();
48
+ });
49
+
50
+ /* audioタグで1曲の再生が終わったタイミングで呼び出される処理 */
51
+ audio_elm.addEventListener('ended', function() {
52
+ let rand = randmize_wrapper();
53
+ while ( currentRand == rand ) {
54
+ rand = randmize_wrapper();
55
+ }
56
+ currentRand = rand;
57
+ src_elm.setAttribute('src', src[rand]);
58
+ audio_elm.load();
59
+ audio_elm.play();
60
+ });
61
+
62
+ /* srcに指定されたファイルが読み込めなかったときに発生するイベントを処理する */
63
+ src_elm.addEventListener('error', function(event) {
64
+ event.stopPropagation();
65
+ event.preventDefault();
66
+ time();
67
+ let element = document.createElement('div');
68
+ element.innerHTML = start_time + ' 【Error】NOT Found<br>';
69
+ document.body.insertBefore(element, audio_elm.nextSibling);
70
+
71
+ let rand = randmize_wrapper();
72
+ while ( currentRand == rand ) {
73
+ rand = randmize_wrapper();
74
+ }
75
+ currentRand = rand;
76
+ src_elm.setAttribute('src', src[rand]);
77
+ audio_elm.load();
78
+ audio_elm.play();
79
+ });
80
+
81
+ function time() {
82
+ let nowTime = new Date();
83
+
84
+ let nowHour = nowTime.getHours();
85
+ let nowMin = nowTime.getMinutes();
86
+ let nowSec = nowTime.getSeconds();
87
+
88
+ /* 0埋めの定型処理 */
89
+ nowHour = "00" + String(nowHour);
90
+ nowMin = "00" + String(nowMin);
91
+ nowSec = "00" + String(nowSec);
92
+ nowHour = nowHour.substr(nowHour.length-2, 2);
93
+ nowMin = nowMin.substr(nowMin.length-2, 2);
94
+ nowSec = nowSec.substr(nowSec.length-2, 2);
95
+
96
+ start_time = nowHour + ":" + nowMin + ":" + nowSec;
97
+ };
98
+
99
+
100
+ function name() {
101
+ let element = document.createElement('div');
102
+
103
+ setInterval(time, 500);
104
+
105
+ let playtime = audio_elm.currentTime;
106
+ if (playtime > 0 && playtime < 1) {
107
+ switch(currentRand) {
108
+ case 0:
109
+ element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:01　曲名A</td><td>作曲A</td></tr><table>';
110
+ break;
111
+ case 1:
112
+ element.innerHTML = '<table><tr><th>'+ start_time +'</th><td>ID:02　曲名B</td><td>作曲B</td></tr><table>';
113
+ break;
114
+ default:
115
+ element.innerHTML = start_time + ' 【Error】NOT Found<br>';
116
+ break;
117
+ }
118
+
119
+ document.body.insertBefore(element, audio_elm.nextSibling);
120
+ }
121
+ };
122
+ setInterval(name, 1000);
123
+ </script>
124
+ 　</body>
125
+ </html>
124
126
  ```

2

誤字の修正

2021/06/29 12:52

投稿

nekora
nekora

スコア501

answer CHANGED
@@ -74,7 +74,6 @@
74
74
  src_elm.setAttribute('src', src[rand]);
75
75
  audio_elm.load();
76
76
  audio_elm.play();
77
-
78
77
  });
79
78
 
80
79
  function time() {

1

誤字の修正

2021/06/29 12:52

投稿

nekora
nekora

スコア501

answer CHANGED
@@ -2,7 +2,8 @@
2
2
  なので、今回のコードは厳密に、letとvarを使い分けて書きました。
3
3
 
4
4
  src属性を持つものが何らかの原因で読み込めないときは、すっごくありきたりな
5
+ errorというイベントを投げます。
5
- errorというイベントを投げます。なのでそいつを拾ってやって、再度乱数抽選、srcへセットload、playとすればOKです。
6
+ なのでそいつを拾ってやって、再度乱数抽選、srcへセット、load、playとすればOKです。
6
7
 
7
8
  [参考文献：https://html.spec.whatwg.org/multipage/scripting.html#script](https://html.spec.whatwg.org/multipage/scripting.html#script)
8
9