（1）H5實現音樂播放器【正在播放-歌詞篇】

 

 

 

 

 

 

 

 

 

 

 

近期閒來無事，就想着複習一下前端的東西，而後正好跟朋友搞了一個公共開放的音樂api接口，就想着寫一個音樂播放器玩玩！

話很少說，直接上圖，而後上代碼

 

【播放器顯示正在播放】

實現功能：

1：歌詞隨着歌單滾動！

2：背景虛擬化，跟着歌曲封面圖改變！

這個好多朋友問過我怎麼作到的，這裏能夠共享出源碼。

　　歌詞滾動很重要一點就是須要解析歌詞，實際上是咱們本身想複雜了，先來看看api獲取的歌詞是什麼樣的：

　　以下所示，獲取歌詞其實前面都帶着時間，因此咱們要作到的就是根據歌曲播放的時間來跟歌詞前面的時間對比，而後定位到歌詞

　　那一行，而後經過js設置那一行歌詞高亮，字體放大，改變字體顏色！

　　[by:GoodTM]
　　[00:00.00] 做曲 : 花粥
　　[00:01.00] 做詞 : 花粥
　　[00:10.43]
　　[00:11.12]在夜半三更過天橋歷來不敢回頭看
　　[00:15.86]白日裏是車水馬龍此時腳下是忘川
　　[00:21.30]我獨自走過半山腰山間野狗來做伴
　　[00:25.19]層林盡染百舸流秋風吹過鬼門關
　　[00:29.81]一瞬三年五載 品粗茶 食淡飯
　　[00:34.49]六界八荒四海 無人與我來叫板
　　[00:39.19]人間荒唐古怪 竹林外 有書齋
　　[00:43.78]匿於此地暢快 偏來者不善善者不來
　　　　
因此獲取到歌詞以後須要js先解析歌詞，循環獲取！
話很少說直接上源碼：

首先ajax請求獲取歌詞！　　　　

　　　$.ajax({ //異步請求獲取歌詞

url:url,
type:"post",
success:function(data){

if(data == '暫無歌詞') {
lyricTip('LH MUSIC、給你美好的音樂');
return false;
}

lyricText = parseLyric(data); // 解析獲取到的歌詞   調取下面解析方法

if(lyricText === '') {
lyricTip('LH MUSIC、給你美好的音樂');
return false;
}

lyricArea.html(''); // 清空歌詞區域的內容
lyricArea.scrollTop(0); // 滾動到頂部

lastLyric = -1;

// 顯示所有歌詞
var i = 0;
for(var k in lyricText){
var txt = lyricText[k];
if(txt.indexOf('純音樂') != -1){
lyricTip('LH MUSIC、給你美好的音樂');
return false;
}
if(!txt) txt = " ";
var li = $("<li data-no='"+i+"' class='lrc-item'>"+txt+"</li>");
lyricArea.append(li);
i++;
}
}　　　　　　

});

// 解析歌詞
　　// 參數：原始歌詞文件
　　function parseLyric(lrc) {    //傳入歌詞，解析參數   lrc
　　　　if(lrc === '') return '';　　//判斷非空
　　　　var lyrics = lrc.split("\n");　　//去除空格
　　　　var lrcObj = {};
　　　　for(var i=0;i<lyrics.length;i++){
　　　　var lyric = decodeURIComponent(lyrics[i]);
　　　　var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
　　　　var timeRegExpArr = lyric.match(timeReg);
　　　　if(!timeRegExpArr)continue;
　　　　var clause = lyric.replace(timeReg,'');
　　　　for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
　　　　var t = timeRegExpArr[k];
　　　　var min = Number(String(t.match(/\[\d*/i)).slice(1)),
　　　　sec = Number(String(t.match(/\:\d*/i)).slice(1));
　　　　var time = min * 60 + sec;
　　　　lrcObj[time] = clause;
　　　　}
　　}
　　return lrcObj;
}

 強制刷新當前時間點歌詞

// 強制刷新當前時間點的歌詞
// 參數：當前播放時間（單位：秒）
function refreshLyric(time) {
　　if(lyricText === '') return false;

　　time = parseInt(time); // 時間取整
　　var i = 0;
　　for(var k in lyricText){
　　if(k >= time) break;
　　i = k; // 記錄上一句的
　　}

　　scrollLyric(i); //滾動歌詞到自定語句方法下面
}

滾動歌詞都指定語句

// 滾動歌詞到指定句// 參數：當前播放時間（單位：秒）function scrollLyric(time) { 　　if(lyricText === '') return false; 　　time = parseInt(time); // 時間取整 　　if(lyricText === undefined || lyricText[time] === undefined) return false; // 當前時間點沒有歌詞 　　if(lastLyric == time) return true; // 歌詞沒發生改變 　　var i = 0; // 獲取當前歌詞是在第幾行 　　for(var k in lyricText){ 　　if(k == time) break; 　　i ++; 　　} 　　lastLyric = time; // 記錄方便下次使用 　　$(".lplaying").removeClass("lplaying"); // 移除其他句子的正在播放樣式 　　$(".lrc-item[data-no='" + i + "']").addClass("lplaying"); // 加上正在播放樣式 　　var scroll = (lyricArea.children().height() * i) - ($(".lyric").height() / 2); 　　lyricArea.stop().animate({scrollTop: scroll}, 1000); // 平滑滾動到當前歌詞位置(更改這個數值能夠改變歌詞滾動速度，單位：毫秒)}