日別アーカイブ: 2017-08-03

自由研究のはじめ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="https://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;">
2017年8月4日　　　　　　やまだたろう<BR><BR>お父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。まだ、お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。
</div>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
var title = ["\u2776四人でドライブ", "\u2777プールサイドの喧騒", "\u2778野外晩餐", "\u2779ハワイアンダンス"];
var picture = ["https://aidesign.lolipop.jp/wp-content/uploads/2017/08/drive-0.gif", "https://aidesign.lolipop.jp/wp-content/uploads/2017/08/pool-1.png", "https://aidesign.lolipop.jp/wp-content/uploads/2017/08/camp-2.jpg", "https://aidesign.lolipop.jp/wp-content/uploads/2017/08/dance-3.png"];
var music = ["https://aidesign.lolipop.jp/wp-content/uploads/2017/08/La_cucaracha.mp3", "https://aidesign.lolipop.jp/wp-content/uploads/2017/08/Picnic_Music_Box1.mp3", "https://aidesign.lolipop.jp/wp-content/uploads/2017/08/Campers_will_shine_tonight_Music_Box.mp3", "https://aidesign.lolipop.jp/wp-content/uploads/2017/08/HAWAII_Ponoi_hawaiian.mp3"];
var count = -1;                                     //4つの絵とBGMを制御する変数
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
2017年8月4日　　　　　　やまだたろう

お父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。まだ、お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。

次へのステップ

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