HTML 基本チュートリアル

HTML メディア

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

HTML5 基本チュートリアル

HTML5 API

HTML5 メディア

HTML ビデオ（Video）再生 HTML プラグイン

HTML オーディオ（Audio）

HTMLで音はさまざまな方法で再生できます。

問題および解決策

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

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

この章では、基本的なチュートリアルで問題と解決策をまとめました。

プラグインを使用して

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

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

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

<embed>要素を使用して

以下のコードスニペットは、ウェブページに埋め込まれたMP3 ファイル：

オンラインの例

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<object　height="50"　width="100"　data="/run/html/horse.mp3></object>
<p>オーディオを聞くことができない場合、あなたのコンピュータやブラウザがファイル形式をサポートしていない可能性があります。</p>
<p>またはスピーカーをオンにしていない可能性があります。</p>
</body>
</html>

テストを見てみましょう ‹/›

問題:

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

<object>要素を使用して

以下のコードスニペットは、ウェブページに埋め込まれたMP3 ファイル：

オンラインの例

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<object　height="50"　width="100"　data="/run/html/horse.mp3></object>
<p>オーディオを聞くことができない場合、あなたのコンピュータやブラウザがファイル形式をサポートしていない可能性があります。</p>
<p>またはスピーカーをオンにしていない可能性があります。</p>
</body>
</html>

テストを見てみましょう ‹/›

問題:

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

を使用して5 <audio>要素

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

<audio>要素　すべての現代のブラウザで動作します。

ブラウザの互換性

の数字は、この属性をサポートする最初のブラウザのバージョン番号を示しています。

要素	Chrome	IE	Firefox	Safari	Opera
<audio>	4.0	9.0	3.5	4.0	10.5

以下では<audio>タグを使用してMP3 ファイル（Internet Explorer、ChromeおよびSafariでは有効です）と、同様にOGG形式のファイルも追加しました（FirefoxおよびOperaブラウザで有効です）。失敗すると、エラーメッセージが表示されます：

オンラインの例

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<audio　controls>
　　<source　src="/run/html/horse.mp3"　type="audio/mpeg">
　　<source　src="/run/html/horse.ogg"　type="audio/ogg">
　　あなたのブラウザはこのオーディオ形式をサポートしていません。
</audio>
</body>
</html>

テストを見てみましょう ‹/›

問題:

タグがHTML 4 中は無効です。あなたのページはHTML 4 確認してください。
オーディオファイルを異なる形式に変換する必要があります。
<audio>要素は古いブラウザでは機能しません。

最も良いHTMLの解決策

以下の例では、2つの異なるオーディオ形式を使用しています。HTML5 <audio>要素はmpで再生を試みます。3 またはoggでオーディオを再生します。失敗した場合、コードは<embed>要素を試みます。

オンラインの例

例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
</head>
<body>
<audio　controls>
　　<source　src="/run/html/horse.mp3"　type="audio/mpeg">
　　<source　src="/run/html/horse.ogg"　type="audio/ogg">
　　<embed　height="50"　width="100"　src="/run/html/horse.mp3">
</audio>
</body>
</html>

テストを見てみましょう ‹/›

問題:

オーディオを別の形式に変換する必要があります。
<embed>要素はエラーメッセージを表示するためのバックアップができません。

リンクを使用

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

以下のコードスニペットは、mpへのリンクを示しています3 ファイルのリンクです。ユーザーがこのリンクをクリックすると、ブラウザが「サブプログラム」を起動してファイルを再生します：

オンラインの例

例

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

テストを見てみましょう ‹/›

内蔵の音声の説明

ウェブページに音声を含めたり、ウェブページの一部として音声を使用する場合、それを内蔵音声と呼びます。

ウェブアプリケーションで内蔵音声を使用する場合、多くの人が内蔵音声がイライラすることに気づく必要があります。また、ユーザーがブラウザの内蔵音声オプションを既にオフにしている可能性がありますので、ご注意ください。

ユーザーが内蔵音声を希望する場所にのみ含めることをお勧めします。良い例として、ユーザーが録音を聞く必要があり、リンクをクリックするとページが開き録音が再生される場合があります。

HTMLマルチメディアタグ

New : 　HTML5 新しいタグ

タグ	説明
<embed>	内蔵オブジェクトを定義。HTML4 推奨されません、HTML5 許可されています。
<object>	内蔵オブジェクトを定義
<param>	オブジェクトのパラメータを定義
<audio>HTML5	音声コンテンツを定義
<video>HTML5	ビデオまたは映画を定義
<source>HTML5	media要素のマルチメディアリソース（<video>および<audio>）を定義
<track>HTML5	media要素の字幕ファイルやテキストを含む他のファイルを指定します（<video>および<audio>）

HTML ビデオ（Video）再生 HTML プラグイン