HTML5 では、audioタグ を使うことでブラウザ上に音声プレイヤーを直接表示し、
mp3・wav などの音声ファイルを再生できます。
YouTubeや外部サービスを使わず、自分のサーバー上の音声を再生したいときに便利です。
この記事では、
- audioタグの基本構造
- よく使う属性（controls・autoplay など）
<source>の使い方- スマホでの再生ルール
- コピペで使える実践コード
を、初心者にも分かりやすく解説します。
audioタグとは？
音声ファイル（mp3、wav、ogg など）をブラウザで直接再生するためのタグ です。
<audio src="sample.mp3" controls></audio>
このように、動画と同じく controls 属性を付けることで再生・停止・音量調整が可能なプレイヤーが表示されます。
音声を埋め込む最小コード（基本構造）
最もシンプルな書き方はこれです：
<audio src="sound.mp3" controls></audio>
これだけでできること
- 音声の再生 / 停止
- シークバーの操作
- 音量変更
- 再生位置の移動
よく使う属性（controls / autoplay / loop）
controls（操作バーを表示）
controls
音声プレイヤーを表示するため、実質ほぼ必須。
autoplay（自動再生）
autoplay
ページ読み込みと同時に再生。
ただし、スマホではそのままでは動かない（後述）。
muted（ミュート再生）
muted
音を消した状態で再生。
loop（ループ再生）
loop
再生が終わると自動で最初から再生。
preload（事前読み込みの設定）
preload="auto"
| 値 | 意味 |
|---|---|
| none | 読み込まない |
| metadata | 長さ・形式のみ読み込む |
| auto | なるべく読み込む（推奨） |
複数形式を指定する <source> の書き方
ブラウザによって再生できる形式が違うため、複数の音声形式を並べることが推奨されています。
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
お使いのブラウザは audioタグに対応していません。
</audio>
よく使う音声形式
| 形式 | 拡張子 | 対応ブラウザ |
|---|---|---|
| MP3 | .mp3 | ほぼ全ブラウザ対応 |
| OGG | .ogg | Chrome・Firefox |
| WAV | .wav | 一般再生可能（容量が大きい） |
自動再生に関する注意（スマホ対応）
スマホ（特に iPhone）では音つき autoplay は動かない
理由：ユーザーの意図しない音声再生を防ぐため。
自動再生したい場合は以下が必須
<audio src="sound.mp3" autoplay muted></audio>
→ 無音（muted）なら自動再生できる
→ 音声をONにするにはユーザー操作が必要
実践サンプルコード
最も基本的なaudioプレイヤー
<audio src="sound.mp3" controls></audio>
複数形式に対応する場合
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
</audio>
自動再生 + ループ（BGM向け）
<audio src="bgm.mp3" autoplay muted loop></audio>
preloadを使って事前読み込みする場合
<audio src="sound.mp3" controls preload="auto"></audio>
よくあるエラーと対処法
再生ボタンが表示されない
→ controls を付け忘れている
スマホで自動再生ができない
→ autoplay + muted をセットにする
音声が読み込まれない
→ ファイルパス（URL）が間違っている
→ サーバー側の容量制限に引っかかっている
WAVファイルが重すぎて再生に時間がかかる
→ MP3の使用を推奨
audio と video の違い
| タグ | 用途 | 特徴 |
|---|---|---|
| audio | 音声専用 | プレイヤーが小さく、軽い |
| video | 動画 | 画像＋音声、容量が大きい |
両方 HTML5 のメディアタグですが、用途は明確に異なります。
まとめ
- audioタグで音声を直接ブラウザ再生できる
- controls はほぼ必須
- autoplay を使うときは muted が必要（スマホ対応）
- 複数形式を
<source>で指定できる - MP3形式が最も互換性が高い
- エラーが起きたら controls・muted・ファイルパスを確認する
著者からのひと言
audioタグは、動画よりも軽量で扱いやすく、BGMや効果音の再生にも最適です。まずは簡単なファイルを用意して、実際に再生プレイヤーを表示させてみると理解が深まります！
次回の記事は「canvasとは？HTMLで描画できる仕組み」です。
この記事が役に立ったら、いいね！お願いします！
