見出し画像

電子風鈴(ふうりん)をつくる



電子風鈴(でんしふうりん)を作る《1回目》


ここでは、トンカチ、半田ごて、ねじ回しなどで作る工作ではなくプログラミングによる電子工作を扱います。手始めにHLMLプログラミングで風鈴がゆらゆら揺れながら涼やかな音が鳴り響く作品の自作についてまとめています。
むだな時間を使わないように初心者向けに次の作業をお願いします。以下の労役で思うような成果(風鈴鳴動)が得られない場合はパソコンやスマホの扱い方をマスターしてから当記事をお読みください。

初心者のために


①まず、テキストエディタを用意してください。テキストエディタはWindowsパソコンならばメモ帳で十分です。
<div style="border:1px solid green;">
<audio id="windbell" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/07/furin_19.mp3" controls controlsList="nodownload"></audio>
</div>
②上記枠内のテキストをコピー&ペーストしてファイル名「begin.html」で自分のデバイス(ハードディスク)上にテキストファイルを作ります。このファイルの実体は19秒の音声ファイル(MP3)を呼び出すHTMLファイルです。
③ブラウザでデバイス上の「begin.html」にポイントを合わせクリックします。
④横長円あるいは横長四角形の音声再生マークが現れ、左の再生ボタンを押すとチーンという風鈴音が流れたら成功です。
⑤音声再生マークが現れない場合はファイル拡張子htmlがHTMLと認識されないことが原因の場合が多いです。パソコンには多くのHTMLファイルが内蔵されています。そのファイルを起動させ正常な動作になるか調べてください。
⑥スピーカが付属されずに音が出ないことが明らかならば、②で作る「begin.html」を次の内容に変更して作成し、クリックして'こんにちは'が画面に表示されるかを確認します。
<p>こんにちは</p>
この作業で少しの進展も望めない場合はパソコンやタブレットの操作・扱い方の基本知識を吸収後に再挑戦してください。

最終目標


最終目標の作品の成果を1分10秒の動画に収めました。これはひとつの例題です。素敵な作品が生まれますようにともに挑戦してみませんか。
今回はここで終了です。

制作方法は、以下の記事(有料)にまとめました。よろしければご確認ください。

この記事が気に入ったらサポートをしてみませんか?