如何用html5 寫出網頁音樂播放器-頭條-PHP中文網

功能簡介

html5中推出了音視訊標籤，可以讓我們不借助其他外掛程式就可以直接播放音訊視訊。下面我們就利用html5的audio標籤及其相關屬性和方法來製作一個簡單的音樂播放器。關於html5製作網頁音樂播放器主要包括以下幾個功能：

1、播放暫停、上一首和下一首

2、調整音量和播放進度條

#3、根據清單切換目前歌曲

先來看最終的完成效果：

如何用html5 寫出網頁音樂播放器

這個音樂播放器的結構主要分為三個部分：歌曲資訊、播放器和播放列表，我們將重點放在播放器部分。首先在播放器中放三個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];

登入後複製

播放和暫停：

我們現在就可以完成播放按鈕的功能啦，首先設定一個標誌，用來標記音樂的播放狀態，再為數組的索引index設定一個默認值：

然後對播放狀態進行判斷，呼叫對應的函數，並修改flag的值和清單對應項目樣式：

var flag = true;
var index = 0;
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)";
}
}

登入後複製

上面的HTML頁面的程式碼中呼叫了多個函數，其中播放和暫停是audio標籤自帶的方法，而其他的函數則是我們自己定義的。下面我們就來看看這些函數是怎麼實現的，又對應了哪些功能吧。

進度條與播放時間：

首先是進度條功能，取得歌曲的全部時長，然後再根據目前播放的進度條總長度相乘計算出進度條的位置。

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);
}

登入後複製

調整播放進度和音量：

接下來我們再來完成一下透過進度條調整播放進度和調整音量功能。

調整播放進度功能利用了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;
}
}
})

登入後複製

歌曲切換

#最後我們再來實現比較複雜的歌曲切換功能。

先來看用上一首和下一首按鈕切換，在切換音樂時我們要注意的問題有下面幾個：第一，我們要停止目前播放的音樂，轉而播放下一首音樂；第二，要清空進度條和播放時間，重新計算；第三，歌曲資訊要隨之改變，播放器下面的播放清單樣式也要改變。在弄清楚上面三點以後我們就可以開始實現功能了。

//上一曲
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);
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();
}

登入後複製

透過播放清單來切換歌曲與透過按鈕切換的想法差不多，只是根據對應的清單項目來設定目前應該播放哪首歌曲。

首先是切換歌曲資訊：上面切換歌曲的函數中都呼叫了幾個方法，下面我們來看看這些方法的用途是什麼吧。

首先是切換歌曲訊息：

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 = "周杰伦、费玉清";
}
}

登入後複製

然後清空兩個計時器：

//将进度条置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);
}
}

登入後複製

再把播放的音樂停止，並且將播放時間恢復。

function stopM(){
if(mList[index].played){
mList[index].pause();
mList[index].currentTime=0;
flag=false;
}
}

登入後複製

到此，html5寫出的音樂播放器我們就基本完成了，完成之後效果還是很不錯的。趕緊收藏吧希望大家能根據以上教學用html5寫出自己的播放器。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何用html5 寫出網頁音樂播放器