摘要：大家好，我們是愛學(xué)啊，繼上一篇講解了歌詞原理和實(shí)現(xiàn)高仿網(wǎng)易云音樂，今天給大家?guī)硪黄P(guān)于卡拉歌詞原理和在上如何實(shí)現(xiàn)歌詞逐字滾動(dòng)的效果，本文來自開發(fā)項(xiàng)目實(shí)戰(zhàn)我的云音樂課程。

大家好，我們是愛學(xué)啊，繼上一篇講解了【LRC歌詞原理和實(shí)現(xiàn)高仿Android網(wǎng)易云音樂】，今天給大家?guī)硪黄P(guān)于卡拉OK歌詞原理和在Android上如何實(shí)現(xiàn)歌詞逐字滾動(dòng)的效果，本文來自【Android開發(fā)項(xiàng)目實(shí)戰(zhàn)我的云音樂】課程。

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

效果和現(xiàn)在市面上大部分播放器差不多，當(dāng)然如果要運(yùn)用到商業(yè)項(xiàng)目中，肯定還需要進(jìn)行一些優(yōu)化，例如：滾動(dòng)效果有彈性，字體大小，字體顏色等。

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

在實(shí)現(xiàn)歌詞功能前，肯定需要搞明白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", "一時(shí)失志不免怨嘆", "347,373,1077,320,344,386,638,1096");
karaoke.add("00:33.221", "00:38.068", "一時(shí)落魄不免膽寒", "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", "有時(shí)起有時(shí)落", "303,362,1416,658,750,1438");
karaoke.add("01:02.020", "01:04.581", "好運(yùn)歹運(yùn)", "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", "愛拼才會(huì)贏", "325,1407,709,660,1430");

可以看到內(nèi)容是用換行符分割的，如果這些數(shù)據(jù)是通過接口返回，而不是直接返回一個(gè)文件，那么這里面的換行符應(yīng)該變?yōu)閚換行符，這一點(diǎn)我們也在課程中講解到了。

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

第一部分：這一行開始時(shí)間
第二部分：這一行結(jié)束時(shí)間
第三部分：這一句歌詞
第四部分：每個(gè)字持續(xù)的毫秒

其中頂部的一些信息是元數(shù)據(jù)：不同的播放器可能實(shí)現(xiàn)不一樣。

查看上面的歌詞，我們可以發(fā)現(xiàn)有大部分的重復(fù)內(nèi)容，所以可以定制。

將每行歌詞前面的時(shí)間解析后，轉(zhuǎn)為毫秒，這樣播放器在播放的時(shí)候可以獲取到播放時(shí)間，然后拿著時(shí)間查找當(dāng)前時(shí)間對(duì)應(yīng)哪一行歌詞，然后在查看當(dāng)前時(shí)間對(duì)應(yīng)該行的哪一個(gè)字，然后進(jìn)行相應(yīng)的繪制，具體的在可以有講解。

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

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

相對(duì)于LRC歌詞，只需要添加ksc格式格式時(shí)繪制：

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

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

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

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

        //當(dāng)前字已經(jīng)演唱的寬度
        float currentWordWidth = currentWordTextWidth / wordDuration[lyricCurrentWordIndex] * wordPlayedTime;

        lineLyricPlayedWidth = beforeTextWidth + currentWordWidth;
    }

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


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

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

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

歌詞和LRC是一樣的。

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