html如何添加音樂(lè)mp3

這篇文章給大家分享的是有關(guān)html如何添加音樂(lè)mp3的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

在html中，可以使用embed標(biāo)簽添加音樂(lè)，只需要在body區(qū)域內(nèi)添加“<embed src="需要添加的音樂(lè)所在地址">”代碼即可。embed標(biāo)簽可以用來(lái)插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

可以使用embed標(biāo)簽添加音樂(lè)，<embed> 標(biāo)簽定義嵌入的內(nèi)容，比如插件。

語(yǔ)法：

embed src=url

說(shuō)明：embed可以用來(lái)插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url為音頻或視頻文件及其路徑，可以是相對(duì)路徑或絕對(duì)路徑。

示例:

代碼如下:

<embed src="your.mid">

二、屬性設(shè)置

1、自動(dòng)播放：

語(yǔ)法：autostart=true、false

說(shuō)明：該屬性規(guī)定音頻或視頻文件是否在下載完之后就自動(dòng)播放。

• true：音樂(lè)文件在下載完之后自動(dòng)播放；

• false：音樂(lè)文件在下載完之后不自動(dòng)播放。

示例：

代碼如下:

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

2、循環(huán)播放：

語(yǔ)法：loop=正整數(shù)、true、false

說(shuō)明：該屬性規(guī)定音頻或視頻文件是否循環(huán)及循環(huán)次數(shù)。

屬性值為正整數(shù)值時(shí)，音頻或視頻文件的循環(huán)次數(shù)與正整數(shù)值相同；

屬性值為true時(shí)，音頻或視頻文件循環(huán)；

屬性值為false時(shí)，音頻或視頻文件不循環(huán)。

示例：

代碼如下:

<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、面板顯示：

語(yǔ)法：hidden=ture、no

說(shuō)明：該屬性規(guī)定控制面板是否顯示，默認(rèn)值為no。

• ture：隱藏面板；

• no：顯示面板。

示例：

代碼如下:

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

4、開(kāi)始時(shí)間：

語(yǔ)法：starttime=mm:ss（分：秒）

說(shuō)明：該屬性規(guī)定音頻或視頻文件開(kāi)始播放的時(shí)間。未定義則從文件開(kāi)頭播放。

示例：

代碼如下:

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

5、音量大?。?/p>

語(yǔ)法：volume=0-100之間的整數(shù)

說(shuō)明：該屬性規(guī)定音頻或視頻文件的音量大小。未定義則使用系統(tǒng)本身的設(shè)定。

示例：

代碼如下:

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

6、容器屬性：

語(yǔ)法：height=# width=#

說(shuō)明：取值為正整數(shù)或百分?jǐn)?shù)，單位為像素。該屬性規(guī)定控制面板的高度和寬度。

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

示例：

代碼如下:

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

7、容器單位：

語(yǔ)法：units=pixels、en

說(shuō)明：該屬性指定高和寬的單位為pixels或en。

示例：

代碼如下:

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

8、外觀設(shè)置：

語(yǔ)法：controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever 說(shuō)明：該屬性規(guī)定控制面板的外觀。默認(rèn)值是console。

• console：一般正常面板；

• smallconsole：較小的面板；

• playbutton：只顯示播放按鈕；

• pausebutton：只顯示暫停按鈕；

• stopbutton：只顯示停止按鈕；

• volumelever：只顯示音量調(diào)節(jié)按鈕。

示例：

代碼如下:

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

9、說(shuō)明文字：

語(yǔ)法：title=#

說(shuō)明：#為說(shuō)明的文字。該屬性規(guī)定音頻或視頻文件的說(shuō)明文字。

示例：

代碼如下:

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

擴(kuò)展資料：

WebM的倡導(dǎo)

由于AVC(H.264)的授權(quán)問(wèn)題，以Chrome、Firefox、Opera為首的開(kāi)源陣營(yíng)開(kāi)始動(dòng)搖對(duì)AVC的支持，盡管目前這些瀏覽器仍然能夠支持AVC，但是它們也傾向于一個(gè)叫做WebM的開(kāi)源多媒體項(xiàng)目，該項(xiàng)目包括一個(gè)叫VP8的新的開(kāi)源視頻編解碼方案。目前VP8已經(jīng)發(fā)展到了VP9。作為封裝格式的WebM具有.webm的后綴和video/webm的MIME類型。在音頻方面，可以使用Vorbis/Opus。從兼容性看，Chrome、Firefox、Opera對(duì)VP8的兼容性相當(dāng)理想，但是Safari和IE幾乎無(wú)法支持。

開(kāi)源的Ogg

Ogg幾乎與WebM相同，開(kāi)源，被廣泛的在開(kāi)源平臺(tái)支持。其視頻編碼方案稱為Theora(有VP3發(fā)展而來(lái)，由Xiph.org基金會(huì)開(kāi)發(fā)，可被用于任何封裝格式)，音頻為Vorbis。后綴通常為.ogv或.ogg，MIME類型為video/ogg。在兼容性上，Chrome、Firefox、Opera能夠支持（但是Opera在移動(dòng)平臺(tái)上無(wú)法支持），但是Safari和IE幾乎無(wú)法支持。

Html5方案

以上的討論實(shí)際上的大前提是：視頻基于Html5的<video>方案?，F(xiàn)在我們來(lái)總結(jié)一下兼容性：

可以看出現(xiàn)在主流的仍然是MP4(AVC)，但是為了解決“開(kāi)源陣營(yíng)”對(duì)AVC的搖擺不定，可以選擇利用video的多源方案，在AVC的基礎(chǔ)上額外提供對(duì)webm或ogg的支持：

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

瀏覽器會(huì)根據(jù)自己的偏好來(lái)選擇具體加載那種格式的流媒體文件，當(dāng)然服務(wù)端必須對(duì)同一個(gè)視頻提供多種格式的支持，具體可以這么做：

1. 提供一個(gè)WebM的視頻版本（VP8+Vorbis）

2. 提供一個(gè)MP4的視頻版本（H.264+AAC(low complexity)）

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

服務(wù)端推薦使用nginx，盡量注意MIME類型的配置正確

感謝各位的閱讀！關(guān)于“html如何添加音樂(lè)mp3”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！