上一章節(jié)，我們剛剛講了<video>標(biāo)簽，今晚，我們講的是<audio>標(biāo)簽，這兩個(gè)東東除了表示的內(nèi)容不一樣以外，其他的特性相似的地方真的太多了，屬性和用法幾乎一樣，也就說，如果上一章節(jié)你理解了，那么這一節(jié)你學(xué)起來會(huì)：毫無壓力。

<audio>簡介

<audio>標(biāo)簽：用于在文檔中表示音頻內(nèi)容。利用它，你可以在你的個(gè)人網(wǎng)站上放一首你喜歡的歌。

? ?<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>

?

( 大家都叫我：IE8 )

?

為了方便我們對(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)整控制面板的音量。

JavaScript控制音頻

JavaScript可以通過video對(duì)象控制網(wǎng)頁視頻；同樣可以audio對(duì)象操作網(wǎng)頁音頻。

首先我們通過getElementById(ID)方法獲取到一個(gè)audio對(duì)象。假設(shè)id為“music“。

?

? ?<audio id="music" src="m.mp3"></audio>

? ?let m = document.getElementById('music');

?

控制加載：

? ?m.load();//加載

如果你的<audio>標(biāo)簽是手動(dòng)生成的節(jié)點(diǎn)，可以用load方法來實(shí)現(xiàn)加載。

?

控制播放：

? ?m.play();//播放

調(diào)用play( )方法可以執(zhí)行播放。

?

控制暫停：

? ?m.pause();//暫停

調(diào)用pause( )方法可以執(zhí)行暫停播放。

?

指定播放時(shí)間：

? ?m.fastSeek(20);

這樣的話，音頻會(huì)定位到20秒的播放位置。不過目前只有Firefox瀏覽器支持，你可以通過currentTime屬性來實(shí)現(xiàn)。

?

獲取和設(shè)置已播放的時(shí)間

? ?m.currentTime

通過currentTime屬性，你可以拿到當(dāng)前音頻播放了多久，返回的數(shù)字以( s )秒為單位。

? ?m.currentTime = 10;

你也可以給它賦值，這樣，音頻會(huì)定位到10秒的播放位置。

?

是否自動(dòng)播放：

? ?m.autoplay = true;//自動(dòng)播放

可以直接在<audio>標(biāo)簽上加上autoplay屬性，也可以通過JavaScript來設(shè)置autoplay屬性。它是一個(gè)布爾值，true代表自動(dòng)播放，false代表非自動(dòng)播放。

?

是否循環(huán)播放：

? ?m.loop = true;//循環(huán)播放

可以直接在<audio>標(biāo)簽上加上loop屬性，也可以通過JavaScript來設(shè)置loop屬性。它也是一個(gè)布爾值，true代表循環(huán)播放，false代表單曲播放。

?

是否顯示控制面板：

? ?m.controls = true;//顯示控制面板

可以直接在<audio>標(biāo)簽上加上controls屬性，也可以通過JavaScript來設(shè)置controls屬性。它也是一個(gè)布爾值，true代表顯示控制面板，false代表隱藏控制面板。

?

是否靜音：

? ?m.muted = true;//靜音

可以直接在<audio>標(biāo)簽上加上muted屬性，也可以通過JavaScript來設(shè)置muted屬性。它也是一個(gè)布爾值，true代表靜音，false代表有聲音。

?

是否暫停：

? ?m.paused? //是否暫停

判斷音頻當(dāng)前是否暫停，返回true代表暫停，返回false代表正在播放；默認(rèn)是true；該值只能讀取，不能修改。

?

調(diào)用play( )方法后，m.paused的值會(huì)變成false；調(diào)用pause( )方法后，m.paused的值會(huì)變成true。

?

調(diào)節(jié)音量：

? ?m.volume = 0.1;

音量的取值范圍在：0（無聲）~1（最大聲）之間。可以對(duì)volume屬性賦合理的值或者做一些運(yùn)算，來改變音頻的音量。

以上就是<audio>標(biāo)簽很常用也很實(shí)用的一些屬性和方法了。只要掌握了這些知識(shí)點(diǎn)，你就可以實(shí)現(xiàn)一個(gè)自己的音樂播放器。當(dāng)然，<audio>標(biāo)簽還有其他屬性，我不在這里展開， 學(xué)習(xí)的階段只要掌握以上這些就夠了，有興趣的同學(xué)可以自行去網(wǎng)上搜索

本節(jié)收獲

掌握了<audio>標(biāo)簽的屬性

舊版瀏覽器不支持<audio>標(biāo)簽的處理方式

用JavaScript操作audio對(duì)象來控制音頻

結(jié)合以上的知識(shí)點(diǎn)，實(shí)現(xiàn)一個(gè)屬于自己的HTML5 音樂播放器。功能：播放/暫停、靜音、調(diào)節(jié)音量、調(diào)節(jié)播放進(jìn)度、切換歌曲、單曲模式/循環(huán)模式。

總結(jié)

以上是生活随笔為你收集整理的第六节：用audio标签打造一个属于自己的HTML5音乐播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。