」のコードを追加するだけで音楽を追加できます。 embed タグはさまざまなマルチメディアを挿入するために使用でき、形式は Midi、Wav、AIFF、AU、MP3 などです。"/> 」のコードを追加するだけで音楽を追加できます。 embed タグはさまざまなマルチメディアを挿入するために使用でき、形式は Midi、Wav、AIFF、AU、MP3 などです。">

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLに音楽mp3を追加する方法

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

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-06-04 13:38:0920016ブラウズ

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

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

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

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

文法:

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的39000f942b2545a5315c57fa3276f220方案。现在我们来总结一下兼容性:

Codecs/container

IE

Firefox

Safari

Chrome

Opera

iPhone

Android

Theora+Vorbis+Ogg

·

3.5+

 

5.0+

10.5+

·

·

H.264+AAC+MP4

9.0+

·

3.0+

5.0+‡

·

3.0+

2.0+

WebM

9.0+*

4.0+

 

6.0+

10.6+

·

2.3+

* IE9 “只有当用户安装了VP8的编解码器时”才能支持VP8。

‡ Google Chrome 2011年宣布 放弃H.264, 但是“还没兑现”。

可以看出现在主流的仍然是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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。