音声を再生するには？
audioタグの書式
audioタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
audioタグの属性一覧
| 属性 | 内容 |
| グローバル属性 | ※グローバル属性のページを参照してください。 |
| src | 再生する音声ファイルのパスを指定します。 |
| preload | ページロード時に、音声データをあらかじめ読み込むかどうかの指定をします。
指定できる値は次の通りです。
「none」：なし
「metadata」：メタデータのみ読み込む
「auto」：自動
なお、値にブランクを指定（preload=""）した場合、「auto」と同様と見なされます。 |
| autoplay | 音声データ読み込み後に自動再生を行うように指定します。
この属性を有効にするには
「autoplay」
「autoplay="autoplay"」
「autoplay=""」
のいずれかを指定します。 |
| mediagroup | グループ名を指定します。複数のメディアを連携させるときに使います。 |
| loop | ループ（繰り返し）再生を行うように指定します。
この属性を有効にするには
「loop」
「loop="loop"」
「loop=""」
のいずれかを指定します。 |
| muted | ミュート（消音）再生を行うように指定します。
この属性を有効にするには
「muted」
「muted="muted"」
「muted=""」
のいずれかを指定します。 |
| controls | 音声再生用のコントロールが表示されるように指定します。
この属性を有効にするには
「controls」
「controls="controls"」
「controls=""」
のいずれかを指定します。 |
audioタグの解説
<audio>は、音声を再生するための要素です。
この要素を使用することで、プラグインを使用することなく、音声データの再生を行うことができます。
「controls」属性を指定することで、一時停止/再生などの操作を行うコントロールを表示させることも可能です。
再生する音声ファイルは「src」属性で指定可能ですが、複数指定する場合は<source>要素を使用して指定してください。
<audio>～</audio>の中には、<audio>をサポートしていないブラウザで表示するメッセージ（代替コンテンツ）を入れることができます。
なお現在のところ、ブラウザによって再生可能な音声ファイルのフォーマットが異なるので注意してください。
1種類の音声を、より多くのブラウザに対応させたい場合は、<source>要素で複数のフォーマットの音声ファイルを指定して対応してください。
audioタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
<style type="text/css">
.sample {
font-size: 1.2em;
color: gray;
margin: 2px;
}
</style>
</head>
<body>
<header>
<h1>ミュージック再生</h1>
</header>
<section>
<h1 class="sample">ミュージック1</h1>
<audio controls autoplay loop preload="auto">
<source src="music1.mp3" type="audio/mp3" media="all">
<source src="music1.wav" type="audio/wav" media="all">
<source src="music1.ogg" type="audio/ogg" media="all">
<p>このブラウザでは音声を再生できません。</p>
</audio>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
audioタグのサンプル画面1
audioタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
<style type="text/css">
.sample{
font-size: 1.2em;
color: gray;
margin: 2px;
}
</style>
</head>
<body>
<header>
<h1>Music</h1>
</header>
<section>
<h1>マイ ミュージック</h1>
<section>
<h1 class="sample">ミュージック1</h1>
<audio controls preload="metadata" mediagroup="favorite">
<source src="music1.mp3" type="audio/mp3" media="all">
<source src="music1.wav" type="audio/wav" media="all">
<source src="music1.ogg" type="audio/ogg" media="all">
<p>このブラウザでは音声を再生できません。</p>
</audio>
</section>
<section>
<h1 class="sample">ミュージック2</h1>
<audio controls preload="metadata" mediagroup="favorite">
<source src="music2.mp3" type="audio/mp3" media="all">
<source src="music2.wav" type="audio/wav" media="all">
<source src="music2.ogg" type="audio/ogg" media="all">
<p>このブラウザでは音声を再生できません。</p>
</audio>
</section>
</section>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
audioタグのサンプル画面2
audioタグの関連項目
