こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近では、Webサイトでも「音」を活用するケースが少しずつ増えてきました。
- 操作時に「カチッ」と効果音が鳴るUI
- ゲームページや作品紹介でBGMを流す
- クリックで再生するナレーション
…など、視覚だけでは伝えきれない“印象”を音でサポートすることで、より印象に残るWeb体験が生まれます。
今回はそんな“音の演出”を可能にする HTML5のAudio API（オーディオAPI） を使って、BGMや効果音をWebに実装する方法をわかりやすく紹介していきます！
基本は
まず、HTMLでは音声を扱うタグとして audio 要素が用意されています。
<audio src="sound.mp3" autoplay loop></audio>このように使えば、ページが読み込まれたときに音を自動再生できます。
しかし最近のブラウザでは自動再生（autoplay）は制限される傾向が強く、ユーザーの操作（クリックなど）がないと音が鳴らない仕様になっています。
そのため、JavaScriptと組み合わせてコントロールするのが実用的です。
HTML Audio API の基本的な使い方
JavaScriptでは以下のようにして音声ファイルをコントロールできます。
BGMを再生する
const bgm = new Audio("bgm.mp3");
bgm.loop = true;
document.getElementById("play-btn").addEventListener("click", () => {
bgm.play();
});効果音を鳴らす（UIに連動）
const se = new Audio("click.mp3");
document.getElementById("submit").addEventListener("click", () => {
se.currentTime = 0; // 途中再生防止
se.play();
});フォームのボタンやリンクに効果音を仕込む場合は、currentTime = 0; で毎回頭から再生するようにするのがコツです。
自動再生の注意点とユーザー操作のトリガー
前述したように、最近のブラウザは「音の自動再生」を厳しく制限しています。
- ページ読み込み時に勝手に音を鳴らすのはNG（自動ブロックされます）
- 必ず「ユーザーがクリックした」などのアクションをトリガーに再生する
そのため、WebサイトにBGMをつける場合は、「再生ボタン」や「ミュートON/OFF」など、ユーザーが音声をコントロールできるUIを用意しましょう。
音声ファイルの形式と容量にも気を配ろう
音声ファイルの形式やサイズも重要なポイントです。
- 形式は MP3、OGG、WAV のいずれか（MP3が最も互換性あり）
- できるだけ 1MB 未満の軽量ファイルにする
- サーバー側の読み込み時間も考慮しよう
WAV形式は高音質ですが重いので、BGMにはMP3が現実的。効果音であればWAVでもOKです。
応用テクニック：ミュート切り替え／音量調整／同時再生
Audio API を使えば、下記のような高度な制御も可能です。
- 音量調整： bgm.volume = 0.5;（0～1の間で設定）
- ミュート： bgm.muted = true;
- 複数の効果音を同時再生： new Audio().play() を都度実行すればOK
まとめ
Webサイトに音を取り入れると、視覚だけでは伝えきれない雰囲気や臨場感を演出できます。
HTML Audio API はとてもシンプルな構文で扱えるので、初心者の方でも気軽に導入可能です。
ただし、音の扱いには注意点も多いので、ユーザーの操作を前提とした実装を心がけ、音量・容量にも配慮した快適なUX設計を行いましょう。
たとえば、以下のような場面では音が効果を発揮します。
- ポートフォリオサイトの「演出」として
- ゲーム・クイズなどのWebコンテンツ
- フォーム送信時の「完了音」など
音は“気持ち”に届くインターフェースです。
ぜひあなたのWebサイトにも、ちょっとした「音の魔法」を加えてみてくださいね！
satokotadesignキャンペーン実施中！
