網頁播放器開發系列筆記(三)

相信神話發表於2019-04-20
網頁播放器筆記

（三）功能開發

接上文，我們現在開始編寫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"了。

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

// 使用json資料形式定義資料 songname表示歌曲名稱 songurl表示歌曲地址   songer歌曲作者
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"
}
]

 

二是定義播放函式以便播放歌曲時重複利用。上面定義的“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();
}

2.歌曲播放、暫停、切換功能；這樣我們的播放函式就編寫好了，最開始的程式碼“Musicaudion.setAttribute("src", "mp3/01.mp3");”修改為“PlaySong(currentid);”

實現這些功能我們首先獲取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}`
}

 

4.隨機播放，迴圈播放功能。這樣我們的進度條已經設定完成了，這裡介紹一下setInterval函式，這個函式是一個實現定時呼叫的函式，可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。setInterval方法會不停地呼叫函式，直到 clearInterval被呼叫或視窗被關閉。

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

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"
}

這樣我們的樣式功能切換就實現了，還需要在setInterval函式中新增程式碼實現迴圈、重複功能，具體程式碼如下：這裡需要更改一下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程式碼中要切換樣式。

//判斷個歌曲是否結束
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.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程式碼已經輸入完成，播放器的功能全部實現，下一步我們將對程式碼精簡提煉，進行封裝。

相關文章