本文介紹了HTML5網頁音樂播放器的範例程式碼，分享給大家，如下：
1功能介紹HTML5中推出了音訊視訊標籤，可以讓我們不借助其他外掛程式就可以直接播放音訊視訊。下面我們就利用H5的audio標籤及其相關屬性和方法來製作一個簡單的音樂播放器。主要包括以下幾個功能：
1、播放暫停、上一首和下一首
2.調整音量和播放進度條
3.根據清單切換當前歌曲
先來看一下最終的完成效果：
這個音樂播放器的結構主要分為三個部分：歌曲資訊、播放器和播放列表，我們將重點放在播放器部分。首先在播放器中放三個audio標籤來播放：
<audio id=music1>瀏覽器不支援audio標籤<source src=media/Beyond - 光輝歲月.mp3></source></audio><audio id=music2>瀏覽器不支援audio標籤<source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>瀏覽器不支援audio標籤<source src=media/周杰倫、費玉清- 千里之外.mp3></source></audio>
下面的播放清單也對應三個audio標籤：
<div id=playList> <ul> <li id=m0>Beyond-光輝歲月</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>周杰倫、費玉清-千里之外</li> </ul></div>
接下來我們就開始逐步實現上面提到的功能吧，先來完成播放和暫停功能，在按下播放按鈕時我們要做到進度條隨歌曲進度前進，播放時間也逐漸增加，同時播放按鈕變成暫停按鈕，播放清單的樣式也對應改變。
在做功能之前我們要先把三個audio標籤取得id後存到一個陣列中，供後續使用。
var music1= document.getElementById(music1);var music2= document.getElementById(music2);var music3= document.getElementById(music3);var mList = [music1,music2,music3];2播放和暫停：
我們現在就可以完成播放按鈕的功能啦，先設定一個標誌，用來標記音樂的播放狀態，再為陣列的索引index設定一個預設值：
然後對播放狀態進行判斷，呼叫對應的函數，並修改flag的值和清單對應項目樣式：
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);}}上面的程式碼中呼叫了多個函數，其中播放和暫停是audio標籤自帶的方法，而其他的函數則是我們自己定義的。下面我們就來看看這些函數是怎麼實現的，又對應了哪些功能吧。
3進度條和播放時間：首先是進度條功能，取得歌曲的全部時長，然後再根據目前播放的進度與進度條總長度相乘計算出進度條的位置。
function progressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//取得目前的播放時間progress.style.width=+parseFloat(cur/ lenth)*300+px; progressBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}以下是改變播放時間功能，這裡我們設定一個定時函數，每隔一段時間來執行一次以改變播放時間。因為我們取得到的歌曲時長是以秒來計算，所以我們要利用if語句對時長判斷來進行換算，將播放時間改為以幾分幾秒的形式來顯示。
function playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//秒數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調整播放進度和音量：接下來我們再來完成一下透過進度條調整播放進度和調整音量功能。
調整播放進度功能利用了event物件來實現，因為offsetX屬性只有IE事件具有，所以建議使用IE瀏覽器查看效果。先對進度條新增事件監聽，在進度條上點擊滑鼠時，取得滑鼠的位置，並根據位置除以進度條的總長度來計算目前的播放進度，然後對歌曲進行設定。
//調整播放進度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;}})以下是調整音量功能，音量的調整我們採用拖曳的形式實現，思路也是對音量條的按鈕球添加事件監聽，然後根據拖動的位置來計算按鈕球相對於音量條整體的位置，最後根據計算結果與音量相乘得出目前音量：
volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//阻止球的預設拖曳事件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歌曲切換最後我們再來實現比較複雜的歌曲切換功能。
先來看用上一首和下一首按鈕切換，在切換音樂時我們要注意的問題有下面幾個：第一，我們要停止當前播放的音樂，轉而播放下一首音樂；第二，要清空進度條和播放時間，重新計算；第三，歌曲資訊要隨之改變，播放器下面的播放清單樣式也要改變。在弄清楚上面三點以後我們就可以開始實現功能了。
//上一曲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);}}下面的程式碼是點擊列表切換歌曲。
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); ;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();}透過播放清單來切換歌曲與透過按鈕切換的想法差不多，只是根據對應的清單項目來設定目前應該播放哪首歌曲。
上面切換歌曲的函數中都呼叫了幾個方法，下面我們來看看這些方法的用途是什麼。
首先是切換歌曲訊息：
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 =周杰倫、費玉清;}}然後清空兩個定時器：
//將進度條置0function cleanProgress(timer1){if(timer1!=undefined){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2){ if (timer2!=undefined){ clearInterval(timer2);}}再把播放的音樂停止，並且將播放時間恢復。
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.BLdocument. (m0).style.color = black;document.getElementById(m1).style.color = black;document.getElementById(m2).style.color = black;}到此，音樂播放器我們就基本完成了，來看動圖的效果：
作者：傑瑞教育
來源：http://www.cnblogs.com/jerehedu/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。