webページに音声を挿入
HTML5では音声再生をサポートしているので、音声ファイルの挿入が簡単に行えます。
このページでは、HTML5で新たに追加された要素「audio」を使った動画の埋め込みを紹介します。
新要素「audio」で動画を挿入
最も基本的な形式で書くと以下のようになります。
index.html
<audio src="sample.mp3" controls></video>
| <audio src="○○"> | 音声ファイルを挿入する ○○には音声ファイルのアドレスを入力 controlsは、再生ボタンやシークバーをつけるためのもの |
|---|
以下のように、タグの間に入力した内容は、HTML5非対応で音声を挿入できなかった場合に表示されます。
index.html
<audio src="sample.mp3" controls> <p>お使いのブラウザはHTML5非対応です。</p> </audio>
ブラウザによって再生できない音声の形式がある
HTML5にさえ対応しているブラウザであれば、音声の挿入は可能ですが、実際に再生しようと思ってもできない場合があります。
できるだけ多くのブラウザで再生するには、複数の形式の音声ファイルを用意して、以下のように候補を設定しましょう。
index.html
<audio controls> <source src="sample.mp3" type="audio/mp3"> <source src="sample.ogg" type="audio/ogg"> <p>お使いのブラウザはHTML5非対応です。</p> </audio>