HTML5 Audio(音声)
HTML5 はオーディオファイルを再生するための標準を提供します。
インターネット上の音声
これまでは、ウェブページ上で音声を再生するための標準は存在しませんでした。
今日では、ほとんどの音声はプラグイン(例えば Flash)を利用して再生されています。しかし、すべてのブラウザで同じプラグインが利用できるわけではありません。
HTML5 は
ブラウザのサポート
Internet Explorer (IE) 9+、Firefox、Opera、Chrome、および Safari は
注意: Internet Explorer 8 およびそれ以前のバージョンは
HTML5 Audio - 動作の仕組み
HTML5 で音声を再生するには、以下のコードを使用する必要があります:
例:
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mpeg" />
あなたのブラウザは audio 要素をサポートしていません。
</audio>
control 属性を使用すると、再生、停止、ボリュームのコントロールを追加できます。
音声形式とブラウザサポート
現在、音声形式とブラウザサポート
ブラウザ | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | Yes | No | No |
Chrome 6+ | Yes | Yes | Yes |
Firefox 3.6+ | Yes | Yes | Yes |
Safari 5+ | Yes | Yes | No |
Opera 10+ | Yes | Yes | Yes |
音声形式のMIMEタイプ
形式 | MIMEタイプ |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
HTML5 Audio タグ
タグ | 説明 |
---|---|
<audio> | 音声コンテンツを定義します。 |
<source> | 複数のメディアリソースを指定します。<video> 及び <audio> タグの中で使用されます。 |
Q1: HTML5 オーディオタグの基本的な使用方法は?
回答: HTML5 の <audio>
タグを使用すると、ウェブページにオーディオを埋め込むことができます。基本的な使用方法は次の通りです:
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
お使いのブラウザはオーディオタグをサポートしていません。
</audio>
この例では、ユーザーに再生コントロールを提供するために controls
属性を使用し、異なるフォーマットのオーディオファイルを source
タグで指定しています。
Q2: オーディオファイルのフォーマットに関して、HTML5 で推奨されるものは?
回答: HTML5 で推奨されるオーディオフォーマットは、MP3(audio/mpeg
)、Ogg Vorbis(audio/ogg
)、および WAV(audio/wav
)です。これらのフォーマットは多くのブラウザで広くサポートされています。例えば:
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
<source src="audio-file.wav" type="audio/wav">
お使いのブラウザはオーディオタグをサポートしていません。
</audio>
Q3: HTML5 オーディオの自動再生を設定するにはどうすればよいですか?
回答: HTML5 の <audio>
タグに autoplay
属性を追加することで、オーディオファイルの自動再生を設定できます。ただし、多くのブラウザはユーザーエクスペリエンスを向上させるため、自動再生を制限する場合があります。自動再生を設定する例は次の通りです:
<audio autoplay>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
お使いのブラウザはオーディオタグをサポートしていません。
</audio>
これにより、ページが読み込まれるとすぐにオーディオが再生されます。ただし、ユーザーがページを開いたときに突然音が再生されると驚くことがあるため、慎重に使用する必要があります。