回答編集履歴
4
コードの修正
answer
CHANGED
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
//イベントリスナー内でnewしてるといくつものAudioオブジェクトが作られて
|
|
44
44
|
//その内、メモリ不足でクラッシュする。
|
|
45
45
|
//グローバル変数として１つだけ、作っておくようにする。
|
|
46
|
+
//でないとAudioオブジェクトが複数作られ、クリックの分多重で再生されてしまう
|
|
46
47
|
var my_audio = new Audio("音声ファイルのURL");
|
|
47
48
|
|
|
48
49
|
document.getElementById("kuriku").addEventListener("click",function() {
|
|
@@ -59,11 +60,6 @@
|
|
|
59
60
|
var target = document.getElementById( 'target' );
|
|
60
61
|
var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
|
|
61
62
|
target.innerHTML = element;
|
|
62
|
-
|
|
63
|
-
//サウンドを停止。長い曲だとクリックするたびに多重で再生されてしまうので
|
|
64
|
-
//画像が表示されたら曲を止める
|
|
65
|
-
//短い効果音などの時は下の行をコメントアウトしてください
|
|
66
|
-
my_audio.pause();
|
|
67
63
|
});
|
|
68
64
|
</script>
|
|
69
65
|
|
3
コードの修正
answer
CHANGED
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
document.getElementById("kuriku").addEventListener("click",function() {
|
|
49
49
|
//ボタンにクリックイベントを設定
|
|
50
50
|
my_audio.currentTime = 0; //再生開始位置を先頭に戻す
|
|
51
|
+
my_audio.loop = false; //ループ再生をOFFにする
|
|
51
52
|
my_audio.load(); //先にloadしておかないと動かないブラウザーがある
|
|
52
53
|
my_audio.play(); //サウンドを再生
|
|
53
54
|
|
|
@@ -61,7 +62,8 @@
|
|
|
61
62
|
|
|
62
63
|
//サウンドを停止。長い曲だとクリックするたびに多重で再生されてしまうので
|
|
63
64
|
//画像が表示されたら曲を止める
|
|
65
|
+
//短い効果音などの時は下の行をコメントアウトしてください
|
|
64
|
-
my_audio.
|
|
66
|
+
my_audio.pause();
|
|
65
67
|
});
|
|
66
68
|
</script>
|
|
67
69
|
|
2
コードの修正
answer
CHANGED
|
@@ -40,20 +40,28 @@
|
|
|
40
40
|
'003.jpeg', /* No.03 */
|
|
41
41
|
]
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
//イベントリスナー内でnewしてるといくつものAudioオブジェクトが作られて
|
|
44
|
+
//その内、メモリ不足でクラッシュする。
|
|
45
|
+
//グローバル変数として１つだけ、作っておくようにする。
|
|
44
46
|
var my_audio = new Audio("音声ファイルのURL");
|
|
45
|
-
//ボタンにクリックイベントを設定
|
|
46
|
-
my_audio.currentTime = 0; //再生開始位置を先頭に戻す
|
|
47
|
-
my_audio.load(); //先にloadしておかないと動かないブラウザーがある
|
|
48
|
-
my_audio.play(); //サウンドを再生
|
|
49
47
|
|
|
48
|
+
document.getElementById("kuriku").addEventListener("click",function() {
|
|
50
|
-
|
|
49
|
+
//ボタンにクリックイベントを設定
|
|
50
|
+
my_audio.currentTime = 0; //再生開始位置を先頭に戻す
|
|
51
|
-
|
|
51
|
+
my_audio.load(); //先にloadしておかないと動かないブラウザーがある
|
|
52
|
+
my_audio.play(); //サウンドを再生
|
|
52
53
|
|
|
54
|
+
//ランダムな番号を生成する
|
|
55
|
+
var selectnum = Math.floor(Math.random() * imglist.length);
|
|
56
|
+
|
|
53
|
-
|
|
57
|
+
//targetのinnerHTMLに画像のソースを入れ込む
|
|
54
|
-
|
|
58
|
+
var target = document.getElementById( 'target' );
|
|
55
|
-
|
|
59
|
+
var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
|
|
56
|
-
|
|
60
|
+
target.innerHTML = element;
|
|
61
|
+
|
|
62
|
+
//サウンドを停止。長い曲だとクリックするたびに多重で再生されてしまうので
|
|
63
|
+
//画像が表示されたら曲を止める
|
|
64
|
+
my_audio.stop();
|
|
57
65
|
});
|
|
58
66
|
</script>
|
|
59
67
|
|
1
コードの修正 説明の修正
answer
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
CSSが公開されてないので、完全なテストをできませんでしたが、
|
|
1
|
+
CSSが公開されてないので、完全なテストをできませんでしたが、**現状で、当方では動作確認できました。**
|
|
2
2
|
|
|
3
|
+
**次回からはソースの完全なセットを提示するようにしてください。（CSSも忘れずに！）**
|
|
3
4
|
|
|
5
|
+
|
|
4
6
|
kurikuのイベントハンドラ内で、音声再生と合わせて画像の差し込みをすればOKです。
|
|
5
7
|
いらないイベントハンドラは削除しました。
|
|
6
8
|
|
|
@@ -15,7 +17,6 @@
|
|
|
15
17
|
<meta charset="UTF-8">
|
|
16
18
|
<link rel="stylesheet" type="text/css" href="mainpage.css">
|
|
17
19
|
<title>aaa</title>
|
|
18
|
-
<!-- <script src="javatest1.js" defer></script> -->
|
|
19
20
|
</head>
|
|
20
21
|
|
|
21
22
|
|
|
@@ -28,7 +29,10 @@
|
|
|
28
29
|
|
|
29
30
|
</div>
|
|
30
31
|
|
|
32
|
+
<!-- <script src="javatest1.js"></script> --><!-- 別ファイルにした場合はここで読み込む-->
|
|
31
33
|
<script>
|
|
34
|
+
//画像の配列はscriptタグの直下の階層にvarで記載することでグローバル変数となりどこからでも
|
|
35
|
+
//参照できるようになります。後で別の処理やイベントハンドラ内からも参照できるので便利です
|
|
32
36
|
var imglist = [
|
|
33
37
|
//画像のURL
|
|
34
38
|
'001.jpeg', /* No.01 */
|