本篇內(nèi)容主要講解“html5標(biāo)記播放音樂的方法是什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html5標(biāo)記播放音樂的方法是什么”吧!
創(chuàng)新互聯(lián)公司是專業(yè)的吳起網(wǎng)站建設(shè)公司,吳起接單;提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行吳起網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
html5用“<audio>”標(biāo)記播放音樂。audio標(biāo)簽用于在網(wǎng)頁文檔中表示音頻內(nèi)容,利用該標(biāo)簽,開發(fā)者可以在網(wǎng)站上插入一個(gè)音樂播放控件;語法“ <audio src="音頻文件地址"></audio>”。
本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。
html5用“<audio>”標(biāo)記播放音樂。
<audio>標(biāo)簽:用于在文檔中表示音頻內(nèi)容。利用它,你可以在你的個(gè)人網(wǎng)站上插入一個(gè)音樂播放器,放一首你喜歡的歌。
<audio src="music.mp3"></audio>
用法很簡單,跟<video>標(biāo)簽一樣,屬性src指定音頻文件地址。
如果你僅僅這樣寫,頁面上不會(huì)看到有明顯的東西,<audio>標(biāo)簽?zāi)J(rèn)是隱藏的。
對(duì)于不支持<audio>標(biāo)簽的瀏覽器,會(huì)把標(biāo)簽的文本內(nèi)容顯示出來。
<audio src="music.mp3"> 別試了,是你的瀏覽器渣渣 </audio>
為了方便我們對(duì)音頻文件進(jìn)行控制,操作它的進(jìn)度、播放暫停、音量等等,我們可以給它添加controls屬性:
<audio src="m.mp3" controls></audio>
用法跟<video>標(biāo)簽一樣。對(duì)于加上了controls屬性, 不同的瀏覽器會(huì)展示不同樣式的控制面板。
( chrome瀏覽器的音頻控制面板 )
( firefox瀏覽器的音頻控制面板 )
( IE瀏覽器的音頻控制面板 )
哪個(gè)好看就見仁見智了~~
跟<video>標(biāo)簽一樣,<audio>標(biāo)簽也有一個(gè)字標(biāo)簽:<source>。
它們的作用和用法都一樣,就是用來引入多個(gè)音頻,瀏覽器會(huì)選擇一個(gè)支持的音頻格式進(jìn)行加載,對(duì)于不支持<audio>標(biāo)簽的瀏覽器,<source>元素也可以作為瀏覽器不識(shí)別的內(nèi)容加入到文檔中。
<audio> <source src="music.mp3"> <source src="music.ogg"> <source src="music.wav"> </audio>
注:主流的音頻文件格式有:mp3、wav、ogg。不同的瀏覽器對(duì)三種格式支持程度不一樣。其中mp3格式支持度最好。
autoplay屬性:加載完成后,自動(dòng)播放。也非常簡單、使用。
<audio src="m.mp3" autoplay></audio>
loop屬性:顧名思義,循環(huán)播放。
<audio src="m.mp3" loop></audio>
preload屬性:用來控制音頻在什么時(shí)候進(jìn)行加載。
<audio src="m.mp3" preload="auto"></audio>
對(duì)應(yīng)的值有3種:
none:默認(rèn)不加載,等有需要的時(shí)候再加載。
metadata:元數(shù)據(jù),默認(rèn)不加載,但是可以提取該音頻的元數(shù)據(jù)信息。
auto:自動(dòng)加載,網(wǎng)頁加載完就加載整個(gè)音頻。
muted屬性:靜音效果。
<audio src="m.mp3" muted></audio>
加了muted屬性,音頻即使在播放的時(shí)候,也是沒有聲音,除非用戶手動(dòng)調(diào)整控制面板的音量。
到此,相信大家對(duì)“html5標(biāo)記播放音樂的方法是什么”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
分享名稱:html5標(biāo)記播放音樂的方法是什么
文章位置:http://aaarwkj.com/article26/pegccg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、自適應(yīng)網(wǎng)站、網(wǎng)站制作、Google、網(wǎng)站策劃、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)