<audio>: AUDIO 要素

最終更新：2026-10-13

<audio>AUDIO 要素

音声プレイヤーを埋め込みます。互換性を高めるため、複数の形式の source と組み合わせることが多いです。

カテゴリ	リンクとメディア
コンテンツモデル	埋め込みコンテンツ
許可される親要素	フローコンテンツを受け入れる要素
閉じタグ	必要 `</audio>` タグ
ステータス	標準

📝 構文

<audio controls>音声コンテンツ</audio>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`src`		Audio file URL (for a single source; use source for multiple).
`controls`		Shows play/pause, volume and other controls.
`autoplay`		Starts playing on load (usually needs muted).
`loop`		Replays from the start when finished.
`muted`		Starts muted by default.
`preload`		Preload hint: none/metadata/auto.

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<audio>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： controls を付けると再生UIが表示されます。autoplay は通常 muted と併用しないと動作しません（ブラウザーの制限）。

❓ よくある質問

Qaudio で複数の形式に自動対応するには？

A複数の <source> を置きます。ブラウザは順に調べて、最初に再生できるものを選びます：<source src='a.ogg'><source src='a.mp3'>。少なくとも mp3（最も対応が広い）と ogg/opus（オープンな形式）を用意し、どれも再生できない場合はタグ内のフォールバック文字を表示します。

Qaudio の autoplay が効かないことが多いのはなぜですか？

Aブラウザには自動再生ポリシーがあります。音が出るメディアは、ユーザーが先にページと相互作用していないと再生が阻止されます。有効な対策は、ミュート状態での自動再生（autoplay muted）なら必ず通るのでそちらにするか、最初の操作イベントを待ってから audio.play() を呼ぶことです。

Qaudio タグの中には何を書けますか？

Asource の子要素とフォールバック内容です：<audio controls><source src='a.mp3'>お使いのブラウザは音声の再生に対応していません。</audio>。フォールバックの文字は audio 非対応の環境でのみ表示され、現代のブラウザではほぼ見られませんが、残しておくのは良い習慣です。