HTML形式の音声(オーディオ)
HTMLでのサウンドは、さまざまな方法で再生することができます。
問題点とその解決法
HTMLでオーディオを再生することは容易ではありません!
あなたはすべてのブラウザ(Internet ExplorerやChromeのは、Firefox、Safariの、オペラ座)で、そのオーディオファイルを確実にするために、おなじみのヒントの多くを必要とし、すべてのハードウェア(PC、マック、アプリ、iPhoneは)再生することができます。
この章では、W3CSchoolあなたは、問題と解決策をまとめます。
プラグインの使用
ブラウザのプラグインは、標準のブラウザの拡張機能である小型コンピュータ・プログラムを提供しています。
プラグインは、<object>タグまたはページに追加し、<embed>タグを使用することができます。
これらのラベルは、タイプに応じて、彼らはまた、外部プラグインによって表示されているブラウザで表示されるリソース(典型的には、非HTMLリソース)コンテナを定義します。
<EMBED>要素を使用して、
<embed>タグは、コンテナ外部(非HTML)コンテンツを定義します。 (これはHTML4で、HTML5タグは違法ですが、すべてのブラウザが有効です)。
次のコードは、Webページに埋め込まれたMP3ファイルを表示することができます。
問題:
- HTML 4の<embed>タグは無効です。 ページはHTML 4によって検証することはできません。
- 別のブラウザはのためのさまざまなオーディオフォーマットをサポートしています。
- ブラウザがファイル形式をサポートしていない場合は、プラグインは、あなたはオーディオを再生することはできません。
- ユーザーのコンピュータがプラグインされていない場合はインストールすると、オーディオを再生することはできません。
- ファイルを他の形式に変換されている場合は、まだすべてのブラウザで再生することはできません。
<オブジェクト>要素を使用します
<Objectタグ>タグは、コンテナ(非HTML)コンテンツの外で定義することができます。
次のコードは、Webページに埋め込まれたMP3ファイルを表示することができます。
問題:
- 別のブラウザはのためのさまざまなオーディオフォーマットをサポートしています。
- ブラウザがファイル形式をサポートしていない場合は、プラグインは、あなたはオーディオを再生することはできません。
- ユーザーのコンピュータがプラグインされていない場合はインストールすると、オーディオを再生することはできません。
- ファイルを他の形式に変換されている場合は、まだすべてのブラウザで再生することはできません。
HTML5の<audio>要素を使用します
HTML5は、<オーディオ>要素は、HTML 4でのHTML5の要素は違法ですが、すべてのブラウザで有効です。
<オーディオ>要素は、すべての最新ブラウザで動作します。
我々はMP3ファイルを記述するための<audio>タグを使用します以下にする(Internet Explorer、ChromeとSafariが効果的である)、また、OGGファイルの種類(FirefoxやOperaのブラウザに有効)を追加しました。それが失敗した場合、それはエラーが表示されますテキスト:
例
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
»をお試しください
問題:
- HTML 4の<オーディオ>タグが無効です。 あなたのページはHTML 4によって検証することはできません。
- あなたは、オーディオファイルを別の形式に変換する必要があります。
- <オーディオ>要素は、古いブラウザでは動作しません。
ベストHTMLソリューション
次の例では、2つの異なるオーディオフォーマットを使用しています。 HTML5の<audio>要素は、mp3やオーディオにoggのを再生しようとします。 これが失敗した場合、コードは、<embed>要素をロールバックしようとします。
例
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
»をお試しください
問題:
- あなたは別のオーディオ形式に変換する必要があります。
- <EMBED>要素には、エラーメッセージを表示するようにロールバックすることはできません。
Yahooのメディアプレーヤー - あなたのサイトにオーディオを追加する簡単な方法
ヤフーを使用して、プレーヤーは無料です。 それを使用するには、ページの下部に、このJavaScriptを配置する必要があります:
Yahooのプレーヤーは、MP3や他のさまざまな形式を再生することができます。 あなただけが簡単にプロのプレイリストにあなたのHTMLページを作ることができ、自分のページやブログにコードの1行を追加する必要があります。
例
<script src="http://mediaplayer.yahoo.com/latest"></script>
»をお試しください
あなたがそれを使用したい場合は、ページの下部に、このJavaScriptを配置する必要があります:
そして、単にHTMLであなたのMP3ファイルへのリンクを入れて、JavaScriptは自動的に各曲の再生ボタンを作成します。
<aソング1 </a>に再生href="song1.mp3">
<aソング2 </a>に再生href="song2.wav">
...
...
ユーザーのためのYahooのメディアプレーヤーは、小さな再生ボタンの代わりに、完全なプレーヤーです。 このボタンをクリックしたときただし、完全なプレーヤーをポップアップ表示されます。
この選手は常に窓枠の下部にドッキングされますのでご注意ください。 ちょうどあなたがそれをスライドさせることができる、それをクリックします。
ハイパーリンクを使用して
ページがメディアファイルを指すハイパーリンクが含まれている場合は、ほとんどのブラウザでは、ファイルを再生するには、「ヘルパーアプリケーション」を使用します。
次のコードは、mp3ファイルへのリンクを示しています。 ユーザーがリンクをクリックすると、ブラウザがファイルを再生するには、「ヘルパーアプリケーション」を起動します:
説明音インライン
あなたは、Webページ内のサウンド含める場合、またはWebページの一部として、それはインライン音と呼ばれています。
インラインは、Webアプリケーションでサウンドを使用する場合は、多くの人がインライン見つける迷惑に聞こえることを認識する必要があります。 また、ユーザーがブラウザのインラインサウンドオプションを閉じている可能性があることに注意してください。
私たちの最高のアドバイスは、ユーザーがサウンドインライン場所はそれらを含む聞きたいときのみになります。 正の例では、ユーザーが録音を聞いて、リンクをクリックする必要があるときに、ページを開いて、録音を再生することです。
HTMLマルチメディアタグ
新:HTML5新しいラベル
标签 | 描述 |
---|---|
<embed> | 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。 |
<object> | 定义内嵌对象。 |
<param> | 定义对象的参数。 |
<audio> New | 定义了声音内容 |
<video> New | 定义一个视频或者影片 |
<source> New | 定义了media元素的多媒体资源(<video> 和 <audio>) |
<track> New | 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>) |