HTML オーディオ (オーディオ)
サウンドは HTML でさまざまな方法で再生できます。
問題と解決策
HTML でオーディオを再生するのは簡単ではありません。
オーディオ ファイルをすべてのブラウザ (Internet Explorer、Chrome、Firefox、Safari、Opera) およびすべてのハードウェア (PC、Mac、iPad、iPhone) で確実に再生するには、多くのコツを知る必要があります。
この章では、PHP 中国語 Web サイト (php.cn) に問題と解決策がまとめられています。
プラグインの使用
ブラウザプラグインは、ブラウザの標準機能を拡張する小さなコンピュータプログラムです。
プラグインは、<object> タグまたは <embed> タグを使用してページに追加できます。
これらのタグは、タイプに応じて、表示されるリソース (通常は HTML 以外のリソース) のコンテナーを定義します。ブラウザまたは外部プラグイン表示による。
<embed> 要素
<embed> を使用して、外部 (非 HTML) コンテンツのコンテナーを定義します。 (これは HTML5 タグであり、HTML4 では違法ですが、すべてのブラウザーでは有効です)。
次のコード スニペットは、Web ページに埋め込まれた MP3 ファイルを表示できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<embed height="50" width="100" src="horse.mp3">
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</embed>
</body>
</html>
ローカルで MP3 形式のオーディオを見つけ、src="horse.mp3" を MP3 ファイルに置き換えて、Web ページを開いて試してみます
問題:
- <embed> タグは HTML 4 では無効です。ページは HTML 4 検証に失敗します。
- ブラウザーが異なれば、オーディオ形式のサポートも異なります。
- ブラウザがそのファイル形式をサポートしていない場合、プラグインなしでは音声を再生できません。
- ユーザーのコンピュータにプラグインがインストールされていない場合、音声を再生することはできません。
- このファイルを他の形式に変換しても、依然としてすべてのブラウザで再生できるわけではありません。
<object> 要素を使用します
<object タグ> タグは、外部 (非 HTML) コンテンツのコンテナを定義することもできます。
次のコード スニペットは、Web ページに埋め込まれた MP3 ファイルを表示できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<object height="100" width="300" data="Kalimba.mp3"></object>
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</body>
</html>
ローカルで MP3 形式のオーディオを検索し、src="horse.mp3" を MP3 ファイルに置き換えて、Web ページを開いて試してください
質問:
ブラウザーが異なれば、オーディオ形式のサポートも異なります。
ブラウザがそのファイル形式をサポートしていない場合、プラグインなしでは音声を再生できません。
ユーザーのコンピュータにプラグインがインストールされていない場合、音声を再生することはできません。
このファイルを他の形式に変換しても、依然としてすべてのブラウザで再生できるわけではありません。
HTML5 <audio> 要素の使用
HTML5 <audio> 要素は HTML 4 では無効ですが、すべてのブラウザーで機能します。
<audio> 要素は最新のすべてのブラウザで動作します。
以下では、<audio> タグを使用して MP3 ファイルを記述し (Internet Explorer、Chrome、Safari で有効)、OGG タイプのファイルも追加します。 (Firefox および Opera ブラウザーで有効) 失敗すると、エラー テキスト メッセージが表示されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
您的浏览器不支持该音频格式。
</audio>
</body>
</html>
ブラウザーがオーディオ形式をサポートしていない場合は、「お使いのブラウザーはこのオーディオ形式をサポートしていません」というフレーズが出力されます。それ以外の場合
問題:
- <audio> タグは HTML 4 では無効です。ページは HTML 4 検証に失敗します。
- オーディオファイルを別の形式に変換する必要があります。
- <audio> 要素は古いブラウザでは機能しません。
最高の HTML ソリューション
以下の例では、2 つの異なるオーディオ形式を使用しています。 HTML5 の <audio> 要素は、オーディオを mp3 または ogg として再生しようとします。それが失敗した場合、コードは <embed> 要素の試行に戻ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
</body>
</html>
src をローカルオーディオに置き換えて試してください
問題:
オーディオを別の形式に変換する必要があります。
<embed> 要素は、エラー メッセージを表示するためにフォールバックすることはできません。
Yahoo Media Player - Web サイトにオーディオを追加する簡単な方法
Yahoo Media Player は、完全なプレーヤーではなく小さな再生ボタンをユーザーに提供します。ただし、ボタンをクリックすると、完全なプレーヤーがポップアップ表示されます。
このプレーヤーは常にウィンドウ フレームの下部にドッキングされていることに注意してください。クリックしてスライドさせるだけです。
Yahoo プレーヤーの使用は無料です。これを使用するには、Web ページの下部に次の JavaScript を挿入する必要があります:
Yahoo Player は MP3 やその他のさまざまな形式を再生できます。コード行をページまたはブログに追加するだけで、HTML ページをプロ仕様のプレイリストに簡単に変えることができます:
<script src="http://mediaplayer.yahoo.com/latest"></script>
例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p><a href="Kalimba.mp3">Play mp3</a></p>
<script src="http://mediaplayer.yahoo.com/latest"></script>
</body>
</html>
音声ファイルを見つけて試してください
ハイパーリンクを使用する
Web ページにメディア ファイルへのハイパーリンクが含まれている場合、ほとんどのブラウザはファイルを再生するために「ヘルパー アプリケーション」を使用します。
次のコード スニペットは、mp3 ファイルへのリンクを表示します。ユーザーがリンクをクリックすると、ブラウザはファイルを再生するための「ヘルパー アプリケーション」を起動します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>链接到一首歌</h2>
<p><a href="nverq.mp3">点击此处播放</a></p>
</body>
</html>
オーディオ ファイルを見つけて試してください
インライン サウンドの説明
Web にサウンドを含める場合ページ 、または Web ページの一部として含まれる場合は、インライン サウンドと呼ばれます。
Web アプリケーションでインライン サウンドを使用する予定がある場合は、多くの人がインライン サウンドを煩わしいと感じることに注意する必要があります。また、ユーザーがブラウザのインライン サウンド オプションをオフにしている可能性があることにも注意してください。
私たちの最善のアドバイスは、ユーザーが聞くことが期待されるインライン サウンドのみを含めることです。良い例としては、ユーザーが録音を聞く必要があり、リンクをクリックするとページが開き、録音が再生される場合があります。
HTML マルチメディアタグ
HTML5 新しいタグ
| タグ | 説明 |
| <embed> | 埋め込みオブジェクトを定義します。 HTML4 では非推奨ですが、HTML5 では許可されています。 |
| <object> | 埋め込みオブジェクトを定義します。 |
| <param> | オブジェクトのパラメータを定義します。 |
| <audio> | はサウンドコンテンツを定義します |
| <video> | はビデオまたはビデオを定義します |
| ソース < | のマルチメディア リソースを定義します。メディア要素 (<video> および <audio>) |
<track> | メディア要素の字幕ファイル、またはテキストを含む他のファイル (<video> および <音声>) |
次のセクション