<audio>標簽是HTML5中的新標簽，定義聲音用于嵌入音頻內容，比如音樂或其他音頻流。用的比較多音頻格式是.mp3。

<audio>標簽常用屬性如下表

屬性	值	描述
autoplay	autoplay	添加該屬性后，音頻會自動播放
controls	controls	設置后，顯示控件，如播放按鈕、音量
loop	loop	添加該屬性后，當音頻播放結束后會重新開始播放
preload	preload	音頻顯示頁面加載，準備播放，如已添加autoplay,則忽略該屬性
src	url	播放音頻的URL（地址）。

HTML5音頻簡單的使用實例如下

<audio src="http://www.lmlblog.com/blog/13/images/xia.mp3" controls autoplay></audio>

但有時候你的瀏覽器不支持.MP3格式播放，這時就需要設置兼容多個瀏覽器的格式了，如下

<audio controls>

<source src="music.mp3">

<source src="music.m4a">

<source src="music.wav">

<source src="music.ogg">

</audio>

很多小白把上面理解為音頻播放列表，按順序播放(即播放完music.mp3后，自動播放下一個music.m4a)。html5設成多個src，主要是有的瀏覽器無法播放個別音頻格式，它從上到下讀取播放，如果第一個mp3格式能播放，后面的就沒用了。

以前給網頁、網站添加音樂播放列表時，都是用網易音樂、蝦米音樂中的“生成外鏈播放器”來給網頁添加音樂的，但過一段時間，你會發現你添加的音樂列表某首音樂不能播放了，主要原因是音樂版權問題。這時只能通過添加其他播放器或自己用代碼來實現了。推薦閱讀：網頁如何嵌入騰訊/優酷視頻播放器

目前，html5<audio>標簽只能同時播放一個音頻文件，如何要添加多個MP3音頻文件，然后按順序一個接著一個連續播放，需要用JS代碼來實現。

通過js來實現<audio>標簽連續播放多個MP3音頻，代碼如下：

<div id="audioBox"> <script type="text/javascript"> window.onload = function(){ var arr = ["http://www.lmlblog.com/blog/bozhao/images/believe.mp3","http://www.lmlblog.com/blog/bozhao/images/shui.mp3"]; //把需要播放的歌曲從后往前排，這里已添加兩首音樂，可繼續添加多個音樂 var myAudio = new Audio(); myAudio.preload = true; myAudio.controls = true; myAudio.src = arr.pop(); //每次讀數組最后一個元素 myAudio.addEventListener('ended', playEndedHandler, false); myAudio.play(); document.getElementById("audioBox").appendChild(myAudio); myAudio.loop = false;//禁止循環，否則無法觸發ended事件 function playEndedHandler(){ myAudio.src = arr.pop(); myAudio.play(); console.log(arr.length); !arr.length && myAudio.removeEventListener('ended',playEndedHandler,false);//只有一個元素時解除綁定 } } </script> </div>

將上面代碼的音頻地址改成你的MP3地址即可，可在后面添加多個mp3音頻地址。

以上代碼效果顯示地址：http://www.lmlblog.com/blog/bozhao/ 網站添加播放器的方法除了上面說到的網易云生成外鏈播放器、蝦米播放器（制作地址http://www.xiami.com/widget/imulti）添加，還有很多，歡迎交流。

文章來源于http://www.lmlblog.com/405.html

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的HTML5 audio 如何实现播放多个MP3音频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。