HTML5オーディオ

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タイプ
形式 MIMEタイプ
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML5 Audio タグ

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>​

これにより、ページが読み込まれるとすぐにオーディオが再生されます。ただし、ユーザーがページを開いたときに突然音が再生されると驚くことがあるため、慎重に使用する必要があります。