卡拉OK歌詞原理和實現高仿Android網易雲音樂

愛學啊發表於2019-01-19
Android

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

效果圖

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

圖片描述

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

什麼是卡拉OK歌詞

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

LRC歌詞格式

在實現歌詞功能前，肯定需要搞明白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網易雲音樂】課程，或者線上電子書【電子書】。

相關文章