ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLオーディオのサンプルを詳しく解説

HTMLオーディオのサンプルを詳しく解説

零下一度
リリース: 2017-05-15 13:43:56
オリジナル
1511 人が閲覧しました

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

問題と解決策

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

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

この章では、W3CSchool が問題と解決策をまとめています。

プラグインの使用

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

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

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

要素

タグを使用して、外部 (非 HTML) コンテンツのコンテナーを定義します。 (これは HTML5 タグであり、HTML4 では違法ですが、すべてのブラウザーで機能します)。

次のコード スニペットは、Web ページに埋め込まれた MP3 ファイルを表示します。

<embed height="50" width="100" src="horse.mp3">
ログイン後にコピー

問題:

タグは HTML 4 では無効です。ページは HTML 4 検証に失敗します。

ブラウザーが異なれば、オーディオ形式のサポートも異なります。

ブラウザがそのファイル形式をサポートしていない場合、プラグインなしでは音声を再生できません。

ユーザーのコンピュータにプラグインがインストールされていない場合、オーディオを再生できません。

ファイルを他の形式に変換した場合でも、すべてのブラウザで再生できるわけではありません。

要素

を使用すると、外部 (非 HTML) コンテンツのコンテナを定義することもできます。

次のコード スニペットは、Web ページに埋め込まれた MP3 ファイルを表示できます:

<object height="50" width="100" data="horse.mp3"></object>
ログイン後にコピー

問題:

ブラウザーごとにサポートされるオーディオ形式が異なります。

ブラウザがそのファイル形式をサポートしていない場合、プラグインなしでは音声を再生できません。

ユーザーのコンピュータにプラグインがインストールされていない場合、オーディオを再生できません。

ファイルを他の形式に変換した場合でも、すべてのブラウザで再生できるわけではありません。

HTML5

HTML5

以下では、

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

最好的 HTML 解决方法

下面的例子使用了两个不同的音频格式。HTML5

实例

ログイン後にコピー

问题:

您必须把音频转换为不同的格式。

元素无法回退来显示错误消息。

雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式

使用雅虎播放器是免费的。如需使用它,您需要把这段 JavaScript 插入网页底部:

雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或 博客中就可以轻松地将您的HTML页面制作成 专业的播放列表:

实例

<a href="horse.mp3">Play Sound</a>
<script src="m.sbmmt.com/latest"></script>
ログイン後にコピー

如果你要使用它,您需要把这段 JavaScript 插入网页底部:

<script src="m.sbmmt.com/latest"></script>
ログイン後にコピー

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

以上がHTMLオーディオのサンプルを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート