摘要：大家好，我們是愛學啊，繼上一篇講解了歌詞原理和實現高仿網易云音樂，今天給大家帶來一篇關于卡拉歌詞原理和在上如何實現歌詞逐字滾動的效果，本文來自開發項目實戰我的云音樂課程。

大家好，我們是愛學啊，繼上一篇講解了【LRC歌詞原理和實現高仿Android網易云音樂】，今天給大家帶來一篇關于卡拉OK歌詞原理和在Android上如何實現歌詞逐字滾動的效果，本文來自【Android開發項目實戰我的云音樂】課程。

相信大家都懂一張圖勝過千言萬語。

效果和現在市面上大部分播放器差不多，當然如果要運用到商業項目中，肯定還需要進行一些優化，例如：滾動效果有彈性，字體大小，字體顏色等。

要明白什么是卡拉OK歌詞，就先要搞明白什么是卡拉OK，簡單來講就是卡拉OK是一種伴奏系統，演唱者可以在預先錄制的音樂伴奏下參與唱歌，現多叫KTV(Karaoke)；卡拉OK歌詞默認格式為ksc，當然現在市面上的一些軟件在他的基礎上做了定制，具體的在我們的課程中講解了；我們這里就講解ksc，因為卡拉OK歌詞的核心就是精確到每一個字，所以搞明白他的原理，我們也就可以在他的基礎上定制了。

在實現歌詞功能前，肯定需要搞明白ksc歌詞格式，例如：我們找了一段LRC歌詞：

karaoke := CreateKaraokeObject;
karaoke.rows := 2;
karaoke.TimeAfterAnimate := 2000;
karaoke.TimeBeforeAnimate := 4000;
karaoke.clear;
karaoke.add("00:20.699", "00:27.055", "[●●●●●●]", "7356",RGB(255,0,0));

karaoke.add("00:27.487", "00:32.068", "一時失志不免怨嘆", "347,373,1077,320,344,386,638,1096");
karaoke.add("00:33.221", "00:38.068", "一時落魄不免膽寒", "282,362,1118,296,317,395,718,1359");
karaoke.add("00:38.914", "00:42.164", "那通失去希望", "290,373,348,403,689,1147");
karaoke.add("00:42.485", "00:44.530", "每日醉茫茫", "298,346,366,352,683");
karaoke.add("00:45.273", "00:49.029", "無魂有體親像稻草人", "317,364,380,351,326,351,356,389,922");
karaoke.add("00:50.281", "00:55.585", "人生可比是海上的波浪", "628,1081,376,326,406,371,375,1045,378,318");
karaoke.add("00:56.007", "01:00.934", "有時起有時落", "303,362,1416,658,750,1438");
karaoke.add("01:02.020", "01:04.581", "好運歹運", "360,1081,360,760");
karaoke.add("01:05.283", "01:09.453", "總嘛要照起來行", "303,338,354,373,710,706,1386");
karaoke.add("01:10.979", "01:13.029", "三分天注定", "304,365,353,338,690");
karaoke.add("01:13.790", "01:15.950", "七分靠打拼", "356,337,338,421,708");
karaoke.add("01:16.339", "01:20.870", "愛拼才會贏", "325,1407,709,660,1430");

可以看到內容是用換行符分割的，如果這些數據是通過接口返回，而不是直接返回一個文件，那么這里面的換行符應該變為n換行符，這一點我們也在課程中講解到了。

每一行是一句歌詞；每一行歌詞又分為四部分：

第一部分：這一行開始時間
第二部分：這一行結束時間
第三部分：這一句歌詞
第四部分：每個字持續的毫秒

其中頂部的一些信息是元數據：不同的播放器可能實現不一樣。

查看上面的歌詞，我們可以發現有大部分的重復內容，所以可以定制。

將每行歌詞前面的時間解析后，轉為毫秒，這樣播放器在播放的時候可以獲取到播放時間，然后拿著時間查找當前時間對應哪一行歌詞，然后在查看當前時間對應該行的哪一個字，然后進行相應的繪制，具體的在可以有講解。

歌詞解析就很簡單了，就是字符串拆分，所以就不貼代碼了；但希望大家在寫代碼的時候不要只局限于功能，也要注重架構；歌詞有很多種，所以可以搞成用不同的類來解析，對外暴露統一的接口；這部分在課程中有講解。

不同的平臺也不一樣，我們這里是Android，所以繪制用Canvas。我們這里的思路是：歌詞View的高度是固定的，由于我們希望當前行歌詞始終顯示到歌詞View中間，所以先算出View的中心高度，然后在該位置繪制當前行歌詞，這一步根據不同的歌詞處理的邏輯也不一樣，但歌詞可分為兩類，一類是逐行，一類是逐字，對于逐行來說就直接繪制就行了，只是顏色，大小不一樣而已；逐字下一節講解；然后從當前行歌詞位置像前繪制歌詞，直到超出View頂部為止，在從當前行歌詞向下歌詞繪制，直到超出View底部為止；當前你可以使用LinearLayout添加所有歌詞當前容器內，然后滾動。

相對于LRC歌詞，只需要添加ksc格式格式時繪制：

if (lyric.isAccurate()) {
    //精確到字歌詞，格式可以有很多種
    //只是解析的時候不一樣，但都組成成通用的model
    //所以在歌詞View中，我們已經不需要知道是ksc，還是QQ歌詞，還是酷狗歌詞等。
    canvas.drawText(line.getLineLyrics(), x, y, backgroundTextPaint);

    if (lyricCurrentWordIndex == -1) {
        //該行已經播放完了
        lineLyricPlayedWidth = textWidth;
    } else {
        String[] lyricsWord = line.getLyricsWord();
        int[] wordDuration = line.getWordDuration();

        //獲取當前時間前面的文字
        String beforeText = line.getLineLyrics().substring(0, lyricCurrentWordIndex);
        float beforeTextWidth = getTextWidth(foregroundTextPaint, beforeText);

        //當前字
        String currentWord = lyricsWord[lyricCurrentWordIndex];
        float currentWordTextWidth = getTextWidth(foregroundTextPaint, currentWord);

        //當前字已經演唱的寬度
        float currentWordWidth = currentWordTextWidth / wordDuration[lyricCurrentWordIndex] * wordPlayedTime;

        lineLyricPlayedWidth = beforeTextWidth + currentWordWidth;
    }

    canvas.save();
    //裁剪一個矩形用來繪制已經唱的歌詞
    canvas.clipRect(x, y - textHeight, x + lineLyricPlayedWidth,
            y + textHeight);


    //這個矩形包是文字的高度+行高
    //canvas.drawRect(x, y - textHeight, x + lineLyricPlayedWidth,
    //        y + textHeight,foregroundTextPaint);

    canvas.drawText(line.getLineLyrics(), x, y, foregroundTextPaint);

    canvas.restore();
} else {
    //精確到行
}

歌詞和LRC是一樣的。

到這里歌詞View核心功能基本就實現完成了，如果要深入學習可以查看我們的【高仿Android網易云音樂】課程，或者在線電子書【電子書】。