html怎麼加入音樂mp3

在html中，可以使用embed標籤新增音樂，只需要在body區域內新增「」程式碼。 embed標籤可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

可以使用embed標籤來加入音樂， 標籤定義嵌入的內容，例如外掛程式。

語法：

embed src=url

說明：embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都會支援。 url為音訊或視訊檔案及其路徑，可以是相對路徑或絕對路徑。

 範例:

 程式碼如下:

<embed src="your.mid">

二、屬性設定

 1、自動播放：

 語法：autostart=true 、false

 說明：此屬性規定音訊或視訊檔案是否在下載完後就自動播放。

•  true：音樂檔案下載完後自動播放；

• # false：音樂檔案下載完後不自動播放。

 範例：

 程式碼如下:

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

2、循環播放：

 語法：loop=正整數、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。

•  ture：隱藏面板；

•  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、容器單位：

 語法：units=pixels、en

# 說明：此屬性指定高和寬的單位為pixels或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、stopbutton、volumelever說明：此屬性規定控制面板的外觀。預設值是console。

•  console：一般正常面板；

•  smallconsole：較小的面板；

•  playbutton ：只顯示播放按鈕；

•  pausebutton：只顯示暫停按鈕;

•  stopbutton：只顯示停止按鈕；

•  volumelever：只顯示音量調整按鈕。

 範例：

 程式碼如下:

<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(有VP3發展而來，由Xiph.org基金會開發，可用於任何封裝格式)，音訊為Vorbis。後綴通常為.ogv或.ogg，MIME類型為video/ogg。在相容性上，Chrome、Firefox、Opera能夠支援（但Opera在行動平台上無法支援），但是Safari和IE幾乎無法支援。

Html5方案

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

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中文網其他相關文章！