HTML要素 ・ メディア
<audio>
音声を埋め込む
ページに音声ファイルを埋め込んで再生する要素です。controls 属性を付けると、再生ボタンなどの操作パネルが表示されます。
01
サンプルコード
HTML
1<audio controls>
2 <source src="sound.mp3" type="audio/mpeg">
3 お使いのブラウザは音声の再生に対応していません。
4</audio>
02
実行結果
ブラウザでの表示サンプルの音声ファイルはないため、操作パネルだけが表示されます
03
解説
audio は、音声ファイルを再生するための要素です。controls を付けないと何も表示されないため、通常は必ず付けます。
source を複数書くと、ブラウザが再生できる形式を上から順に選びます。MP3 はほぼすべてのブラウザで再生できます。
操作パネルの見た目はブラウザによって異なります。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
controls | 操作パネルを表示する |
autoplay | 自動再生（多くのブラウザで制限あり） |
loop | 繰り返し再生する |
muted | 音を消した状態にする |
preload | 事前に読み込む量（none / metadata / auto） |
読み込みを最小限にする
preload="none" にすると、再生ボタンを押すまで音声を読み込みません。
HTML
1<audio controls preload="none" src="podcast-01.mp3"></audio>
注意点
- 01自動再生は利用者を驚かせるため避けましょう。
- 02ポッドキャストなど話し声の音声には、文字起こしを添えると内容が伝わりやすくなります。