HTMLオーディオ

HTML でサウンドを再生する方法はたくさんあります。

問題、問題、解決策

HTML でオーディオを再生するのは簡単ではありません。

オーディオ ファイルをすべてのブラウザ (Internet Explorer、Chrome、Firefox、Safari、Opera) およびすべてのハードウェア (PC、Mac、iPad、iPhone) で確実に再生するには、習得する必要があるテクニックがいくつかあります。

この章では、W3CStudy が問題と解決策を要約します。

プラグインの使用

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

プラグインは、音楽の再生、地図の表示、銀行口座の確認、入力の制御など、さまざまな目的に使用できます。

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

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

<embed> 要素の使用

<embed> タグは、外部 (非 HTML) コンテンツのコンテナを定義します。 (これは HTML5 タグであり、HTML4 では違法ですが、すべてのブラウザーでは有効です)。

次のコード スニペットは、Web ページに埋め込まれた MP3 ファイルを表示します。

例

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

自分で試してみてください

问题：

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

注: 検証の問題を解決するには、<DOCTYPE html> (HTML5) を使用してください。

<object> 要素の使用

<object tag> タグは、外部 (非 HTML) コンテンツのコンテナを定義することもできます。

次のコード スニペットは、Web ページに埋め込まれた MP3 ファイルを表示します。

例

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

自分で試してみてください

質問:

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

HTML5 <audio> 要素の使用

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

例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

自分で試してみてください

上の例では、Internet Explorer、Chrome、Safari で動作するように mp3 ファイルを使用しています。

このオーディオを Firefox と Opera の両方で動作させるために、ogg タイプのファイルが追加されました。 失敗した場合は、エラー メッセージが表示されます。

質問:

• <audio> タグは HTML 4 では無効です。 ページは HTML 4 検証に失敗します。
• オーディオ ファイルを別の形式に変換する必要があります。
• <audio> 要素は古いブラウザでは機能しません。

注: 検証の問題を解決するには、<DOCTYPE html> (HTML5) を使用してください。

最良の 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>

自分で試してみてください

上記の例では、2 つの異なるオーディオ形式を使用しています。 HTML5 の <audio> 要素は、オーディオを mp3 または ogg として再生しようとします。 それが失敗した場合、コードはフォールバックして <embed> 要素を試行します。

質問:

• オーディオを別の形式に変換する必要があります。
• <audio> 要素は、HTML 4 および XHTML の検証に失敗します。
• <embed> 要素は、HTML 4 および XHTML の検証に失敗します。
• <embed> 要素は、フォールバックしてエラー メッセージを表示することはできません。

注: 検証の問題を解決するには、<DOCTYPE html> (HTML5) を使用してください。

Web サイトに音声を追加する最も簡単な方法

Web ページに音声を追加する最も簡単な方法は何ですか?

Yahoo のメディア プレーヤーは間違いなくその 1 つです。

Yahoo Media Player を使用することは、別のアプローチです。 Yahoo に曲の再生を任せるだけです。

mp3 やその他のさまざまな形式を再生できます。 単純なコード行を Web ページに追加するだけで、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 Media Player は、完全なプレーヤーではなく、小さな再生ボタンをユーザーに提供します。 ただし、ボタンをクリックすると、完全なプレーヤーがポップアップ表示されます。

このプレーヤーは常にウィンドウ フレームの下部にドッキングされることに注意してください。 タップするだけでスライドして外れます。

ハイパーリンクの使用

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

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

例

<a href="song.mp3">Play the sound</a>

自分で試してみてください

インラインサウンド

Web ページ内または Web ページの一部としてサウンドを含める場合、それはインライン サウンドと呼ばれます。

Web アプリケーションでインライン サウンドを使用する予定がある場合は、多くの人がインライン サウンドを煩わしく感じていることを認識する必要があります。 また、ユーザーがブラウザでインライン サウンド オプションをオフにしている可能性があることにも注意してください。

私たちの最善のアドバイスは、ユーザーが聞くことを期待するサウンドをインラインにのみ含めることです。 良い例としては、ユーザーが録音を聞くためにリンクをクリックすると、ページが開き、録音が再生される場合が挙げられます。

HTML 4.01 マルチメディア タグ

HTML 5 マルチメディア タグ