html5用“<audio>”標記播放音樂。audio標簽用于在網(wǎng)頁文檔中表示音頻內(nèi)容,利用該標簽,開發(fā)者可以在網(wǎng)站上插入一個音樂播放控件;語法“ <audio src="音頻文件地址"></audio>”。
本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。
html5用“<audio>”標記播放音樂。
<audio>標簽:用于在文檔中表示音頻內(nèi)容。利用它,你可以在你的個人網(wǎng)站上插入一個音樂播放器,放一首你喜歡的歌。
<audio src="music.mp3"></audio>
用法很簡單,跟<video>標簽一樣,屬性src指定音頻文件地址。
如果你僅僅這樣寫,頁面上不會看到有明顯的東西,<audio>標簽默認是隱藏的。
對于不支持<audio>標簽的瀏覽器,會把標簽的文本內(nèi)容顯示出來。
<audio src="music.mp3"> 別試了,是你的瀏覽器渣渣 </audio>
為了方便我們對音頻文件進行控制,操作它的進度、播放暫停、音量等等,我們可以給它添加controls屬性:
<audio src="m.mp3" controls></audio>
用法跟<video>標簽一樣。對于加上了controls屬性, 不同的瀏覽器會展示不同樣式的控制面板。
( chrome瀏覽器的音頻控制面板 )
( firefox瀏覽器的音頻控制面板 )
( IE瀏覽器的音頻控制面板 )
哪個好看就見仁見智了~~
跟<video>標簽一樣,<audio>標簽也有一個字標簽:<source>。
它們的作用和用法都一樣,就是用來引入多個音頻,瀏覽器會選擇一個支持的音頻格式進行加載,對于不支持<audio>標簽的瀏覽器,<source>元素也可以作為瀏覽器不識別的內(nèi)容加入到文檔中。
<audio> <source src="music.mp3"> <source src="music.ogg"> <source src="music.wav"> </audio>
注:主流的音頻文件格式有:mp3、wav、ogg。不同的瀏覽器對三種格式支持程度不一樣。其中mp3格式支持度最好。
autoplay屬性:加載完成后,自動播放。也非常簡單、使用。
<audio src="m.mp3" autoplay></audio>
loop屬性:顧名思義,循環(huán)播放。
<audio src="m.mp3" loop></audio>
preload屬性:用來控制音頻在什么時候進行加載。
<audio src="m.mp3" preload="auto"></audio>
對應的值有3種:
-
none:默認不加載,等有需要的時候再加載。
-
metadata:元數(shù)據(jù),默認不加載,但是可以提取該音頻的元數(shù)據(jù)信息。
-
auto:自動加載,網(wǎng)頁加載完就加載整個音頻。
muted屬性:靜音效果。
<audio src="m.mp3" muted></audio>
加了muted屬性,音頻即使在播放的時候,也是沒有聲音,除非用戶手動調整控制面板的音量。