音声
audio source
HTML5 ネイティブの音声再生要素。複数の source でフォーマットフォールバックが可能。ブラウザが対応している最初のフォーマットを使用する。
audio 属性一覧デモ
audio demo track
0:120:30
🔊
controls
ブラウザ標準のUIコントロール（再生・一時停止・音量・シークバー）を表示する。
autoplay
ページ読み込み時に自動再生。ブラウザポリシーでブロックされる場合がある。
muted
音声をミュートにする。autoplay と組み合わせるとブロックを回避しやすい。
loop
音声を繰り返し再生する。BGM や効果音のループに使用。
preload
none / metadata / auto。読み込み戦略を制御する。
src
音声ファイルのURL。source 要素を使う場合は省略する。
コード例
<!-- 基本的な audio（複数フォーマット対応）-->
<audio controls preload="metadata">
<source src="/audio/track.mp3" type="audio/mpeg" />
<source src="/audio/track.ogg" type="audio/ogg" />
<source src="/audio/track.wav" type="audio/wav" />
<p>お使いのブラウザは audio 要素に対応していません。</p>
</audio>
<!-- BGM（自動再生・ループ・ミュート）-->
<audio autoplay muted loop preload="auto">
<source src="/audio/bgm.mp3" type="audio/mpeg" />
<source src="/audio/bgm.ogg" type="audio/ogg" />
</audio>
<!-- データ節約：再生ボタンを押すまで読み込まない -->
<audio controls preload="none">
<source src="/audio/podcast.mp3" type="audio/mpeg" />
</audio>比較：preload 値のトレードオフ
| 値 | 読み込む内容 | 帯域消費 | 再生開始速度 | 適した用途 |
|---|---|---|---|---|
| none | 何も読み込まない | 最小 | 遅い（再生時に開始） | ポッドキャスト・長尺コンテンツ |
| metadata | 長さ・タイプのみ | 少量 | やや遅い | 時間表示が必要なプレーヤー |
| auto | ファイル全体 | 大きい | 即座 | 短いSE・必ず再生されるBGM |
デフォルト値はブラウザ依存。モバイルブラウザは帯域節約のため none に近い挙動をとることが多い。
複数 source によるフォーマットフォールバック
ブラウザは source を上から順に試し、最初に対応したフォーマットを使用する。
MP3audio/mpeg全主要ブラウザ
OGG Vorbisaudio/oggFirefox, Chrome, Edge
WAVaudio/wav全主要ブラウザ（ファイルサイズ大）
AACaudio/aacSafari, Chrome, Edge
WebM Opusaudio/webm;codecs=opusChrome, Firefox, Edge
<!-- 推奨順：対応ブラウザが広い順に記述 -->
<audio controls preload="metadata">
<source src="/audio/sound.mp3" type="audio/mpeg" />
<source src="/audio/sound.ogg" type="audio/ogg" />
<source src="/audio/sound.wav" type="audio/wav" />
</audio>比較：audio vs video（音声を扱う場合）
| 要素 | 映像トラック | デフォルト表示 | poster 属性 | 適した用途 |
|---|---|---|---|---|
| audio | なし | コントロールバーのみ | 非対応 | 音楽・ポッドキャスト・SE |
| video | あり | 映像 + コントロール | 対応 | 音声付き動画・ビジュアルポッドキャスト |
音声のみのコンテンツには audio を使う。video に音声ファイルを指定することも技術的に可能だが、意味論的に正しくない。
Tips
- MP3 を最初の source に：最も広くサポートされているフォーマット。OGG を続けることで Firefox の最適化も得られる。
- autoplay の制限：モダンブラウザはユーザーインタラクションなしの自動再生をブロックする。音声付きの autoplay はほぼ不可能。
- preload="none" を基本に：モバイルユーザーの帯域を節約するため、再生されない可能性がある音声は
preload="none"を指定する。 - フォールバックテキスト：
audioタグ内にフォールバックテキストや代替リンクを記述しておくと古いブラウザでも機能する。 - JavaScript API：
HTMLAudioElementAPI でplay()・pause()・currentTimeなどを操作できる。カスタムプレーヤー構築時に使用。
🤖 AIプロンプトテンプレート
以下の要件を満たす、`<audio>` 要素を使った音声プレイヤーのHTML・CSSサンプルを作成してください。 - `controls` 属性付きの基本的な音声プレイヤーを実装すること - `<source>` を使って MP3・OGG の複数フォーマットに対応すること - `preload="none"` を基本とし、帯域節約の考え方を示すこと - フォールバックテキストを `<audio>` タグ内に記述すること - ループ再生（`loop`）やミュート（`muted`）の使用例も含めること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。