1. 程式人生 > >卡拉OK歌詞原理和實現高仿Android網易雲音樂

卡拉OK歌詞原理和實現高仿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網易雲音樂】課程,或者線上電子書【電子書】。