音在HTML中可以以不同的方式播放.

問題以及解決方法

在 HTML 中播放音頻并不容易！

您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。

在這W3CSchool 為您總結了問題和解決方法。

使用插件

瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。

插件可以使用 <object> 標簽 或者 <embed> 標簽添加在頁面上.

這些標簽定義資源（通常非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。

使用 <embed> 元素

<embed>標簽定義外部（非 HTML）內容的容器。（這是一個 HTML5 標簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

實例

<embed height="50" width="100" src="horse.mp3">

問題:

• <embed> 標簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。

• 不同的瀏覽器對音頻格式的支持也不同。

• 如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。

• 如果用戶的計算機未安裝插件，無法播放音頻。

• 如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。

使用 <object> 元素

<object tag> 標簽也可以定義外部（非 HTML）內容的容器。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

實例

<object height="50" width="100" data="horse.mp3"></object>

問題:

• 不同的瀏覽器對音頻格式的支持也不同。

• 如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。

• 如果用戶的計算機未安裝插件，無法播放音頻。

• 如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。

The <audio> element works in all modern browsers.

以下我們將使用 <audio> 標簽來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個 OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗，它會顯示一個錯誤文本信息:

實例

<audio controls>

<source src="horse.mp3" type="audio/mpeg">

<source src="horse.ogg" type="audio/ogg">

Your browser does not support this audio format.

</audio>

問題:

• <audio> 標簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗證。

• 您必須把音頻文件轉換為不同的格式。

• <audio> 元素在老式瀏覽器中不起作用。

最好的 HTML 解決方法

下面的例子使用了兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

實例

<audio controls height="100" width="100">

<source src="horse.mp3" type="audio/mpeg">

<source src="horse.ogg" type="audio/ogg">

<embed height="50" width="100" src="horse.mp3">

</audio>

問題:

• 您必須把音頻轉換為不同的格式。

• <embed> 元素無法回退來顯示錯誤消息。

雅虎媒體播放器 - 一個簡單的添加音頻到你網站上的方式

使用雅虎播放器是免費的。如需使用它，您需要把這段 JavaScript 插入網頁底部：

雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁面或 博客中就可以輕松地將您的HTML頁面制作成 專業的播放列表：

實例

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

如果你要使用它，您需要把這段 JavaScript 插入網頁底部：

<script src="http://mediaplayer.yahoo.com/latest"></script>

然后只需簡單地把 MP3 文件鏈接到您的 HTML 中，JavaScript 會自動地為每首歌創建播放按鈕：

<a href="song1.mp3">Play Song 1</a>

<a href="song2.wav">Play Song 2</a>

...

...

雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。

請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。

使用超鏈接

如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用"輔助應用程序"來播放文件。

以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動"輔助應用程序"來播放該文件：

實例

<a href="horse.mp3">Play the sound</a>

內聯的聲音說明

當您在網頁中包含聲音，或者作為網頁的組成部分時，它被稱為內聯聲音。

如果您打算在 web 應用程序中使用內聯聲音，您需要意識到很多人都覺得內聯聲音令人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯聲音選項。

我們最好的建議是只在用戶希望聽到內聯聲音的地方包含它們。一個正面的例子是，在用戶需要聽到錄音并點擊某個鏈接時，會打開頁面然后播放錄音。

HTML 多媒體標簽

New : HTML5 新標簽

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

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

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

一、audio使用基本案例

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

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

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

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

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

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

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

二、Audio HTML屬性

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

autoplay

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

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

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

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

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

loop

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

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

JS設置音頻循環播放可以：

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

muted

示意：

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

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

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都快來了，流量已經不值錢了，因此，我個人是更推薦使用auto的，體驗更好一點。然后，通常瀏覽器自己也會優化加載策略，不會所有音頻文件都加載下來，只是會加載一部分，保證點擊播放按鈕的時候，可以立即播放。

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

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

controls

示意：

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

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

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

不同瀏覽器，以及不同版本瀏覽器，其UI都不一樣。如果是開發to用戶側產品，需要自定義音頻播放器的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中調用的audio屬性

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

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

則：

currentTime

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

例如：

// 獲取音頻已經播放時長
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是一個可讀兼可寫的屬性，用來設置或獲取當前媒體文件的播放速率，值為數值，例如：

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

速率范圍

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

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

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

paused

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

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

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

四、播放與暫停等JS方法

play()

音頻播放示意，沒有額外參數：

myAudio.play();

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

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

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

pause()

音頻暫停示意，沒有額外參數：

myAudio.pause();

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

canPlayType()

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

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

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

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

實際開發的時候，只要不是空字符串，我們都可以認為是支持的，因此，直接使用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()

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

此方法沒有額外參數：

myAudio.load();

五、音頻媒體加載事件

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

loadstart

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

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

durationchange

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

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

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

loadedmetadata

當第一個音頻文件字節數據到達時，會觸發loadeddata事件。雖然播放頭已經就位，但還沒有準備好播放。

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

progress

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

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

canplay

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

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

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

canplaythrough

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

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

音頻事件觸發的順序

媒體事件加載順序如下：

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

加載中斷事件

還有一些事件實在媒體加載過程出現某種中斷時將觸發。

suspend

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

abort

不是因為出錯而導致的媒體數據下載中止。

error

媒體下載過程中錯誤。例如突然無網絡了。或者文件地址不對。

emptied

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

stalled

媒體數據意外地不再可用。

六、音頻媒體播放事件

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

timeupdate

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

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

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

playing

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

waiting

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

play

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

pause

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

ended

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

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

volumechange

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

ratechange

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

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

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

buffered

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

myBufferedTimeRanges = myAudio.buffered;

seekable

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

mySeekableTimeRanges = myAudio.seekable;

Buffering相關事件

seeking

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

seeked

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

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

八、結語與參考文檔

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

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