HTMLに音楽mp3を追加する方法

HTMLではembedタグを使用して、本文部分に「」というコードを追加するだけで音楽を追加できます。 embed タグはさまざまなマルチメディアを挿入するために使用でき、形式は Midi、Wav、AIFF、AU、MP3 などです。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

embed タグを使用して音楽を追加できます。 タグは、プラグインなどの埋め込みコンテンツを定義します。

文法:

embed src=url

説明: embed を使用してさまざまなマルチメディアを挿入できます。形式は Midi、Wav、AIFF、AU、MP3 などにすることができます。Netscape と新しいバージョンの IE がサポートされています。それ。 URL はオーディオ ファイルまたはビデオ ファイルとそのパスであり、相対パスまたは絶対パスを使用できます。

例:

コードは次のとおりです:

<embed src="your.mid">

2. 属性設定

1. 自動再生:

構文: autostart =true 、 false

説明: この属性は、ダウンロード後にオーディオ ファイルまたはビデオ ファイルを自動的に再生するかどうかを指定します。

• true: 音楽ファイルはダウンロード後に自動的に再生されます;

• false: 音楽ファイルはダウンロード後に自動的に再生されません。

例:

コードは次のとおりです:

<embed src="your.mid" autostart=true>
<embed src="your.mid" autostart=false>

2. ループ再生:

構文:loop=positive integer 、true、false

説明: この属性は、オーディオ ファイルまたはビデオ ファイルをループするかどうか、およびループの数を指定します。

属性値が正の整数値の場合、オーディオ ファイルまたはビデオ ファイルのループ数は正の整数値と同じになります。

属性値が true の場合、オーディオ ファイルまたはビデオ ファイルのループ数は正の整数値と同じになります。またはビデオ ファイルのループ;

属性値が false の場合、オーディオ ファイルまたはビデオ ファイルはループしません。

例:

コードは次のとおりです:

<embed src="your.mid" autostart=true loop=2>
 <embed src="your.mid" autostart=true loop=true>
 <embed src="your.mid" autostart=true loop=false>

3. パネル表示:

構文: hidden=ture, no

説明: この属性は、コントロール パネルを表示するかどうかを指定します。デフォルト値は no です。

• いいえ: パネルを非表示にします;

• いいえ: パネルを表示します。

例:

コードは次のとおりです:

<embed src="your.mid" hidden=ture>
 <embed src="your.mid" hidden=no>

4. 開始時刻:

構文: starttime=mm: ss (分: 秒)

説明: この属性は、オーディオまたはビデオ ファイルの再生を開始する時間を指定します。定義されていない場合は、ファイルの先頭から再生します。

例:

コードは次のとおりです:

<embed src="your.mid" starttime="00:10">

5. ボリューム サイズ:

構文: volume=0 ～ 100 の整数

説明: この属性は、オーディオ ファイルまたはビデオ ファイルの音量を指定します。定義されていない場合は、システム独自の設定が使用されます。

例:

コードは次のとおりです:

<embed src="your.mid" volume="10">

6. コンテナ属性:

構文: height=# width=

# 説明 : 値は正の整数またはパーセンテージで、単位はピクセルです。このプロパティは、コントロール パネルの高さと幅を指定します。

height：控制面板的高度；
 width：控制面板的宽度。

例:

コードは次のとおりです:

<embed src="your.mid" height=200 width=200>

7. コンテナ単位:

構文: 単位=ピクセル、en

説明 : この属性は、高さと幅の単位をピクセルまたは en として指定します。

例:

コードは次のとおりです:

<embed src="your.mid" units="pixels" height=200 width=200>
 <embed src="your.mid" units="en" height=200 width=200>

8. 外観設定:

構文:controls=console、smallconsole、playbutton、pausebutton、停止ボタン、ボリュームレバー 説明: このプロパティは、コントロール パネルの外観を指定します。デフォルト値はコンソールです。

• コンソール: 通常のパネル;

• smallconsole: 小さいパネル;

• 再生ボタン:再生ボタンのみ表示;

• 一時停止ボタン: 一時停止ボタンのみ表示;

• 停止ボタン: 停止ボタンのみ表示;

• 音量レバー: 音量調整ボタンのみが表示されます。

例:

コードは次のとおりです:

<embed src="your.mid" controls=smallconsole>
 <embed src="your.mid" controls=volumelever>

9. 説明テキスト:

構文: title =

# 説明: # は説明のテキストです。この属性は、オーディオまたはビデオ ファイルの説明テキストを指定します。

例:

コードは次のとおりです:

<embed src="your.mid" title="第一首歌">

詳細情報:

WebM アドボカシー

AVC (H.264) の認証の問題により、Chrome、Firefox、Opera が主導するオープン ソース キャンプは AVC のサポートに迷い始めました。これらのブラウザは引き続き AVC をサポートできますが、オープンなブラウザも好みます。 WebM プロジェクトと呼ばれるソース マルチメディアには、VP8 と呼ばれる新しいオープン ソース ビデオ コーデック スキームが含まれています。現在、VP8 は VP9 に発展しています。カプセル化された形式としての WebM には、.webm 接尾辞と video/webm MIME タイプが付いています。オーディオの場合は、Vorbis/Opus を使用できます。互換性の観点から見ると、Chrome、Firefox、Opera は VP8 との互換性が非常に高いですが、Safari と IE はほとんどサポートできません。

オープン ソースの Ogg

Ogg は WebM とほぼ同じオープン ソースであり、オープン ソース プラットフォームで広くサポートされています。そのビデオ エンコード スキームは Theora (Xiph.org Foundation によって開発された VP3 から開発され、任意のパッケージ形式で使用できます) と呼ばれ、オーディオは Vorbis です。通常、サフィックスは .ogv または .ogg で、MIME タイプは video/ogg です。互換性の点では、Chrome、Firefox、Opera はサポートできますが (ただし、Opera はモバイル プラットフォームではサポートできません)、Safari と IE はほとんどサポートできません。

Html5方案

以上的讨论实际上的大前提是：视频基于Html5的

可以看出现在主流的仍然是MP4(AVC)，但是为了解决“开源阵营”对AVC的摇摆不定，可以选择利用video的多源方案，在AVC的基础上额外提供对webm或ogg的支持：

<video poster="movie.jpg" controls>
        <source src="movie.webm" type=&#39;video/webm; codecs="vp8.0, vorbis"&#39;>
        <source src="movie.ogg" type=&#39;video/ogg; codecs="theora, vorbis"&#39;>
        <source src="movie.mp4" type=&#39;video/mp4; codecs="avc1.4D401E, mp4a.40.2"&#39;>
        <p>This is fallback content</p>
</video>

浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件，当然服务端必须对同一个视频提供多种格式的支持，具体可以这么做：

1. 提供一个WebM的视频版本（VP8+Vorbis）

2. 提供一个MP4的视频版本（H.264+AAC(low complexity)）

3. 提供Ogg版本（Theora+Vorbis）

服务端推荐使用nginx，尽量注意MIME类型的配置正确

推荐学习：html视频教程

以上がHTMLに音楽mp3を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。