Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
<audio>
『audio』はHTMLに音声を埋め込むための要素で、BGMや効果音・ポッドキャストなどをブラウザ上で再生できます。
構文
<!-- 基本的な音声の埋め込み --> <audio src="sound.mp3" controls></audio> <!-- 複数のフォーマットを指定してフォールバック対応 --> <audio controls> <source src="sound.ogg" type="audio/ogg"> <source src="sound.mp3" type="audio/mpeg"> <p>お使いのブラウザは音声の再生に対応していません。</p> </audio>
主な属性
| 属性 | 概要 |
|---|---|
| src | 再生する音声ファイルのURLを指定します。 |
| controls | 再生・停止・音量・シークバーなどのコントロールパネルを表示します。 |
| autoplay | ページ読み込み時に自動再生します。ブラウザによっては制限される場合があります。 |
| loop | 音声が終了したら最初から繰り返し再生します。 |
| muted | 音声をミュートして再生します。 |
| preload | 音声データの事前読み込み方法を指定します(none / metadata / auto)。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>audioサンプル</title>
</head>
<body>
<p>BGMプレイヤー</p>
<!-- コントロール付きで音声を再生 -->
<audio controls>
<!-- OGGを優先し、非対応なら MP3 を使用 -->
<source src="bgm.ogg" type="audio/ogg">
<source src="bgm.mp3" type="audio/mpeg">
<p>お使いのブラウザは音声の再生に対応していません。</p>
</audio>
<p>ループ再生のサンプル</p>
<!-- ループ再生する音声 -->
<audio src="ambient.mp3" controls loop></audio>
</body>
</html>
実行結果
ページ上に音声コントロールパネルが表示され、再生・停止・音量調節・シーク操作ができます。
┌──────────────────────────────────────┐ │ ▶ 0:00 ────────────────── 🔊 │ └──────────────────────────────────────┘
概要
『audio』要素はHTML5で導入された要素で、Flashなどのプラグインなしにブラウザで音声を再生できます。MP3(audio/mpeg)は現在ほぼすべてのブラウザでサポートされています。OGGはオープンフォーマットでMP3より音質が良い場合もありますが、Safariでの対応が限られるため、複数の『source』要素で両フォーマットを指定しておくと安全です。
『autoplay』を指定しても、多くのブラウザではユーザーの操作なしに音声付きの自動再生はブロックされます。ユーザー体験を損なわないよう、自動再生は慎重に使用してください。BGMのような用途では、ユーザーが再生ボタンを押す『controls』付きの実装を推奨します。
動画ファイルを埋め込みたい場合は『video』要素を使用してください。
対応ブラウザ
デスクトップ
2 以前 ×
2.5 以前 ×
3 以前 ×
8 以前 ×
10 以前 ×モバイル
Android Browser
37 以降 ○
2 以前 ×
Chrome Android
36 以降 ○
17 以前 ×
Firefox Android
79 以降 ○
3 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。