Latest web development tutorials
×

HTML コース

HTML コース HTML 簡単な紹介 HTML エディタ HTML ファウンデーション HTML 要素 HTML プロパティ HTML 見出し HTML 段落 HTML テキストの書式設定 HTML リンク HTML ヘッド HTML CSS HTML 画像 HTML テーブル HTML リスト HTML ブロック HTML レイアウト HTML フォーム HTML フレーム HTML カラー HTML 色名 HTML カラー値 HTML スクリプト HTML 文字エンティティ HTML URL HTML クイックリスト HTML サマリー XHTML入門

HTML5

HTML5 コース HTML5 ブラウザのサポート HTML5 新要素 HTML5 Canvas HTML5 インライン SVG HTML5 MathML HTML5 ドラッグ・アンド・ドロップ HTML5 地理的な位置 HTML5 ビデオ(Video) HTML5 可聴周波数(Audio) HTML5 Input タイプ HTML5 フォーム要素 HTML5 フォームのプロパティ HTML5 セマンティック要素 HTML5 Web メモリ HTML5 Web SQL HTML5 アプリケーションキャッシュ HTML5 Web Workers HTML5 SSE HTML5 WebSocket HTML5 クイズ HTML(5)コードの仕様

HTML メディア

HTML メディア(Media) HTML ウィジェット HTML 可聴周波数(Audio) HTML ビデオプレーヤー(Videos) HTML 例

HTML リファレンスマニュアル

HTML タグリスト(アルファベット順に) HTML タグリスト(ソート機能) HTML プロパティ HTML イベント HTML キャンバス HTML 可聴周波数/ビデオ HTML 効果的な DOCTYPES HTML 色名 HTML カラーピッカー HTML 文字セット HTML ASCII HTML ISO-8859-1 HTML シンボル HTML URL コーディング HTML 言語コード HTTP ニュース HTTP ウェイ キーボードショートカット

HTML形式の音声(オーディオ)

HTMLでのサウンドは、さまざまな方法で再生することができます。


問題点とその解決法

HTMLでオーディオを再生することは容易ではありません!

あなたはすべてのブラウザ(Internet ExplorerやChromeのは、Firefox、Safariの、オペラ座)で、そのオーディオファイルを確実にするために、おなじみのヒントの多くを必要とし、すべてのハードウェア(PC、マック、アプリ、iPhoneは)再生することができます。

この章では、W3CSchoolあなたは、問題と解決策をまとめます。


プラグインの使用

ブラウザのプラグインは、標準のブラウザの拡張機能である小型コンピュータ・プログラムを提供しています。

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

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


<EMBED>要素を使用して、

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

次のコードは、Webページに埋め込まれたMP3ファイルを表示することができます。

<embed height="50" width="100" src="horse.mp3">

»をお試しください

問題:

  • HTML 4の<embed>タグは無効です。 ページはHTML 4によって検証することはできません。
  • 別のブラウザはのためのさまざまなオーディオフォーマットをサポートしています。
  • ブラウザがファイル形式をサポートしていない場合は、プラグインは、あなたはオーディオを再生することはできません。
  • ユーザーのコンピュータがプラグインされていない場合はインストールすると、オーディオを再生することはできません。
  • ファイルを他の形式に変換されている場合は、まだすべてのブラウザで再生することはできません。

<オブジェクト>要素を使用します

<Objectタグ>タグは、コンテナ(非HTML)コンテンツの外で定義することができます。

次のコードは、Webページに埋め込まれたMP3ファイルを表示することができます。

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

»をお試しください

問題:

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

HTML5の<audio>要素を使用します

HTML5は、<オーディオ>要素は、HTML 4でのHTML5の要素は違法ですが、すべてのブラウザで有効です。

<オーディオ>要素は、すべての最新ブラウザで動作します。

我々はMP3ファイルを記述するための<audio>タグを使用します以下にする(Internet Explorer、ChromeとSafariが効果的である)、また、OGGファイルの種類(FirefoxやOperaのブラウザに有効)を追加しました。それが失敗した場合、それはエラーが表示されますテキスト:

<audio controls>
<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>要素をロールバックしようとします。

<audio controls height="100" width="100">
<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行を追加する必要があります。

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

»をお試しください

あなたがそれを使用したい場合は、ページの下部に、このJavaScriptを配置する必要があります:

<script src="http://mediaplayer.yahoo.com/latest"></script>

そして、単にHTMLであなたのMP3ファイルへのリンクを入れて、JavaScriptは自動的に各曲の再生ボタンを作成します。

<aソング1 </a>に再生href="song1.mp3">
<aソング2 </a>に再生href="song2.wav">
...
...

ユーザーのためのYahooのメディアプレーヤーは、小さな再生ボタンの代わりに、完全なプレーヤーです。 このボタンをクリックしたときただし、完全なプレーヤーをポップアップ表示されます。

この選手は常に窓枠の下部にドッキングされますのでご注意ください。 ちょうどあなたがそれをスライドさせることができる、それをクリックします。


ハイパーリンクを使用して

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

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

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

»をお試しください


説明音インライン

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

インラインは、Webアプリケーションでサウンドを使用する場合は、多くの人がインライン見つける迷惑に聞こえることを認識する必要があります。 また、ユーザーがブラウザのインラインサウンドオプションを閉じている可能性があることに注意してください。

私たちの最高のアドバイスは、ユーザーがサウンドインライン場所はそれらを含む聞きたいときのみになります。 正の例では、ユーザーが録音を聞いて、リンクをクリックする必要があるときに、ページを開いて、録音を再生することです。


HTMLマルチメディアタグ

新:HTML5新しいラベル

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)