用JS解析LRC格式的歌詞，實現歌詞同步滾動效果

原創 执笔写回憶 2020-02-23 03:57

用JS解析LRC格式的歌詞

1、把歌詞載入。

方法一：直接把歌詞粘貼到一個textarea文本域中，然後把它設置爲隱藏。

<!-- LRC歌詞 -->
<textarea id="lrc_content" cols="30" style="display: none">
[ti:沙漠駱駝]
[ar:展展與羅羅]
[al:沙漠駱駝]
[by:0]
[offset:0]
[00:00.59]沙漠駱駝 - 展展與羅羅
[00:02.97]詞：展展與羅羅
[00:04.46]曲：展展與羅羅
[00:26.45]我要穿越這片沙漠
[00:28.51]找尋真的自我
[00:30.50]身邊只有一匹駱駝陪我
[00:34.96]這片風兒吹過
[00:37.15]那片雲兒飄過
[00:39.26]突然之間出現愛的小河
[00:43.63]我跨上沙漠之舟
[00:45.71]背上菸斗和沙漏
[00:47.92]手裏還握着一壺烈酒
[00:52.35]漫長古道悠悠
[00:54.51]說不盡喜怒哀愁
[00:56.56]只有那駱駝奔忙依舊
[01:01.08][02:23.81][04:13.30]什麼鬼魅傳說
[01:03.12][02:25.94][04:15.20]什麼魑魅魍魎妖魔
[01:05.43][02:28.30][04:17.47]只有那鷺鷹在幽幽的高歌
[01:09.81][02:32.61][04:21.83]漫天黃沙掠過
[01:11.90][02:35.04][04:23.90]走遍每個角落
[01:14.05][02:36.99][04:26.20]行走在無盡的蒼茫星河
[01:18.69][02:41.50][04:30.60]白天黑夜交錯
[01:20.80][02:43.56][04:32.65]如此妖嬈婀娜
</textarea>

再用JS把歌詞讀出來：

<script>
    var lrc = document.getElementById("lrc_content").innerHTML;
</script>

方法二：用Ajax把後臺的lrc文件載入。

var lrc = "";
function getLRC() {
    var ajax = new XMLHttpRequest();
    ajax.open("GET", "media/沙漠駱駝 - 展展與羅羅.lrc");
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            lrc = ajax.responseText;
            //console.log(lrc);
            createLrcObj(lrc); // 調用createLrcObj函數，並傳入lrc參數
        }
    };
    ajax.send(null);
}
getLRC();

2、把LRC歌詞解析爲JS對象

代碼如下：

var oLRC = {
    ti: "", //歌曲名
    ar: "", //演唱者
    al: "", //專輯名
    by: "", //歌詞製作人
    offset: 0, //時間補償值，單位毫秒，用於調整歌詞整體位置
    ms: [] //歌詞數組{t:時間,c:歌詞}
};

function createLrcObj(lrc) {
	if(lrc.length==0) return;
    var lrcs = lrc.split('\n');//用回車拆分成數組
    for(var i in lrcs) {//遍歷歌詞數組
    	lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前後空格
        var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]間的內容
        var s = t.split(":");//分離:前後文字
        if(isNaN(parseInt(s[0]))) { //不是數值
            for (var i in oLRC) {
                if (i != "ms" && i == s[0].toLowerCase()) {
                    oLRC[i] = s[1];
                }
            }
        }else { //是數值
            var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取時間字段，可能有多個
            var start = 0;
            for(var k in arr){
                start += arr[k].length; //計算歌詞位置
            }
            var content = lrcs[i].substring(start);//獲取歌詞內容
            for (var k in arr){
                var t = arr[k].substring(1, arr[k].length-1);//取[]間的內容
                var s = t.split(":");//分離:前後文字
                oLRC.ms.push({//對象{t:時間,c:歌詞}加入ms數組
                    t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),
                    c: content
                });
            }
        }
    }
    oLRC.ms.sort(function (a, b) {//按時間順序排序
        return a.t-b.t;
    });
    /*
    for(var i in oLRC){ //查看解析結果
        console.log(i,":",oLRC[i]);
    }*/
}

createLrcObj(lrc);

解析後的歌詞位於oLRC對象的ms數組中：
oLRC.ms[i].t 是第i行歌詞的時間，以秒計；
oLRC.ms[i].c 是第i行歌詞。

3、把解析後的歌詞呈現在頁面上

定義一個列表標籤：

<ul id="lyric"></ul>

用JS把歌詞寫到標籤裏面：

function showLRC() {
    var s="";
    for(var i in oLRC.ms){//遍歷ms數組，把歌詞加入列表
        s+='<li>'+oLRC.ms[i].c+'</li>';
    }
    document.getElementById("lyric").innerHTML = s;
}
showLRC();

以上完畢。

以下是結合這個頁面加工後的完整代碼：https://blog.csdn.net/yzy_csdn/article/details/84536646

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<title>帶歌詞歌曲</title>
		<script src="../js/jquery-1.12.4.js"></script>
		<style>
			/* https://blog.csdn.net/yzy_csdn/article/details/84536646 */
			div{
				width:340px;
				height:50px;
				margin:0 auto;
				overflow:hidden;
			}
			ul{
				transition-duration: 600ms;
			}
			ul, li{
				list-style:none;
				padding: 0;
				margin: 0;
			}
			.aplayer-lrc-contents li.on{
				color: #0e90d2;
			}
			.aplayer-lrc-contents li p{
				overflow: hidden;
				text-overflow: ellipsis;
				height: 16px;
				line-height: 16px;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				text-align: center;
				margin-top: 0;
				margin-bottom: 16px;
			}
			audio{
				margin-top: 10px;
			}

            .aplayer-lrc:after,.aplayer-lrc:before {
            position: absolute;
            z-index: 1;
            display: block;
            overflow: hidden;
            content: ' ';
            width: 100%
        }

            .aplayer-lrc:before {
                top: 25px;
                height: 4%;
                background: -webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);
                background: -webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));
                background: linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )
            }

            /*.aplayer-lrc:after {*/
                /*bottom: 0;*/
                /*height: 33%;*/
                /*background: -webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 100%);*/
                /*background: -webkit-gradient(linear,left bottom,left top,from(white),to(rgba(255,255,255,0)));*/
                /*background: linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);*/
                /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )*/
            /*}*/
		</style>
	</head>
	<body>
		<div class="aplayer-lrc">
			<ul id="lrclist" class="aplayer-lrc-contents" style="transform: translateY(0px);"><!-- 保證歌詞在正中間 -->

			</ul>
		</div>
		<audio id="audio" src="music/找一個字代替.mp3" controls="controls" autoplay></audio>

		<script>
            var lrc = "";
            function getLRC() {
                var ajax = new XMLHttpRequest();
                ajax.open("GET", "lrc/找一個字代替.lrc");
                ajax.onreadystatechange = function () {
                    // if (ajax.readyState === 4 && ajax.status === 200) {
                    //     lrc = ajax.responseText;
                    //     // document.getElementById("lyric1").innerHTML = lrc;
                    //     createLrcObj(lrc);
                    // }
                    // if (ajax.readyState !== 4 && ajax.status === 404) {
                    //     console.log(ajax.status);
                    //     document.getElementById("lrclist").innerHTML = "<li class='on'><p>"+"暫無歌詞"+"</p></li>";
                    //     // ul.innerHTML += "<li><p>"+"暫無歌詞"+"</p></li>";//ul裏填充歌詞
                    // }

                    // 判斷響應是否完成：XMLHttpRequest 對象的 readystate屬性值爲4的時候
                     if ( ajax.readyState === 4 ) {
                         //再判斷是否可用 ：XMLHttpRequest 對象的 status 屬性爲值 200
                        if ( ajax.status === 200 ) {
                            lrc = ajax.responseText;
                            createLrcObj(lrc);
                        } else {
                           document.getElementById("lrclist").innerHTML = "<li class='on'><p>"+"暫無歌詞"+"</p></li>";
                        }
                    }
                };
                ajax.send(null);
            }
            getLRC();
            var oLRC = {
                ti: "", //歌曲名
                ar: "", //演唱者
                al: "", //專輯名
                by: "", //歌詞製作人
                offset: 0, //時間補償值，單位毫秒，用於調整歌詞整體位置
                ms: [] //歌詞數組{t:時間,c:歌詞}
            };
            function createLrcObj(lrc) {
                if (lrc.length === 0) return;
                var lrcs = lrc.split('\n');//用回車拆分成數組
                for (var i in lrcs) {//遍歷歌詞數組
                    if (lrcs.hasOwnProperty(i)) {
                        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前後空格
                        var t_lrc = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]間的內容
                        var s_text = t_lrc.split(":");//分離:號前後的文字
                        if (isNaN(parseInt(s_text[0]))) { //不是數值，基本上是歌曲名、作者等信息
                            for (var j in oLRC) {
                                if (j !== "ms" && j === s_text[0].toLowerCase()) {
                                    oLRC[j] = s_text[1];
                                }
                            }
                        } else { //是數值，基本上就是歌詞時間點
                            var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取時間字段，可能有多個
                            var start = 0;
                            for (var lrc_position in arr) {
                                if (arr.hasOwnProperty(lrc_position)) {
                                    start += arr[lrc_position].length; //計算歌詞位置
                                }
                            }
                            var content = lrcs[i].substring(start);//獲取歌詞內容
                            for (var k in arr) {
                                if (arr.hasOwnProperty(k)) {
                                    var t = arr[k].substring(1, arr[k].length - 1);//取[]間的內容
                                    var s = t.split(":");//分離:前後文字
                                    oLRC.ms.push({//對象{t:時間,c:歌詞}加入ms數組
                                        t: parseFloat(s[0].substr(0,2)) * 60 + parseFloat(s[1].substring(0,6)),//注意轉換成number格式
                                        // t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
                                        c: content
                                    });
                                }
                            }
                        }
                    }

                }
                oLRC.ms.sort(function (a, b) {//按時間順序排序
                    return a.t - b.t;
                });
                // var lrc_result = "";
                var lrcTime = [];//歌詞對應的時間數組
		        var ul = $("#lrclist")[0];//獲取ul
                for (var n in oLRC.ms) {//遍歷ms數組，把歌詞加入列表
                    // lrc_result += '<li>' + oLRC.ms[n].c + '</li>';
                    // document.getElementById("lyric").innerHTML = lrc_result;
                    ul.innerHTML += "<li><p>"+oLRC.ms[n].c+"</p></li>";//ul裏填充歌詞
                }
                // console.log(oLRC.ms[0].t); // 時間00:00.231中的0.231
                // console.log(oLRC.ms.length);
                // for(var result in oLRC){ //查看解析結果
                //     // console.log(result,":",oLRC[result]);
                // }
                for(var x=0;x< oLRC.ms.length; x++){
                    lrcTime[x] = oLRC.ms[x].t;
                }

                lrcTime[oLRC.ms.length] = lrcTime[oLRC.ms.length-1] + 3;//如不另加一個結束時間，到最後歌詞滾動不到最後一句

                var $li = $("#lrclist>li");//獲取所有li
                var currentLine = 0;//當前播放到哪一句了
                var currentTime;//當前播放的時間
                var audio = document.getElementById("audio");
                var ppxx;//保存ul的translateY值

                audio.ontimeupdate = function() {//audio時間改變事件
                    currentTime = audio.currentTime;
                    for (j=currentLine, len=lrcTime.length; j<len; j++){ // len=50
                        if (currentTime<lrcTime[j+1] && currentTime>lrcTime[j]){
                            currentLine =  j;
                            // ppxx = 250-(currentLine*32);
                            ppxx = -currentLine*32;
                            ul.style.transform = "translateY("+ppxx+"px)";
                            $li.get(currentLine-1).className="";
                            // console.log("on"+currentLine);
                            $li.get(currentLine).className="on";
                            break;
                        }
                    }
                };
                audio.onseeked = function() {//audio進度更改後事件
                    currentTime = audio.currentTime;
                    console.log("  off"+currentLine);
                    $li.get(currentLine).className="";
                    for (k=0, len=lrcTime.length; k<len; k++){
                        if (currentTime<lrcTime[k+1] && currentTime<lrcTime[k]){
                            currentLine =  k;
                            break;
                        }
                    }
                };

            }
		</script>
	</body>
</html>

效果：

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML 實現排行榜

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排行榜</title> <style type="text/cs

Joker_PL 2020-07-08 09:11:56

Dom操作延遲問題

//這個循環會導致第一句dom操作延遲1s2s this.draws=false; //顯示一個div for(var i=0;i<9999;i++){ console.log("2") } //解決方法 this.

大表哥6 2020-07-08 09:09:01

1upx border在某些手機機型上某一邊框顯示不出來解決方案

今天在做uni-app項目進行測試時，發現當邊框爲1upx時，某些框的邊顯示不全（無效）。自己某前遇到問題的手機：iPhone XS Max。展示的bug效果如下：     以上區域中，發現邊框的下邊沒有顯示出來。又是兼容問題導致的bu

Syleapn 2020-07-08 07:53:02

ES6中數組複製與合併

ES6擴展符...在數組中的應用 擴展運算符:採用...，將一個數組轉爲用逗號分隔的參數序列。即更直觀的可以稱爲展開符，eg:對let a = [1,2,3],  ...a  結果 1,2,3 將數組裏面的東西直接展開放在此處   一、

Syleapn 2020-07-08 07:15:13

HTML(超鏈接，建立錨點，建立圖像，圖像地圖)

<html> <head>  <title>超鏈接標籤</title> </head> <body>  <a href="http://syt.coolpage.biz" target="_blank">syt的窩</a><br>  <a

sysydesign 2020-07-08 06:12:45

js 彈出層

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

iteye_16047 2020-07-08 04:09:44

CSS實現button按鈕閃爍效果

最近有個奇葩需求，我們客戶要求按鈕要像星星一樣一閃一閃的！！！.......... <el-button type="success" class="flash animated infinite">按鈕</el-button> .

橘猫猫猫猫丶 2020-07-08 04:09:33

CSS＋JS實現瀏覽器不保存用戶名密碼

因爲信息安全問題，客戶要求在輸入密碼的時候，不讓瀏覽器彈出是否保存用戶名密碼的框框..... 調查發現只要將input的type指定爲password就會提示，所以想了這麼個辦法... 只試過IE11和Chrome，其他瀏覽器不知道好不好

橘猫猫猫猫丶 2020-07-08 04:09:33

時間控件資源分享

發現一個很好的網站MY97時間控件網，裏面有好多時間控件很方便開發人員根據自己的需求找到自己想要的實現，真是很感謝網站主任的貢獻！

永久前锋 2020-07-08 04:08:19

HTML超文本標記語言學習2.--層疊樣式表的使用

2018.03.27 author：wills 上一篇文章中對HTML中常見的標籤，進行了瞭解，但是僅僅只是瞭解哪些標籤是不夠的，我們如果需要對網頁進一步進行更高級的渲染，就需要用到層疊樣式表。下面是一些粗淺的層疊樣式表的用法

披星戴月观日 2020-07-08 03:15:51

dom.onclick 與 的區別

function test(){alert(this)}cc={}cc.aa=test;cc.bb=function (){test()}cc.aa(

iteye_4926 2020-07-08 03:15:00

[轉載]慎用標籤 提交表單 [IE6無法提交表單][事件衝突]

我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個

iteye_3912 2020-07-08 01:01:43

自用省市級聯及定位

省市二級級聯===========================***///初始化省級聯==============================

iteye_3912 2020-07-08 01:01:43

簡單瞭解HTML編程語言

描述性語言，描述一個頁面長啥樣。他不需要編譯，直接由瀏覽器來解析。 在idea中創建一個HTML文件，裏面有許多標籤 比如 HTML中的標籤有很多，不同標籤表示的意義也不相同。HTML最初設計出來是爲了表現一個以文本爲主的

渴望成功！ 2020-07-08 00:37:26

前端小白快速入門 之（一）HTML5 詳解

作者：浪子花夢 , 個人簡介：一個有趣的程序員 ~ 從今天開始，我將開始學習前端、ASP.NET 的一些知識，莫把假期浪費，大家一起衝！ 衝！ 衝！ 此文只針對向我一樣初學的小白，將詳細講解一些基礎且重要的HTML5 的知識

浪子花梦 2020-07-08 00:22:12