網頁播放器系列教程（四）--功能開發

（三）功能開發接上文，我們現在開始編寫Javascript代碼，前文我們主文件已經引入了js文件，只需在js文件中編寫代碼。 1.播放音頻；怎樣才能讓頁面播放音頻呢？這需要“audio”標簽，但是我們不是在頁面總插入改標簽，而是用JS實現，只需編寫如下代碼：這裡面要在項目根目錄中添加mp3目錄 ...

（三）功能開發

接上文，我們現在開始編寫Javascript代碼，前文我們主文件已經引入了js文件，只需在js文件中編寫代碼。

1.播放音頻；

怎樣才能讓頁面播放音頻呢？這需要“audio”標簽，但是我們不是在頁面總插入改標簽，而是用JS實現，只需編寫如下代碼：

var Musicaudion = document.createElement("AUDIO")
Musicaudion.setAttribute('autoplay',true)
document.body.appendChild(Musicaudion);
Musicaudion.setAttribute("src", "mp3/01.mp3");

這裡面要在項目根目錄中添加mp3目錄，並添加01.mp3音頻文件，這樣我們的網頁就可以播放 "mp3/01.mp3"了。

但是這樣寫十分不利於我們復用，同時我們需要播放歌曲列表，所以進行了簡單改進。

一定義播放歌曲列表內容：

var songlist = [{
        "songname": "我的老朋友",
        "songurl": "01.mp3",
        "songer": "張三"
    },
    {
        "songname": "Angelina",
        "songurl": "02.mp3",
        "songer": "李四"
    },
    {
        "songname": "New Thang",
        "songurl": "03.mp3",
        "songer": "王五"
    },
    {
        "songname": "Boys",
        "songurl": "04.mp3",
        "songer": "boy"
    },
    {
        "songname": "在一起",
        "songurl": "05.mp3",
        "songer": "girl"
    },
    {
        "songname": "我的老朋友",
        "songurl": "01.mp3",
        "songer": "張三"
    },
    {
        "songname": "Angelina",
        "songurl": "02.mp3",
        "songer": "李四"
    },
    {
        "songname": "New Thang",
        "songurl": "03.mp3",
        "songer": "王五"
    },
    {
        "songname": "Boys",
        "songurl": "04.mp3",
        "songer": "boy"
    },
    {
        "songname": "我的老朋友",
        "songurl": "01.mp3",
        "songer": "張三"
    },
    {
        "songname": "Angelina",
        "songurl": "02.mp3",
        "songer": "李四"
    },
    {
        "songname": "New Thang",
        "songurl": "03.mp3",
        "songer": "王五"
    },
    {
        "songname": "Boys",
        "songurl": "04.mp3",
        "songer": "boy"
    }
]

二是定義播放函數以便播放歌曲時重覆利用。

上面定義的“Musicaudion”和“兩個全局變數”，同時我們還需要定義一個全局變數currentid，表示前歌曲播放序號代碼如下：

//當前歌曲播放序號，最小值為0，最大值為songlist數組的長度減一
var currentid=0;

在函數中我們需要用到，具體代碼如下：

//播放歌曲函數，songid表示songlist數據數組序號
function PlaySong(songid) {
// 設置播放文件路徑,從數組songlist中獲取
Musicaudion.setAttribute("src", "mp3/" + songlist[songid].songurl);
//獲取歌曲名稱Song_Name和歌曲作者Singer並動態設置
document.getElementById("Song_Name").innerHTML = songlist[songid].songname;
document.getElementById("Singer").innerHTML = songlist[songid].songer;
//播放歌曲
Musicaudion.play();
}

這樣我們的播放函數就編寫好了，最開始的代碼“Musicaudion.setAttribute("src", "mp3/01.mp3");”修改為“PlaySong(currentid);”

2.歌曲播放、暫停、切換功能；

實現這些功能我們首先獲取HTML中div變成JS對象在進行相應設置，具體代碼如下，有詳細的註解：

播放暫停功能代碼

//定義全局變數isPlay，0表示當前歌曲狀態播放狀態，1表示暫停狀態
var isPlay = 0;
//首先獲取ID為“Button_play”按鈕，然後設置單擊事件
document.getElementById("Button_play").onclick = function() {
//當歌曲為播放狀態，單擊變為暫停狀態，歌曲暫停
if (isPlay == 0) {
//設置我們定義的暫停樣式
this.className = "Button_pause";
isPlay = 1;
Musicaudion.pause();
} else {
//當歌曲為暫停狀態，單擊變為播放狀態，歌曲播放
this.className = "Button_play";
isPlay = 0;
Musicaudion.play();
}
};

上一首，下一首歌曲功能。

//上一首

document.getElementById("Button_Pre").onclick = function() {
//判讀是否為第一首歌曲，如果是第一首歌曲，序號變為最後一首歌曲，不是第一首歌曲，歌曲切換到下一首
if (currentid > 0) {
currentid--;
} else {
currentid = songlist.length - 1;
}
PlaySong(currentid)
}

//下一首
document.getElementById("Button_next").onclick = function() {
if (currentid < songlist.length - 1) {
currentid++;
} else {
currentid = 0;
}
PlaySong(currentid)
}

3.播放進度條功能；

該功能我們需要一個定時函數，隨著歌曲的播放進度實時進行更新進度條，同時為進度條添加單擊功能，調整播放進度，局具體代碼如下：

//設置定時器
var t = setInterval(function() {
//獲取歌曲當前播放百分比
var percent = Math.floor(Musicaudion.currentTime / Musicaudion.duration * 10000) / 100 + "%";
//設置播放頭位置
document.getElementById("Progressbar_playHead").setAttribute("style", "left:" + percent);
//設置歌曲當前時間
document.getElementById("Songcurrenttime").innerHTML = conversion(Musicaudion.currentTime)
}, 100)
//單擊進度條 調整發播放進度
document.getElementById("Progressbar_Box").onclick = function(e) {
//獲取滑鼠單擊進度條位置
var x = (e || window.event).clientX;
//計算進度條移動距離
var left = x - this.offsetLeft - document.getElementById("Progressbar_playHead").offsetWidth;
//設置播放頭位置
document.getElementById("Progressbar_playHead").style.left = left + 'px';
//計算總的進度條長度
var maxwidth = document.getElementById("Progressbar_Box").offsetWidth - document.getElementById("Progressbar_playHead").offsetWidth;
//計算當前點擊進度百分比百分比
var p = left / maxwidth
//設置當前播放時間點到點擊位置
Musicaudion.currentTime = p * Musicaudion.duration;
//播放音樂
Musicaudion.play();
};

時間格式顯示函數。

//時間格式轉換函數
function conversion(value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}

這樣我們的進度條已經設置完成了，這裡介紹一下setInterval函數，這個函數是一個實現定時調用的函數，可按照指定的周期（以毫秒計）來調用函數或計算表達式。setInterval方法會不停地調用函數，直到 clearInterval被調用或視窗被關閉。

4.隨機播放，迴圈播放功能。

這部分的代碼也是很簡單，大同小異，代碼如下，註釋很詳細：

var isPlayState=0;//0順序播放,1隨機播放,2單曲迴圈
//隨機播放按鈕
var randomBtn = document.getElementById("SongOption_Shuffle");
var onereplayBtn = document.getElementById("SongOption_Replay");
randomBtn.onclick = function() {
if (isPlayState == 1) {
isPlayState = 0;
this.className = "SongOption_Shuffle"
return;
}
if (isPlayState == 2) {
onereplayBtn.className = "SongOption_Replay";
}
isPlayState = 1;
this.className = "SongOption_Shuffle_on"
}
onereplayBtn.onclick = function() {
if (isPlayState == 2) {
isPlayState = 0;
this.className = "SongOption_Replay"
return;
}
if (isPlayState == 1) {
randomBtn.className = "SongOption_Shuffle";
}
isPlayState = 2;
this.className = "SongOption_Replay_on"
}

這裡需要更改一下CSS代碼，“#SongOption_Shuffle”，更改為“.SongOption_Shuffle”；“#SongOption_Shuffle_on”，更改為“.SongOption_Shuffle_on”；“#SongOption_Replay”，更改為“.SongOption_Replay”；“#SongOption_Replay_on”，更改為“.SongOption_Replay”。Html代碼中id為“SongOption_Shuffle”添加css樣式“SongOption_Shuffle”；id為“SongOption_Replay”添加css樣式“SongOption_Replay”。原因是我們JS代碼中要切換樣式。

這樣我們的樣式功能切換就實現了，還需要在setInterval函數中添加代碼實現迴圈、重覆功能，具體代碼如下：

//判斷個歌曲是否結束
if (Musicaudion.ended) {
if (isPlayState == 0) //順序播放
{
if (currentid < songlist.length - 1) {
currentid++;
} else {
currentid = 0;
}
} else if (isPlayState == 1) //隨機播放
{
currentid = Math.floor(Math.random() * songlist.length - 1)
} else //單曲迴圈
{
currentid = currentid;
}
PlaySong(currentid);
}

5.音量調節功能；

音量調節需要一個初始數值，所以我們進行瞭如下設置：

//初始音量
var SoundStart = 0.3;
//計算音量最大移動數值
var Soundmax = document.getElementById("SongOption_SoundBox").offsetWidth - document.getElementById("SongOption_SoundHead").offsetWidth;
//設置音量初始位置
document.getElementById("SongOption_SoundHead").style.left = (Soundmax * SoundStart) + 'px';
document.getElementById("SongOption_SoundCurrent").style.width = SoundStart * 100 + '%';
Musicaudion.volume = SoundStart;
//音頻載入完成
Musicaudion.onloadedmetadata = function() {
//歌曲總的顯示時間
document.getElementById("Songalltime").innerHTML = conversion(Musicaudion.duration)
}

設置音量調節功能，具體代碼如下：

//調整音量
document.getElementById("SongOption_SoundHead").onmousedown = function(e) {
var x = (e || window.event).clientX;
var l = this.offsetLeft;
var max = document.getElementById("SongOption_SoundBox").offsetWidth - this.offsetWidth;
document.onmousemove = function(e) {
var thisX = (e || window.event).clientX;
var to = Math.min(max, Math.max(-2, l + (thisX - x)));
if (to < 0) {
to = 0;
}
document.getElementById("SongOption_SoundHead").style.left = to + 'px';
//此句代碼可以除去選中效果
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
Musicaudion.volume = to / max;
//document.querySelector('.now')
document.getElementById("SongOption_SoundCurrent").style.width = to / max * 100 + '%';
}
//註意此處是document 才能有好的拖動效果
document.onmouseup = function() {
document.onmousemove = null;
};
}

6.音頻列表。

初始數據

var htmlinsert = "";
for (var i = 0; i < songlist.length; i++) {
htmlinsert += '<li onclick="PlaySong(' + i + ')"><span>' + songlist[i].songname + '</span> </li>';
}
var musiclistbox = document.getElementById('Songlist_box');
musiclistbox.innerHTML = htmlinsert;
var lis = musiclistbox.childNodes;
var onesong = lis.item(0);
var gundongheight = onesong.offsetHeight;

在play函數中添加如下代碼

//設置歌曲庫
for (var i = 0; i < lis.length; i++) {
if (songid == i) {
lis.item(i).setAttribute("class", "currentSong")
} else {
lis.item(i).setAttribute("class", "")
}
}
//歌曲庫滾動到相應歌曲
if (songid > 2) {
document.getElementById('playMusic_Songlist').scrollTop = gundongheight * (songid - 1);
} else {
document.getElementById('playMusic_Songlist').scrollTop = 0;
}

這樣我們的所有js代碼已經輸入完成，播放器的功能全部實現，下一步我們將對代碼精簡提煉，進行封裝。

需要源代碼的可以留言。