HTML オーディオ

HTMLで音声を再生する方法は多くあります。

問題、問題、そして解決策

HTMLでオーディオを再生することは簡単ではありません！

多くの技術を熟知する必要があります。これにより、あなたのオーディオファイルがすべてのブラウザ（Internet Explorer、Chrome、Firefox、Safari、Opera）およびすべてのハードウェア（PC、Mac、iPad、iPhone）で再生できるようになります。

この章では、CodeW3C.comが問題と解決策をまとめました。

プラグインを使用する

ブラウザプラグインは、ブラウザの標準機能を拡張する小さなコンピュータプログラムです。

プラグインには多くの用途があります：音楽の再生、地図の表示、銀行口座の確認、入力の制御などです。

<object>や<embed>タグを使用して、プラグインをHTMLページに追加できます。

これらのタグはリソース（通常非HTMLリソース）のコンテナを定義します。タイプに応じて、ブラウザまたは外部プラグインによって表示されます。

<embed>要素を使用する

<embed>タグは外部（HTML以外）のコンテンツのコンテナを定義します。（これはHTML5タグですが、HTML4では無効ですが、すべてのブラウザで有効です）。

以下のコードスニペットは、ウェブページに埋め込まれたMP3ファイルを表示するために使用できます：

例

<embed height="100" width="100" src="song.mp3" />

実際に試してみてください

質問：

  • <embed>タグはHTML4では無効です。ページはHTML4の検証を通過できません。
  • 異なるブラウザはオーディオ形式のサポートが異なります。
  • ブラウザがファイル形式をサポートしていない場合、プラグインが無いとオーディオを再生することができません。
  • ユーザーのコンピュータにプラグインがインストールされていない場合、オーディオを再生することができません。
  • このファイルを他の形式に変換しても、すべてのブラウザで再生できない場合があります。

注記：HTML5の<!DOCTYPE html>を使用してバリデーション問題を解決します。

<object>要素を使用する

<object tag>タグも外部（HTML以外）のコンテンツのコンテナを定義できます。

以下のコードスニペットは、ウェブページに埋め込まれたMP3ファイルを表示するために使用できます：

例

<object height="100" width="100" data="song.mp3"></object>

実際に試してみてください

質問：

  • 異なるブラウザはオーディオ形式のサポートが異なります。
  • ブラウザがファイル形式をサポートしていない場合、プラグインが無いとオーディオを再生することができません。
  • ユーザーのコンピュータにプラグインがインストールされていない場合、オーディオを再生することができません。
  • このファイルを他の形式に変換しても、すべてのブラウザで再生できない場合があります。

HTML5 <audio>要素を使用する

<audio>タグはHTML5要素であり、HTML4では無効ですが、すべてのブラウザで有効です。

例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
あなたのブラウザはこのオーディオ形式をサポートしていません。
</audio>

実際に試してみてください

上の例ではmp3ファイルを使用していますので、Internet Explorer、Chrome、Safariで有効です。

このオーディオがFirefoxやOperaでも有効になるように、ogg形式のファイルを追加しました。失敗すると、エラーメッセージが表示されます。

質問：

  • <audio>タグはHTML4では無効です。あなたのページはHTML4の検証を通過できません。
  • オーディオファイルを別の形式に変換する必要があります。
  • <audio>タグは旧式ブラウザでは機能しません。

注記：HTML5の<!DOCTYPE html>を使用してバリデーション問題を解決します。

最高のHTMLソリューション

例

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

実際に試してみてください

上記の例では、異なるオーディオ形式を使用しています。HTML5の<audio>要素はmp3やoggでオーディオを再生しようと試みます。失敗した場合、コードは<embed>要素にリバウンドして試みます。

質問：

  • オーディオを異なる形式に変換する必要があります。
  • <audio>要素はHTML4およびXHTMLのバリデーションを通過できません。
  • <embed>要素はHTML4およびXHTMLのバリデーションを通過できません。
  • <embed>要素はエラーメッセージを表示するためにバックグラウンドでリバウンドできません。

注記：HTML5の<!DOCTYPE html>を使用してバリデーション問題を解決します。

ウェブサイトにオーディオを追加する最も簡単な方法

ウェブページにオーディオを追加する最も簡単な方法は何ですか？

Yahooのメディアプレイヤーはその中でも特に注目に値します。

Yahooメディアプレイヤーを使用するのは、異なる方法です。ユーザーはYahooが曲の再生を処理するのを簡単に任せることができます。

それはmp3や他の形式の音楽を再生できます。一行の簡単なコードで、ウェブページに追加し、HTMLページをプロフェッショナルなプレイリストに簡単に変換できます。

Yahooメディアプレイヤー

例

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

実際に試してみてください

Yahooプレイヤーを使用するのは無料です。それを使用するには、このJavaScriptをウェブページの下部に挿入する必要があります：

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

その後、MP3ファイルのリンクをHTMLに簡単に追加すると、JavaScriptが自動的に各曲の再生ボタンを作成します：

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

Yahooメディアプレイヤーはユーザーに小さな再生ボタンを提供しており、完全なプレイヤーではありません。しかし、ボタンをクリックすると、完全なプレイヤーが表示されます。

このプレイヤーは常にウィンドウの下部に固定されています。それをクリックすると、スライドアウトできます。

リンクを使用する

ウェブページにメディアファイルへのリンクが含まれている場合、ほとんどのブラウザは「サブアプリケーション」を使用してファイルを再生します。

以下のコードスニペットは、mp3 ファイルへのリンクを示しています。ユーザーがリンクをクリックすると、ブラウザがファイルを再生するための「サブアプリケーション」を起動します：

例

<a href="song.mp3">サウンドを再生</a>

実際に試してみてください

内線の音

ウェブページに音を含めたり、ウェブページの一部として音を含める場合、それが内線音と呼ばれます。

ウェブアプリケーションで内線音を使用する場合は、多くの人が内線音をイライラすると思っていることに注意してください。また、ユーザーがブラウザの内線音オプションをオフにしている可能性があることに注意してください。

ユーザーが内線音を聞きたいと考えている場合にのみ、それらを含めるのが最善の方法です。良い例としては、ユーザーが録音を聞くためにリンクをクリックし、ページが開かれ、録音が再生される場合があります。

HTML 4.01 マルチメディアタグ

タグ 説明
<applet> 非推奨です。内嵌 applet を定義します。
<embed> HTML4 では非推奨ですが、HTML5 では許可されています。内嵌オブジェクトを定義します。
<object> 内嵌オブジェクトを定義します。
<param> オブジェクトのパラメータを定義します。

HTML 5 マルチメディアタグ

タグ 説明
<audio> タグは、音楽や他のオーディオストリームなどの音を定義します。
<embed> タグは、プラグインなどの埋め込みコンテンツを定義します。