ほんっとにはじめてのHTML5とCSS3:<audio>サンプル

<audio>で音声ファイルを組み込む

*この音声ファイルは「音の素材集 - ©OVER RISE」のCD-ROMから使用しています。 *この音声の著作権は、OVER RISEにあります。

audio要素だけで、音声ファイルを組み込む

<audio>要素だけで音声ファイル(MP3ファイル(.mp3))を組み込んでいます。
MP3をサポートしないブラウザ(Firefox, Opera)では再生できません。(Firefox ver.26 は対応しています)

<audio src="audio/sample.mp3" controls preload="auto">
<p>このブラウザは音声再生に対応していません</p>
</audio>
<!--中に入れたテキストは audio要素に対応していない古いブラウザ用です-->

source要素で、複数のファイルを組み込む

<audio>要素内に<source>要素で各ブラウザが対応する形式の音声ファイルを複数指定しています。
ブラウザは上から順に試み、サポートする形式をロードするとそれ以降は無視します。
<source>要素で指定する場合、<audio>要素にsrc属性は不可です。

<audio controls preload="auto">
  <source src="audio/sample.mp3" type="audio/mpeg">
  <source src="audio/sample.wav" type="audio/wav">
  <p>このブラウザは音声再生に対応していません</p>
</audio>

embed要素を代替コンテンツとして入れておく

<audio>要素内に<embed>要素を代替コンテンツとして入れています。
これで<audio>要素に対応していない古いバージョンのブラウザでも、プラグインによる再生ができます。
(IE8などで、上の2つのサンプルは無理でも、ここだけ音声が再生できます。)
<audio>要素に対応したブラウザでは、<embed>は無視されます。

<audio controls preload="auto">
  <source src="audio/sample.mp3" type="audio/mpeg">
  <source src="audio/sample.wav" type="audio/wav">
  <embed src="audio/sample.wav" type="audio/wav" width="240" height="50" autostart="false" 
  controller="true" loop="false"  pluginspage="http://www.apple.com/jp/quicktime/download/">
</audio>
inserted by FC2 system