文介紹HTML5 <audio>音頻元素的屬性，方法，以及事件相關的API的基本使用。

內(nèi)容有些多，完整閱讀需要點時間，但很實用，可以先馬后看。

一、audio使用基本案例

<audio controls>
 <source src="audiofile.mp3" type="audio/mpeg">
 <source src="audiofile.ogg" type="audio/ogg">
 <!-- 如果瀏覽器不支持，則會呈現(xiàn)下面內(nèi)容 -->
 <p>你的瀏覽器不支持HTML5音頻，你可以<a href="audiofile.mp3">下載</a>這個音頻文件。</p>
</audio>

上面做法是早些年HTML5 <audio>常用代碼，因為那時候IE8還是大頭，各大瀏覽器對各類音頻格式支持情況參差不齊，因此，才借助<source>元素同時引用多個不同格式的音頻文件，通過type屬性指定mime type避免重復加載情況出現(xiàn)。

但是，如今已經(jīng)不需要這么麻煩了。我們直接下面這樣就可以了：

<audio src="audiofile.mp3" controls></audio>

音頻文件常見下面3種格式，.ogg, .wav和.mp3，其中，.ogg Safari瀏覽器不支持（目前版本13），IE到Edge16都不支持；.wav則是IE-IE11不支持；但是.mp3 IE9+都支持。因此，我們?nèi)绻幌肼闊?，直接一個MP3格式就好了，由于就一種文件格式，因此type屬性也可以不用設置。

//zxx: 也可以使用MP4視頻文件，因為MP4視頻也包含ACC編碼音頻，不過就是體積大了很多，不建議這么使用。

<audio>元素IE9瀏覽器就開始支持，現(xiàn)在00后都快20歲了，也不需要為低版本瀏覽器做降級適配了。因此，簡簡單單一個<audio>元素就可以了。

二、Audio HTML屬性

下面看下<audio>元素屬性相關的一些細節(jié)。

autoplay

<audio src="audiofile.mp3" autoplay></audio>

autoplay是個布爾屬性值，表示聲音是否自動播放，默認不自動播放。然而，隨著瀏覽器的發(fā)展，這個屬性變得限制越來越多。首先在移動端，autoplay自動播放已經(jīng)被禁止了，PC端也已經(jīng)禁止，18年的時候，Chrome這么做了，然后被很多開發(fā)者抗議，后來又恢復autoplay（給大家緩沖時間），現(xiàn)在已經(jīng)Chrome又不支持自動播放了。

原因是網(wǎng)頁在沒有警告的情況下自發(fā)地發(fā)出聲音，可能會讓用戶不愉快，體驗不太好。因此，瀏覽器通常只允許在特定情況下成功地進行自動播放。

關于更深入的autoplay策略可以參見MDN上的這篇文檔。

不過根據(jù)我自己的一些實踐，資源靜音或者視頻沒有聲音情況下，autoplay偶爾也是會執(zhí)行的，不過都是偶現(xiàn)，觸發(fā)自動播放原因不詳。

loop

<audio src="audiofile.mp3" loop></audio>

loop是個布爾屬性值，表示聲音是否循環(huán)播放，默認不循環(huán)播放。loop屬性適合用在可以不斷循環(huán)的bgm背景音樂上。loop屬性在各個平臺，各個瀏覽器下的表現(xiàn)良好，大家可以放心使用。

JS設置音頻循環(huán)播放可以：

document.querySelector('audio').loop=true;

muted

示意：

<audio src="audiofile.mp3" muted></audio>

muted也是個布爾屬性值，表示音頻是否靜音，默認不靜音播放。muted屬性在各個平臺，各個瀏覽器下的表現(xiàn)良好，大家可以放心使用。

JS設置音頻靜音可以：

document.querySelector('audio').muted=true;

preload

示意：

<audio src="audiofile.mp3" preload="auto"></audio>

preload可以指定音頻的預加載策略，也就是在播放之前需要提前加載好音頻的哪些資源。支持下面3個屬性值：

1. none：表示在點擊播放按鈕之前不加載任何信息。
2. metadata: 下載音頻的meta信息，就是視頻長度，類型，還有作者（如果有）等信息。/li>
3. auto: 會嘗試下載整個音頻，如今5G都快來了，流量已經(jīng)不值錢了，因此，我個人是更推薦使用auto的，體驗更好一點。然后，通常瀏覽器自己也會優(yōu)化加載策略，不會所有音頻文件都加載下來，只是會加載一部分，保證點擊播放按鈕的時候，可以立即播放。

preload屬性在iOS Safari瀏覽器下是被禁止的（桌面端無此問題），對于一些對音頻播放時間實際要求比較高的場合，會給我們開發(fā)帶來困難。通常解決方法是，第一次觸摸的時候，音頻靜音，同時觸發(fā)音頻play()然后很快再pause()，此時，可以有類似preload的預加載行為。

不過，Safari以后可能會改變preload在移動端的加載策略，因為越往后流量越不值錢，這種自以為是的優(yōu)化反而會成為一種桎梏。

controls

示意：

<audio src="audiofile.mp3" controls></audio>

controls是個布爾屬性值，表示聲音是否顯示音頻播放暫停等控制器，默認是不顯示的。

如果沒有設置controls屬性，整個音頻文件播放面板都是完全隱藏的；如果有設置，則UI可能類似下面這張圖（Chrome PC，設置了靜音）。

不同瀏覽器，以及不同版本瀏覽器，其UI都不一樣。如果是開發(fā)to用戶側(cè)產(chǎn)品，需要自定義音頻播放器的UI，讓各個瀏覽器下長相一致，大家可以去github上找找開源的項目。

src

示意：

<audio src="audiofile.mp3"></audio>

src屬性表示音頻的文件地址。可以用在<audio>元素上，也可以用在<source>元素上。<audio>元素上只能一個音頻地址，使用<source>可以并列多個不同格式的音頻文件。

type

<audio src="audiofile.mp3" type="audio/mpeg"></audio>

type屬性用來指定音頻文件的mime type類型。雖然不加type類型，瀏覽器也能正確播放音頻文件，但通常建議加上type屬性。當然，如果src音頻格式不固定，則type屬性反而推薦不加，錯誤的type不如沒有type。

三、在JS中調(diào)用的audio屬性

<audio>元素還有一些屬性只能通過JavaScript設置，假設有HTML如下：

<audio id="myAudio" src="audiofile.mp3"></audio>

則：

currentTime

currentTime是一個可讀兼可寫的屬性，用來設置或獲取當前已經(jīng)播放的時長，單位是秒。

例如：

// 獲取音頻已經(jīng)播放時長
var playedTime=myAudio.currentTime;

如果音頻尚未開始播放，則playedTime的返回值是0。

我們也可以通過設置currentTime屬性值，讓我們的音頻定位到我們希望的時間點進行播放，例如，從5秒那里開始播放，則：

// 跳到5秒那里
myAudio.currentTime=5;

volume

volume也是一個可讀兼可寫的屬性，用來設置或獲取音頻的音量大小，范圍是0-1。

例如，設置音量50%，則：

// 設置音量50%
myAudio.volume=0.5;

如果音頻文件設置了muted為true，則myAudio.volume的返回值是0。

playbackRate

playbackRate是一個可讀兼可寫的屬性，用來設置或獲取當前媒體文件的播放速率，值為數(shù)值，例如：

// 獲取音頻播放速率
var audioSpeed=audio.playbackRate;
// 設置音頻設置播放速率為正常速度的1.5倍
audio.playbackRate=1.5;

速率范圍

根據(jù)文檔顯示，Gecko內(nèi)核瀏覽器速率范圍是0.25到5.0，超出這個范圍就靜音。

對于Chrome瀏覽器，我自己實地測試了下，速率上限居然可以到16，如下圖：

然后，此屬性兼容性不錯，IE9+都支持。

paused

paused是一個只讀屬性，表示當前音頻是否處于暫停狀態(tài)。

// true或false
console.log(myAudio.paused);

未播放或者播放暫停都會返回true。

四、播放與暫停等JS方法

play()

音頻播放示意，沒有額外參數(shù)：

myAudio.play();

需要注意的是，目前在現(xiàn)代瀏覽器下，無論是桌面端還是移動端，執(zhí)行myAudio.play()不總是有效果的。

目前策略是，web網(wǎng)頁需要至少又一次可信任的用戶行為后，才能myAudio.play()播放才可以執(zhí)行，否則會報錯。

可信任的用戶行為包括touchstart觸摸或者click點擊。

pause()

音頻暫停示意，沒有額外參數(shù)：

myAudio.pause();

音頻元素是沒有stop()方法的，如果你想要實現(xiàn)音頻的stop()效果，可以先設置currentTime屬性值為0，然后在執(zhí)行pause()方法。

canPlayType()

canPlayType()可以用來檢測瀏覽器是否支持某種類型的音頻文件，支持一個mime type值作為參數(shù)。使用示意：

if (myAudio.canPlayType('audio/mpeg')) {
 // 如果支持mp3
 // 這里搞事情
}

canPlayType()方法可以返回下面三個值中的某一個：

1. probably
2. maybe
3. ""（空字符串）

實際開發(fā)的時候，只要不是空字符串，我們都可以認為是支持的，因此，直接使用if弱匹配返回值即可，例如：

var myAudio=document.createElement('audio');
if (myAudio.canPlayType('audio/mpeg')) {
 myAudio.setAttribute('src','audiofile.mp3');
}
if (myAudio.canPlayType('audio/ogg')) {
 myAudio.setAttribute('src','audiofile.ogg');
}

load()

觸發(fā)音頻文件的加載。如果瀏覽器不支持preload屬性，則此方法也不會有效果。

此方法沒有額外參數(shù)：

myAudio.load();

五、音頻媒體加載事件

下面講講關于音頻加載及相關處理，根據(jù)我實際項目中的實踐，這類加載事件在移動端，尤其iOS Safari并不總能觸發(fā)，因為preload以及autoplay等屬性的限制。

loadstart

loadstart事件簡單地告訴我們加載過程已經(jīng)開始，瀏覽器正在連接到媒體。

myAudio.addEventListener("loadstart", function() {
 // 抓取文件
});

durationchange

如果你想盡快知道音頻文件的播放時長，則durationchange事件非常管用，因為音頻文件默認duration初始值是NaN，當準確時長返回時候，會觸發(fā)durationchange，此時我們就可以快速顯示音頻播放時間了。

通常實際開發(fā)，我們會使用00:00占位，durationchange事件觸發(fā)后在替換為準確的總播放時間。

myAudio.addEventListener("durationchange", function() {
 // 可以顯示播放時長了喲
});

loadedmetadata

當?shù)谝粋€音頻文件字節(jié)數(shù)據(jù)到達時，會觸發(fā)loadeddata事件。雖然播放頭已經(jīng)就位，但還沒有準備好播放。

myAudio.addEventListener("loadeddata", function() {
 // 可以顯示播放頭
});

progress

progress事件在媒體文件仍然在下載中的時候觸發(fā)，通常各種loading效果的顯示就是在這個事件中。

myAudio.addEventListener("progress", function() {
 // 你可以讓用戶知道媒體文件正在下載
});

canplay

當媒體文件可以播放的時候會觸發(fā)canplay事件。

我們在自定義音頻播放器的時候，可以默認把一些按鈕disabled禁用，等可以播放的時候再恢復為enabled，此時就可以使用canplay事件。

myAudio.addEventListener("canplay", function() {
 // 音頻可以播放了
});

canplaythrough

canplaythrough事件在音頻文件可以從頭播放到尾時候觸發(fā)。這種情況包括音頻文件已經(jīng)從頭到尾加載完畢了，或者瀏覽器認為一定可以按時下載，不會發(fā)生緩沖停止。

myAudio.addEventListener("canplaythrough", function() {
 // 音頻可以不發(fā)生緩沖從頭播放到結束
});

音頻事件觸發(fā)的順序

媒體事件加載順序如下：

loadstart → durationchange → loadedmetadata → loadeddata → progress → canplay → canplaythrough

加載中斷事件

還有一些事件實在媒體加載過程出現(xiàn)某種中斷時將觸發(fā)。

suspend

即使文件尚未完全下載，也不再拉取媒體數(shù)據(jù)。

abort

不是因為出錯而導致的媒體數(shù)據(jù)下載中止。

error

媒體下載過程中錯誤。例如突然無網(wǎng)絡了?；蛘呶募刂凡粚?。

emptied

媒體緩沖區(qū)已被清空，可能是由于錯誤或調(diào)用了load()方法重新加載。

stalled

媒體數(shù)據(jù)意外地不再可用。

六、音頻媒體播放事件

下面介紹一些與媒體文件播放狀態(tài)相關的一些事件。

timeupdate

每次currentTime屬性值發(fā)生變化的時候會觸發(fā)timeupdate事件。

實際開發(fā)的時候，這個事件每250毫秒出發(fā)一次。這個事件可用來實時顯示播放進度。

myAudio.addEventListener("timeupdate", function() {
 // 更新與播放進度相關的內(nèi)容
});

playing

音頻文件在缺少媒體信息（如時長等）的時候，播放會被迫停止，如果之后在啟動播放，會觸發(fā)playing事件。

waiting

音頻文件因為缺少媒體信息（如時長等）導致播放停止時會觸發(fā)waiting事件。

play

play事件在play()方法生效，或者autoplay導致播放開始時候觸發(fā)，此事件觸發(fā)的播放狀態(tài)一定是一個從暫停到播放。

pause

pause事件在pause()方法執(zhí)行并生效后觸發(fā)，此事件觸發(fā)需要一個從播放到暫停的狀態(tài)變化。

ended

當整個音頻文件播放完畢的時候觸發(fā)ended事件。

myAudio.addEventListener("ended", function() {
 // 當音軌播放完畢時候做你想做的事情
});

volumechange

音量發(fā)生變化的時候會觸發(fā)volumechange事件，包括靜音行為。

ratechange

播放速率發(fā)生變化的時候會觸發(fā)ratechange事件。

七、緩沖相關的屬性和方法

媒體文件的播放進度我們可以使用currentTime和duration屬性獲取，但是有時候，我們希望知道緩沖加載的進度，此時可以使用下面幾個和緩沖相關屬性和方法。

buffered

此屬性讓我們知道音頻的哪些部分已被緩沖（提前下載）。它返回一個稱為TimeRanges的對象。

myBufferedTimeRanges=myAudio.buffered;

seekable

seekable屬性通知您是否可以直接跳到媒體的該部分，而不需要進一步緩沖。

mySeekableTimeRanges=myAudio.seekable;

Buffering相關事件

seeking

當媒體資源正在請求是會觸發(fā)seeking事件。

seeked

當seeking屬性變成false時候會觸發(fā)seeked事件。

有關緩沖以及TimeRanges更深入具體的知識，可以參見這篇MDN文檔。

八、結語與參考文檔

本文展示的這些<audio>音頻元素相關的屬性和方法以及各種回調(diào)事件，對于<video>視頻元素同樣受用，基本上都是一模一樣的，很多自動播放以及媒體自動加載策略也是一致的。

本文展示的這些API并不是全部，如果發(fā)現(xiàn)有遺漏，歡迎大家補充。