大家好阴绢，我們是愛學(xué)啊，繼上一篇講解了【LRC歌詞原理和實(shí)現(xiàn)高仿Android網(wǎng)易云音樂】茶鹃，今天給大家?guī)硪黄P(guān)于卡拉OK歌詞原理和在Android上如何實(shí)現(xiàn)歌詞逐字滾動的效果拇勃，本文來自【Android開發(fā)項(xiàng)目實(shí)戰(zhàn)我的云音樂】課程。
效果圖
相信大家都懂一張圖勝過千言萬語已骇。
效果和現(xiàn)在市面上大部分播放器差不多离钝，當(dāng)然如果要運(yùn)用到商業(yè)項(xiàng)目中，肯定還需要進(jìn)行一些優(yōu)化褪储，例如：滾動效果有彈性卵渴，字體大小，字體顏色等鲤竹。
什么是卡拉OK歌詞
要明白什么是卡拉OK歌詞浪读，就先要搞明白什么是卡拉OK，簡單來講就是卡拉OK是一種伴奏系統(tǒng)辛藻，演唱者可以在預(yù)先錄制的音樂伴奏下參與唱歌碘橘，現(xiàn)多叫KTV(Karaoke)；卡拉OK歌詞默認(rèn)格式為ksc吱肌，當(dāng)然現(xiàn)在市面上的一些軟件在他的基礎(chǔ)上做了定制痘拆，具體的在我們的課程中講解了；我們這里就講解ksc氮墨，因?yàn)榭ɡ璒K歌詞的核心就是精確到每一個(gè)字纺蛆，所以搞明白他的原理吐葵，我們也就可以在他的基礎(chǔ)上定制了。
LRC歌詞格式
在實(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', '愛拼才會贏', '325,1407,709,660,1430');
可以看到內(nèi)容是用換行符分割的，如果這些數(shù)據(jù)是通過接口返回识颊，而不是直接返回一個(gè)文件诚镰，那么這里面的換行符應(yīng)該變?yōu)閈n換行符，這一點(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í)間對應(yīng)哪一行歌詞，然后在查看當(dāng)前時(shí)間對應(yīng)該行的哪一個(gè)字已亥，然后進(jìn)行相應(yīng)的繪制引镊，具體的在可以有講解胸嘁。
歌詞解析
歌詞解析就很簡單了桂塞，就是字符串拆分凹蜂，所以就不貼代碼了；但希望大家在寫代碼的時(shí)候不要只局限于功能阁危，也要注重架構(gòu)玛痊；歌詞有很多種，所以可以搞成用不同的類來解析狂打，對外暴露統(tǒng)一的接口擂煞；這部分在課程中有講解。
歌詞繪制
不同的平臺也不一樣趴乡，我們這里是Android对省，所以繪制用Canvas。我們這里的思路是：歌詞View的高度是固定的浙宜，由于我們希望當(dāng)前行歌詞始終顯示到歌詞View中間官辽，所以先算出View的中心高度，然后在該位置繪制當(dāng)前行歌詞粟瞬，這一步根據(jù)不同的歌詞處理的邏輯也不一樣，但歌詞可分為兩類萤捆，一類是逐行裙品，一類是逐字俗批，對于逐行來說就直接繪制就行了，只是顏色市怎，大小不一樣而已岁忘；逐字下一節(jié)講解；然后從當(dāng)前行歌詞位置像前繪制歌詞区匠，直到超出View頂部為止干像，在從當(dāng)前行歌詞向下歌詞繪制，直到超出View底部為止驰弄；當(dāng)前你可以使用LinearLayout添加所有歌詞當(dāng)前容器內(nèi)麻汰，然后滾動。
相對于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)易云音樂】課程痛倚，或者在線電子書【電子書】弃舒。
