本文介紹了HTML5網(wǎng)頁(yè)音樂(lè)播放器的示例代碼，分享給大家，具體如下：
1功能介紹
HTML5中推出了音視頻標(biāo)簽，可以讓我們不借助其他插件就可以直接播放音視頻。下面我們就利用H5的audio標(biāo)簽及其相關(guān)屬性和方法來(lái)制作一個(gè)簡(jiǎn)單的音樂(lè)播放器。主要包括以下幾個(gè)功能：
1、播放暫停、上一首和下一首
2、調(diào)整音量和播放進(jìn)度條
3、根據(jù)列表切換當(dāng)前歌曲
先來(lái)看一下最終的完成效果：
這個(gè)音樂(lè)播放器的結(jié)構(gòu)主要分為三部分：歌曲信息、播放器和播放列表，我們重點(diǎn)介紹一下播放器部分。首先在播放器中放三個(gè)audio標(biāo)簽用于播放：
<audio id="music1">瀏覽器不支持audio標(biāo)簽
<source src="media/Beyond - 光輝歲月.mp3"></source>
</audio>
<audio id="music2">瀏覽器不支持audio標(biāo)簽
<source src="media/Daniel Powter - Free Loop.mp3"></source>
</audio>
<audio id="music3">瀏覽器不支持audio標(biāo)簽
<source src="media/周杰倫、費(fèi)玉清 - 千里之外.mp3"></source>
</audio>
下面的播放列表也對(duì)應(yīng)三個(gè)audio標(biāo)簽：
<div id="playList">
<ul>
<li id="m0">Beyond-光輝歲月</li>
<li id="m1">Daniel Powter-Free Loop</li>
<li id="m2">周杰倫、費(fèi)玉清-千里之外</li>
</ul>
</div>
接下來(lái)我們就開(kāi)始逐步實(shí)現(xiàn)上面提到的功能吧，先來(lái)完成播放和暫停功能，在按下播放按鈕時(shí)我們要做到進(jìn)度條隨歌曲進(jìn)度前進(jìn)，播放時(shí)間也逐漸增加，同時(shí)播放按鈕變成暫停按鈕，播放列表的樣式也對(duì)應(yīng)改變。
在做功能之前我們要先把三個(gè)audio標(biāo)簽獲取id后存到一個(gè)數(shù)組中，供后續(xù)使用。
var music1= document.getElementById("music1");
var music2= document.getElementById("music2");
var music3= document.getElementById("music3");
var mList = [music1,music2,music3];
2播放和暫停：
我們現(xiàn)在就可以完成播放按鈕的功能啦，首先設(shè)置一個(gè)標(biāo)志，用來(lái)標(biāo)記音樂(lè)的播放狀態(tài)，再為數(shù)組的索引index設(shè)置一個(gè)默認(rèn)值：
然后對(duì)播放狀態(tài)進(jìn)行判斷，調(diào)用對(duì)應(yīng)的函數(shù)，并修改flag的值和列表對(duì)應(yīng)項(xiàng)目樣式：
function playMusic(){
if(flag&&mList[index].paused){
mList[index].play();
document.getElementById("m"+index).style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
progressBar();
playTimes();
play.style.backgroundImage = "url(media/pause.png)";
flag = false;
}else{
mList[index].pause();
flag = true;
play.style.backgroundImage = "url(media/play.png)";
}
}
上面的代碼中調(diào)用了多個(gè)函數(shù)，其中播放和暫停是audio標(biāo)簽自帶的方法，而其他的函數(shù)則是我們自己定義的。下面我們就來(lái)看一下這些函數(shù)是怎么實(shí)現(xiàn)的，又對(duì)應(yīng)了哪些功能吧。
3進(jìn)度條和播放時(shí)間：
首先是進(jìn)度條功能，獲取歌曲的全部時(shí)長(zhǎng)，然后再根據(jù)當(dāng)前播放的進(jìn)度與進(jìn)度條總長(zhǎng)度相乘計(jì)算出進(jìn)度條的位置。
function progressBar(){
var lenth=mList[index].duration;
timer1=setInterval(function(){
cur=mList[index].currentTime;//獲取當(dāng)前的播放時(shí)間
progress.style.width=""+parseFloat(cur/lenth)*300+"px";
progressBtn.style.left= 60+parseFloat(cur/lenth)*300+"px";
},10)
}
下面是改變播放時(shí)間功能，這里我們?cè)O(shè)置一個(gè)定時(shí)函數(shù)，每隔一段時(shí)間來(lái)執(zhí)行一次以改變播放時(shí)間。因?yàn)槲覀儷@取到的歌曲時(shí)長(zhǎng)是以秒來(lái)計(jì)算，所以我們要利用if語(yǔ)句對(duì)時(shí)長(zhǎng)判斷來(lái)進(jìn)行換算，將播放時(shí)間改為以幾分幾秒的形式來(lái)顯示。
function playTimes(){
timer2=setInterval(function(){
cur=parseInt(mList[index].currentTime);//秒數(shù)
var minute=parseInt(cur/60);
if (minute<10) {
if(cur%60<10){
playTime.innerHTML="0"+minute+":0"+cur%60+"";
}else{
playTime.innerHTML="0"+minute+":"+cur%60+"";
}
} else{
if(cur%60<10){
playTime.innerText= minute+":0"+cur%60+"";
}else{
playTime.innerText= minute+":"+cur%60+"";
}
}
},1000);
}
4調(diào)整播放進(jìn)度和音量：
接下來(lái)我們?cè)賮?lái)完成一下通過(guò)進(jìn)度條調(diào)整播放進(jìn)度和調(diào)整音量功能。
調(diào)整播放進(jìn)度功能利用了event對(duì)象來(lái)實(shí)現(xiàn)，因?yàn)閛ffsetX屬性只有IE事件具有，所以推薦使用IE瀏覽器查看效果。先對(duì)進(jìn)度條添加事件監(jiān)聽(tīng)，當(dāng)在進(jìn)度條上點(diǎn)擊鼠標(biāo)時(shí)，獲取鼠標(biāo)的位置，并根據(jù)位置除以進(jìn)度條的總長(zhǎng)度來(lái)計(jì)算當(dāng)前的播放進(jìn)度，然后對(duì)歌曲進(jìn)行設(shè)置。
//調(diào)整播放進(jìn)度
total.addEventListener("click",function(event){
var e = event || window.event;
document.onmousedown = function(event){
var e = event || window.event;
var mousePos1 = e.offsetX;
var maxValue1 = total.scrollWidth;
mList[index].currentTime = (mousePos1/300)*mList[index].duration;
progress.style.width = mousePos1+"px";
progressBtn.style.left = 60+ mousePos1 +"px";
}
})
下面是調(diào)整音量功能，音量的調(diào)整我們采用拖動(dòng)的形式實(shí)現(xiàn)，思路也是對(duì)音量條的按鈕球添加事件監(jiān)聽(tīng)，然后根據(jù)拖動(dòng)的位置來(lái)計(jì)算按鈕球相對(duì)于音量條整體的位置，最后根據(jù)計(jì)算結(jié)果與音量相乘得出當(dāng)前音量：
volBtn.addEventListener("mousedown",function(event){
var e = event || window.event;
var that =this;
//阻止球的默認(rèn)拖拽事件
e.preventDefault();
document.onmousemove = function(event){
var e = event || window.event;
var mousePos2 = e.offsetY;
var maxValue2 = vol.scrollHeight;
if(mousePos2<0){
mousePos2 = 0;
}
if(mousePos2>maxValue2){
mousePos2=maxValue2;
}
mList[index].volume = (1-mousePos2/maxValue2);
console.log(mList[index].volume);
volBtn.style.top = (mousePos2)+"px";
volBar.style.height = 60-(mousePos2)+"px";
document.onmouseup = function(event){
document.onmousemove = null;
document.onmouseup = null;
}
}
})
5歌曲切換
最后我們?cè)賮?lái)實(shí)現(xiàn)比較復(fù)雜的歌曲切換功能。
先來(lái)看用上一首和下一首按鈕進(jìn)行切換，在切換音樂(lè)時(shí)我們要注意的問(wèn)題有下面幾個(gè)：第一，我們要停止當(dāng)前播放的音樂(lè)，轉(zhuǎn)而播放下一首音樂(lè)；第二，要清空進(jìn)度條和播放時(shí)間，重新計(jì)算；第三，歌曲信息要隨之改變，播放器下面的播放列表樣式也要變化。在弄清楚上面三點(diǎn)以后我們就可以開(kāi)始實(shí)現(xiàn)功能了。
//上一曲
function prevM(){
clearInterval(timer1);
clearInterval(timer2);
stopM();
qingkong();
cleanProgress();
--index;
if(index==-1){
index=mList.length-1;
}
clearListBgc();
document.getElementById("m"+index).style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
changeInfo(index);
mList[index].play();
progressBar();
playTimes();
if (mList[index].paused) {
play.style.backgroundImage = "url(media/play.png)";
}else{
play.style.backgroundImage = "url(media/pause.png)";
}
}
//下一曲
function nextM(){
clearInterval(timer1);
clearInterval(timer2);
stopM();
qingkong();
cleanProgress();
++index;
if(index==mList.length){
index=0;
}
clearListBgc();
document.getElementById("m"+index).style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
changeInfo(index);
mList[index].play();
progressBar();
playTimes();
if (mList[index].paused) {
play.style.backgroundImage = "url(media/play.png)";
}else{
play.style.backgroundImage = "url(media/pause.png)";
}
}
下面的代碼是點(diǎn)擊列表切換歌曲。
m0.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
qingkong();
flag = false;
stopM();
index = 0;
pauseall();
play.style.backgroundImage = "url(media/pause.png)";
clearListBgc();
document.getElementById("m0").style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
mList[index].play();
cleanProgress();
progressBar();
changeInfo(index);
playTimes();
}
m1.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
flag = false;
qingkong();
stopM();
index = 1;
pauseall();
clearListBgc();
play.style.backgroundImage = "url(media/pause.png)";
document.getElementById("m1").style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
mList[index].play();
cleanProgress();
changeInfo(index);
progressBar();
playTimes();
}
m2.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
flag = false;
qingkong();
stopM();
index = 2;
pauseall();
play.style.backgroundImage = "url(media/pause.png)";
clearListBgc();
document.getElementById("m2").style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
mList[index].play();
cleanProgress();
changeInfo(index);
progressBar();
playTimes();
}
通過(guò)播放列表來(lái)切換歌曲與通過(guò)按鈕切換的思路差不多，只是根據(jù)對(duì)應(yīng)的列表項(xiàng)來(lái)設(shè)置當(dāng)前應(yīng)該播放哪首歌曲。
上面切換歌曲的函數(shù)中都調(diào)用了幾個(gè)方法，下面我們來(lái)看看這些方法的用途都是什么吧。
首先是切換歌曲信息：
function changeInfo(index){
if (index==0) {
musicName.innerHTML = "光輝歲月";
singer.innerHTML = "Beyond";
}
if (index==1) {
musicName.innerHTML = "Free Loop";
singer.innerHTML = "Daniel Powter";
}
if (index==2) {
musicName.innerHTML = "千里之外";
singer.innerHTML = "周杰倫、費(fèi)玉清";
}
}
然后清空兩個(gè)定時(shí)器：
//將進(jìn)度條置0
function cleanProgress(timer1){
if(timer1!=undefined){
clearInterval(timer1);
}
progress.style.width="0";
progressBtn.style.left="60px";
}
function qingkong(timer2){
if(timer2!=undefined){
clearInterval(timer2);
}
}
再把播放的音樂(lè)停止，并且將播放時(shí)間恢復(fù)。
function stopM(){
if(mList[index].played){
mList[index].pause();
mList[index].currentTime=0;
flag=false;
}
}
最后的最后，改變下面播放列表的樣式：
function clearListBgc(){
document.getElementById("m0").style.backgroundColor = "#E5E5E5";
document.getElementById("m1").style.backgroundColor = "#E5E5E5";
document.getElementById("m2").style.backgroundColor = "#E5E5E5";
document.getElementById("m0").style.color = "black";
document.getElementById("m1").style.color = "black";
document.getElementById("m2").style.color = "black";
}
到此，音樂(lè)播放器我們就基本完成了，來(lái)看一下動(dòng)圖的效果：
作者：杰瑞教育
出處：http://www.cnblogs.com/jerehedu/
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
