ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。画像にプールの喧騒の音声を加えました。今回は4種の画像と音楽を用意し、音声の終了時に次の画像と音楽に切り替える機能を付けました。JavaScriptコードを初めて定義し、本格的な動的表現を試みます。ここからはHTMLコードからJavaScriptコードという名称を使います。今回の課題の肝は画像と音声を切り替えることです。音声データは数秒から数分間、鳴動することが多く、時間はマチマチの場合がほとんどです。そのため、終了したときに動作するようにイベント動作を定義します。今回、終了イベントで次の曲を演奏するように設定し、4回、繰り返したら終了するようにします。やまだたろう<BR><BR>お父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。}}</script></html>JavaScriptコードの説明12~12行、bodyブロックで音声データ、画像データにより絵日記の主部を作成。23行、音声データを定義する。JavaScriptコードで動的に4曲切り替える。34行、参照データを表示。45~11行、絵日記部分。67行、4画像をJavaScriptコードで切り替える。78~10行、日記文。813~29行、JavaScriptコードの全文。914行、タイトル文を定義。1015~16行、画像とBGMを定義。1117行、4つの絵とBGMを制御する変数。1218行、4つのイベントオブジェクト。1420行、再生完了を知らせる。やまだたろうお父さん、お母さん、僕、妹の四人で温泉リゾートホテルに車で出かけました。プールでお父さんと泳ぎの競争をしました。お父さんにはかないません。夕方、バーベキューで満腹になりました。夜はハワイアンダンスショーを楽しみました。次へのステップ今回はJavaScriptコードを導入して動的表現が始まりました。次回は、動画に進むかを検討中です。コメントをキャンセル下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。コメント名前メールアドレス上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。