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

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

lrc歌詞文本中含有兩類標簽：

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

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

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

解析思路如下

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

對每行進行正則表達式匹配，如果匹配上的是時間正則表達式，則對這行進行時間邏輯處理。相應的，如果是曲作者或者演唱者或者是偏移量，則進行相對應的邏輯處理。相應的正則表達式

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

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

輸出結(jié)果為：按照時間排序之后的數(shù)組，數(shù)組每一項為以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ù)將時間將Lrclist中的每一項進行拼接成如下的格式：

   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é)點this.__ncontent下面：

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

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

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

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

當帶翻譯的歌詞滾動播放的時候，我們希望連帶翻譯歌詞一塊滾動。在這里，我是通過對解析出來的lrclist中的時間找到對應的翻譯歌詞translist中的索引，來為列表中的每一項增加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

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

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

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

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

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

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