您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關html如何添加音樂mp3的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
在html中,可以使用embed標簽添加音樂,只需要在body區域內添加“<embed src="需要添加的音樂所在地址">”代碼即可。embed標簽可以用來插入各種多媒體,格式可以是 Midi、Wav、AIFF、AU、MP3等等。
本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
可以使用embed標簽添加音樂,<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的<video>方案。現在我們來總結一下兼容性:
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='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>
瀏覽器會根據自己的偏好來選擇具體加載那種格式的流媒體文件,當然服務端必須對同一個視頻提供多種格式的支持,具體可以這么做:
提供一個WebM的視頻版本(VP8+Vorbis)
提供一個MP4的視頻版本(H.264+AAC(low complexity))
提供Ogg版本(Theora+Vorbis)
服務端推薦使用nginx,盡量注意MIME類型的配置正確
感謝各位的閱讀!關于“html如何添加音樂mp3”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。