HTMLオーディオ

HTML オーディオ (オーディオ)

サウンドは HTML でさまざまな方法で再生できます。

問題と解決策

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

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

この章では、PHP 中国語 Web サイト (php.cn) に問題と解決策がまとめられています。

プラグインの使用

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

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

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

<embed> 要素

次のコードスニペットは、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 検証に失敗します。
ブラウザーが異なれば、オーディオ形式のサポートも異なります。
ブラウザがそのファイル形式をサポートしていない場合、プラグインなしでは音声を再生できません。
ユーザーのコンピュータにプラグインがインストールされていない場合、音声を再生することはできません。
このファイルを他の形式に変換しても、依然としてすべてのブラウザで再生できるわけではありません。

次のコードスニペットは、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 をローカルオーディオに置き換えて試してください

問題:

オーディオを別の形式に変換する必要があります。

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> および <音声>)

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転