今回は、「車の画像をクリックするとエンジン音が鳴る」というWebページを例に、画像・音声・JavaScriptの連携の基本をわかりやすく解説します！

「画像をクリックしたら音が鳴るだけ？」と思った方、ちょっと待ってください。それだけでたくさんのWebの基礎が詰まっているんです。

全体の構成と使われている技術

まずは構成を見てみましょう。

技術使われている場面役割
HTML画像・音声の配置、タイトル、リンクなどページの構造
CSSレイアウトや画像のデザイン見た目を整える
JavaScript画像をクリックしたときに音を再生ページに動きを加える
Bootstrapレスポンシブ対応、フォントなどデザインを簡単に統一化
Font Awesome車のアイコン表示見た目のアクセント

HTMLで画像と音を設置する方法

<img> と <audio> の組み合わせが鍵！

<img src="car_convertible.png" alt="エンジン画像" id="engineImage" />
<audio id="engineSound" src="engine.mp3"></audio>

ここで使われている2つのタグがポイントです。

タグ意味・役割
<img>画像を表示する
<audio>音声ファイルを読み込む

id属性とは？

HTMLではid="○○"と書くことで、JavaScriptから要素を特定できるようにするためのラベルになります。これがないと、JavaScriptが「どの画像か分からない！」となってしまうんです。

CSSでクリック可能な見た目にする

img {
  cursor: pointer;
  transition: transform 0.2s;
}
img:hover {
  transform: scale(1.05);
}
  • cursor: pointer;：マウスカーソルが手の形になって「クリックできますよ」と知らせます。
  • transform: scale(1.05);：ホバー（上にカーソルが乗ったとき）で画像を少し大きく見せて、視覚的に楽しくしています。

こういったちょっとした動きが、使いやすさを大きく左右するんですよ！

JavaScriptで「音が鳴る」仕組みを解説！

クリック→音を再生の流れ

const image = document.querySelector('#engineImage');
const sound = document.querySelector('#engineSound');

image.addEventListener('click', () => {
  sound.currentTime = 0;
  sound.play();
});

これだけで、画像をクリックすると音が鳴るようになります。

キーワード解説

コード意味例え
querySelector()HTMLから要素を1つ取得「住所で家を探す」ような操作
addEventListener()ユーザー操作に対する反応を指定するドアベルに反応する機械
currentTime = 0;音声の再生位置をリセット（0秒に戻す）CDの最初に戻す
play()音声を再生音楽プレイヤーの再生ボタン

なんで .currentTime = 0 が必要なの？

たとえば音声が2秒だけのエンジン音だとして、2回連続でクリックしても、再生位置が終わったままだと音が鳴らないんです。currentTime = 0; で毎回最初から再生されるようにする工夫なんですね。

初心者がつまずきやすいポイントまとめ

よくある疑問解説
「画像を押しても音が鳴らない！」ブラウザの音声再生ポリシーで自動再生が制限されることがあります。クリック操作が必要です。
「音が途中で止まるのはなぜ？」連打されると最後の再生が被ることがあります。currentTime = 0で対応済です。
「画像の見た目が変わらない…」CSSのhoverやtransformが反映されていない場合、セレクタのスペルミスなどに注意しましょう。

今後のステップアップには？

このサンプルを理解できたら、次はこうした内容にチャレンジするとレベルアップできます！

ステップ内容
イベントの種類を増やすmouseover, keydownなども使ってみよう
音声の制御機能を追加停止ボタン・ボリュームバーなど
複数の音声を切り替えてみる複数の画像や音声を選べるようにする
Web APIの活用AudioContextでより高度な音の操作

おわりに

いかがでしたか？たった1つのクリックと再生機能でも、HTML・CSS・JavaScriptの基礎知識が総動員されていることがわかります。

こうしたミニプロジェクトを繰り返し作っていくことが、Web制作スキルをぐんぐん伸ばす近道です！

Webアプリケーション制作のための小ネタ集　目次に戻る

最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる