摘要：以為擴(kuò)展名的歌詞文件可以在各類數(shù)碼播放器中同步顯示。這是用于總體調(diào)整顯示快慢的，但多數(shù)的可能不會支持這種標(biāo)簽。如何實(shí)現(xiàn)歌詞的解析解析思路如下根據(jù)字符串，通過換行符分成數(shù)組的每一項(xiàng)。相應(yīng)的正則表達(dá)式以為例，統(tǒng)一解析成以秒為單位的秒。

lrc是英文lyric（歌詞）的縮寫，被用做歌詞文件的擴(kuò)展名。以lrc為擴(kuò)展名的歌詞文件可以在各類數(shù)碼播放器中同步顯示。LRC 歌詞是一種包含著“:”形式的“標(biāo)簽(tag)”的、基于純文本的歌詞專用格式。這種歌詞文件既可以用來實(shí)現(xiàn)卡拉OK功能（需要專門程序），又能以普通的文字處理軟件查看、編輯。當(dāng)然，實(shí)際操作時(shí)通常是用專門的LRC歌詞編輯軟件進(jìn)行高效編輯的。

lrc歌詞文本中含有兩類標(biāo)簽：

一是標(biāo)識標(biāo)簽，其格式為“[標(biāo)識名:值]”主要包含以下預(yù)定義的標(biāo)簽：

    [ar:藝人名]
    [ti:曲名]
    [al:專輯名]
    [by:編者（指編輯LRC歌詞的人）]
    [offset:時(shí)間補(bǔ)償值] 其單位是毫秒，正值表示整體提前，負(fù)值相反。這是用于總體調(diào)整顯示快慢的，(但多數(shù)的MP3可能不會支持這種標(biāo)簽）。

二是時(shí)間標(biāo)簽，形式為“[mm:ss]”或“[mm:ss.ff]”(分鐘數(shù):秒數(shù).毫秒數(shù))，時(shí)間標(biāo)簽需位于某行歌詞中的句首部分，一行歌詞可以包含多個時(shí)間標(biāo)簽(比如歌詞中的迭句部分)。當(dāng)歌曲播放到達(dá)某一時(shí)間點(diǎn)時(shí)，MP3就會尋找對應(yīng)的時(shí)間標(biāo)簽并顯示標(biāo)簽后面的歌詞文本，這樣就完成了“歌詞同步”的功能。
形式為"[mm:ss]"（分鐘數(shù):秒數(shù)）或"[mm:ss.ff]"。數(shù)字須為非負(fù)整數(shù)， 比如"[12:34.50]"是有效的，而"[0x0C:-34.50]"無效。標(biāo)簽無須排序。

解析思路如下

根據(jù)lrc字符串，通過換行符分成數(shù)組的每一項(xiàng)。

對每行進(jìn)行正則表達(dá)式匹配，如果匹配上的是時(shí)間正則表達(dá)式，則對這行進(jìn)行時(shí)間邏輯處理。相應(yīng)的，如果是曲作者或者演唱者或者是偏移量，則進(jìn)行相對應(yīng)的邏輯處理。相應(yīng)的正則表達(dá)式

    _regAr = /[ar:(.+)]/, 
    _regTi = /[ti:(.+)]/,
    _regAl = /[al:(.+)]/,
    _regBy = /[by:(.+)]/,
    _regOffset = /[offset:.+]/,
    _regTime = /[d+:d+(.d+)?]/g,
    

以[01:10.50]為例，統(tǒng)一解析成以秒為單位的70.5秒。轉(zhuǎn)換成這樣是為了讓時(shí)間的表示更簡潔，但是在進(jìn)行顯示和存儲歌詞之前還需提供一個format函數(shù)將時(shí)間計(jì)算回去。

輸出結(jié)果為：按照時(shí)間排序之后的數(shù)組，數(shù)組每一項(xiàng)為以time,和txt為key的對象。Lrclist如下的格式

   0: Object
   time: 9.841
   txt: "It"s been a long day without you my friend"
   1: Object
   time: 16.8
   txt: "And I"ll tell you all about it when

如果需要歌詞的Lrctxt文本，就可以借助format函數(shù)將時(shí)間將Lrclist中的每一項(xiàng)進(jìn)行拼接成如下的格式：

   0: "[00:09.841]It"s been a long day without you my friend"
   1: "[00:16.800]And I"ll tell you all about it when I see you again"
   2: "[00:22.600]We"ve come a long way from where we began"

滾動歌詞的界面是將內(nèi)容插入到播放父節(jié)點(diǎn)this.__ncontent下面：

        _u._$forEach(Lrclist,function(_item){
            _lines.push("
"+_item.txt+"
");
        }
        this.__ncontent.innerHTML = _lines.join("");

當(dāng)歌曲在播放的過程中，根據(jù)播放的時(shí)間_time，從后向前依次對比時(shí)間，找到對應(yīng)的index記錄為currnetplay，通過更改樣式，表示是當(dāng)前播放的歌詞。

而滾動的效果可以通過整體改變margin-top來實(shí)現(xiàn)滾動的效果。在項(xiàng)目中簡化處理是直接設(shè)置li個父節(jié)點(diǎn)top為播放父節(jié)點(diǎn)的height/2-li的行高。

這里存在一個問題，如果一行歌詞特別長，顯示的時(shí)候進(jìn)行了換行，那么這個距離計(jì)算的就會有問題。當(dāng)然，一種是通過js計(jì)算出幾行；另外是加個橫向的滾動條，丑是丑了點(diǎn)，確實(shí)是比較簡單的處理了。

當(dāng)帶翻譯的歌詞滾動播放的時(shí)候，我們希望連帶翻譯歌詞一塊滾動。在這里，我是通過對解析出來的lrclist中的時(shí)間找到對應(yīng)的翻譯歌詞translist中的索引，來為列表中的每一項(xiàng)增加key為transtxt的內(nèi)容：

            _u._$forEach(_list, function(_item){
                var _index = _u._$indexOf(_translist, function(_item0){
                    return _item0.time==_item.time;
                });
                if(_index!=-1){
                    var _trans = _translist[_index];
                }
                if(_trans){
                    _item.transtxt = _trans.txt||"";
                }
            });

這樣解析出來的歌詞對象就變成：

            0: Object
                time: 9.841
                transtxt: "沒有老友你的陪伴 日子真是漫長"
                txt: "It"s been a long day without you my

滾動時(shí)候的顯示規(guī)則同上，只不過在滾動時(shí)，top值要減去 2*li 的行高了。

在滾動播放的過程中，常常希望根據(jù)播放的效果對歌詞進(jìn)行整體的，或者當(dāng)前句的微調(diào)。
這些需求就是直接操作歌詞的時(shí)間軸了。

整體偏移一個offset就是將解析出來的lrclist中的每一item中的時(shí)間加/減一個offset，通常微調(diào)的話，毫秒級別了。

當(dāng)前句偏移，關(guān)鍵是找到currentplay，這個在前面已經(jīng)介紹了。

之后偏移，也是找到currentplay,將該索引之后的item的時(shí)間加/減一個偏移量。

菜鳥一枚，希望自己能將寫博客的習(xí)慣養(yǎng)成，并發(fā)揚(yáng)光大。嗯嗯。。自勉。。。