回答編集履歴
4
コードの修正
test
CHANGED
|
@@ -88,6 +88,8 @@
|
|
|
88
88
|
|
|
89
89
|
//グローバル変数として１つだけ、作っておくようにする。
|
|
90
90
|
|
|
91
|
+
//でないとAudioオブジェクトが複数作られ、クリックの分多重で再生されてしまう
|
|
92
|
+
|
|
91
93
|
var my_audio = new Audio("音声ファイルのURL");
|
|
92
94
|
|
|
93
95
|
|
|
@@ -120,16 +122,6 @@
|
|
|
120
122
|
|
|
121
123
|
target.innerHTML = element;
|
|
122
124
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
//サウンドを停止。長い曲だとクリックするたびに多重で再生されてしまうので
|
|
126
|
-
|
|
127
|
-
//画像が表示されたら曲を止める
|
|
128
|
-
|
|
129
|
-
//短い効果音などの時は下の行をコメントアウトしてください
|
|
130
|
-
|
|
131
|
-
my_audio.pause();
|
|
132
|
-
|
|
133
125
|
});
|
|
134
126
|
|
|
135
127
|
</script>
|
3
コードの修正
test
CHANGED
|
@@ -98,6 +98,8 @@
|
|
|
98
98
|
|
|
99
99
|
my_audio.currentTime = 0; //再生開始位置を先頭に戻す
|
|
100
100
|
|
|
101
|
+
my_audio.loop = false; //ループ再生をOFFにする
|
|
102
|
+
|
|
101
103
|
my_audio.load(); //先にloadしておかないと動かないブラウザーがある
|
|
102
104
|
|
|
103
105
|
my_audio.play(); //サウンドを再生
|
|
@@ -124,7 +126,9 @@
|
|
|
124
126
|
|
|
125
127
|
//画像が表示されたら曲を止める
|
|
126
128
|
|
|
129
|
+
//短い効果音などの時は下の行をコメントアウトしてください
|
|
130
|
+
|
|
127
|
-
my_audio.s
|
|
131
|
+
my_audio.pause();
|
|
128
132
|
|
|
129
133
|
});
|
|
130
134
|
|
2
コードの修正
test
CHANGED
|
@@ -82,33 +82,49 @@
|
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
//イベントリスナー内でnewしてるといくつものAudioオブジェクトが作られて
|
|
86
|
+
|
|
87
|
+
//その内、メモリ不足でクラッシュする。
|
|
88
|
+
|
|
89
|
+
//グローバル変数として１つだけ、作っておくようにする。
|
|
86
90
|
|
|
87
91
|
var my_audio = new Audio("音声ファイルのURL");
|
|
88
92
|
|
|
89
|
-
//ボタンにクリックイベントを設定
|
|
90
93
|
|
|
91
|
-
my_audio.currentTime = 0; //再生開始位置を先頭に戻す
|
|
92
94
|
|
|
93
|
-
my
|
|
95
|
+
document.getElementById("kuriku").addEventListener("click",function() {
|
|
94
96
|
|
|
97
|
+
//ボタンにクリックイベントを設定
|
|
98
|
+
|
|
99
|
+
my_audio.currentTime = 0; //再生開始位置を先頭に戻す
|
|
100
|
+
|
|
101
|
+
my_audio.load(); //先にloadしておかないと動かないブラウザーがある
|
|
102
|
+
|
|
95
|
-
my_audio.play(); //サウンドを再生
|
|
103
|
+
my_audio.play(); //サウンドを再生
|
|
96
104
|
|
|
97
105
|
|
|
98
106
|
|
|
99
|
-
//ランダムな番号を生成する
|
|
107
|
+
//ランダムな番号を生成する
|
|
100
108
|
|
|
101
|
-
var selectnum = Math.floor(Math.random() * imglist.length);
|
|
109
|
+
var selectnum = Math.floor(Math.random() * imglist.length);
|
|
102
110
|
|
|
103
111
|
|
|
104
112
|
|
|
105
|
-
//targetのinnerHTMLに画像のソースを入れ込む
|
|
113
|
+
//targetのinnerHTMLに画像のソースを入れ込む
|
|
106
114
|
|
|
107
|
-
var target = document.getElementById( 'target' );
|
|
115
|
+
var target = document.getElementById( 'target' );
|
|
108
116
|
|
|
109
|
-
var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
|
|
117
|
+
var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
|
|
110
118
|
|
|
111
|
-
target.innerHTML = element;
|
|
119
|
+
target.innerHTML = element;
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
//サウンドを停止。長い曲だとクリックするたびに多重で再生されてしまうので
|
|
124
|
+
|
|
125
|
+
//画像が表示されたら曲を止める
|
|
126
|
+
|
|
127
|
+
my_audio.stop();
|
|
112
128
|
|
|
113
129
|
});
|
|
114
130
|
|
1
コードの修正 説明の修正
test
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
CSSが公開されてないので、完全なテストをできませんでしたが、
|
|
1
|
+
CSSが公開されてないので、完全なテストをできませんでしたが、**現状で、当方では動作確認できました。**
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
**次回からはソースの完全なセットを提示するようにしてください。（CSSも忘れずに！）**
|
|
2
6
|
|
|
3
7
|
|
|
4
8
|
|
|
@@ -32,8 +36,6 @@
|
|
|
32
36
|
|
|
33
37
|
<title>aaa</title>
|
|
34
38
|
|
|
35
|
-
<!-- <script src="javatest1.js" defer></script> -->
|
|
36
|
-
|
|
37
39
|
</head>
|
|
38
40
|
|
|
39
41
|
|
|
@@ -58,7 +60,13 @@
|
|
|
58
60
|
|
|
59
61
|
|
|
60
62
|
|
|
63
|
+
<!-- <script src="javatest1.js"></script> --><!-- 別ファイルにした場合はここで読み込む-->
|
|
64
|
+
|
|
61
65
|
<script>
|
|
66
|
+
|
|
67
|
+
//画像の配列はscriptタグの直下の階層にvarで記載することでグローバル変数となりどこからでも
|
|
68
|
+
|
|
69
|
+
//参照できるようになります。後で別の処理やイベントハンドラ内からも参照できるので便利です
|
|
62
70
|
|
|
63
71
|
var imglist = [
|
|
64
72
|
|