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>要素はHTML 4およびXHTMLで認証できません。
  • <embed>要素はHTML 4および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>

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

内線の音

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

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

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

HTML 4.01 多媒体タグ

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

HTML 5 多媒体タグ

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