HTML5 audio 如何實現播放多個MP3音頻

<audio>標籤是HTML5中的新標籤,定義聲音用於嵌入音頻內容,好比音樂或其餘音頻流。用的比較多音頻格式是.mp3。javascript

<audio>標籤經常使用屬性以下表html

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

HTML5音頻簡單的使用實例以下html5

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

但有時候你的瀏覽器不支持.MP3格式播放,這時就須要設置兼容多個瀏覽器的格式了,以下數組

<audio controls>瀏覽器

<source src="music.mp3">app

<source src="music.m4a">oop

<source src="music.wav">網站

<source src="music.ogg">ui

</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音頻地址。

H5 audio實現連續播放顯示地址

以上代碼效果顯示地址:http://www.lmlblog.com/blog/bozhao/ 網站添加播放器的方法除了上面說到的網易雲生成外鏈播放器、蝦米播放器(製做地址http://www.xiami.com/widget/imulti)添加,還有不少,歡迎交流。

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

相關文章
相關標籤/搜索