自由研究のはじめ3

拡張項目

前回、文字と画像にプールの喧騒の音声を加えました。今回は4種の画像と音楽を用意し、音声の終了時に次の画像と音楽に切り替える機能を付けました。

JavaScriptコードを初めて定義し、本格的な動的表現を試みます。ここからはHTMLコードからJavaScriptコードという名称を使います。

画像と音声の切り替え方

今回の課題の肝は画像と音声を切り替えることです。音声データは数秒から数分間、鳴動することが多く、時間はマチマチの場合がほとんどです。

そのため、終了したときに動作するようにイベント動作を定義します。

今回、終了イベントで次の曲を演奏するように設定し、4回、繰り返したら終了するようにします。

サンプルコード

<html>
<body onLoad="closeProc();/*document.oncontextmenu=function(e){return false;};*/">
<audio id="event4" src="" autoplay controls controlsList="nodownload"></audio><span id="ttl4" style="font-size:26px; color:skyblue"></span><SPAN style="font-size:12px; color:darkgreen">
<BR>参照音楽=音楽研究所,http://www.asahi-net.or.jp/~HB9T-KTD/music/musj.html  <span style="font-size:9px; color:orange">Ver0.01, &copy;TacM,2017</span></SPAN>
<DIV style="position:relative; left:0px; top:0px;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/notebook.png" width="580" height="434">
<img id="pic4" src="" style="position:absolute; left:100px; top:85px;">
<div style="width:550px; height:420px; font-size:20px; color:navy; font-family:serif; position:absolute; left:20px; top:60px;">
きのう、お父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。まだ、お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。
</div>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
var title = ["\u2776四人でドライブ", "\u2777プールサイドの喧騒", "\u2778野外晩餐", "\u2779ハワイアンダンス"];
var picture = ["http://aidesign.lolipop.jp/wp-content/uploads/2017/08/drive-0.gif", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/pool-1.png", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/camp-2.jpg", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/dance-3.png"];
var music = ["http://aidesign.lolipop.jp/wp-content/uploads/2017/08/cucaracha-0.mp3", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Picnic_Music_Box1", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/Camp-2.mp3", "http://aidesign.lolipop.jp/wp-content/uploads/2017/08/HAWAII-3.mp3"];
var count = -1;										//4つの絵を制御
var evnt = document.getElementById("event4");		//4つのイベントオブジェクト
var picGWH = document.getElementById("pic4");		//画像, 幅, 高さ
evnt.addEventListener("ended", closeProc, false);	//再生完了を知らせる
function closeProc(){								//音声の再生完了で起動する
	if(++count < 4){								//0, 1, 2, 3
		evnt.src = music[count];									//曲名
		evnt.play();												//BGM
		picGWH.src = picture[count];								//画像
		document.getElementById("ttl4").innerHTML = title[count];	//タイトル
	}
}
</script>
</html>

JavaScriptコードの説明

①2~12行、bodyブロックで音声データ、画像データにより絵日記の主部を作成。
②3行、音声データを定義する。JavaScriptコードで動的に4曲切り替える。
③4行、参照データを表示。
④5~11行、絵日記部分。
⑤6行、日記原稿画像。
⑥7行、4画像をJavaScriptコードで切り替える。
⑦8~10行、日記文。
⑧13~29行、JavaScriptコードの全文。
⑨14行、タイトル文を定義。
⑩15~16行、画像とBGMを定義。
⑪17行、4つの絵とBGMを制御する変数。
⑫18行、4つのイベントオブジェクト。
⑬19行、画像, 幅, 高さを制御する。
⑭20行、再生完了を知らせる。
⑮21~28行、音声の再生完了で起動する。

絵日記


参照音楽=音楽研究所,http://www.asahi-net.or.jp/~HB9T-KTD/music/musj.html  Ver0.01, ©TacM,2017
きのう、お父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。まだ、お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。

次へのステップ

今回はJavaScriptコードを導入して動的表現が始まりました。次回は、動画に進むかを検討中です。

 

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA