卡拉OK歌词原理和实现高仿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核心功能基本就实现完成了，如果要深入学习可以查看我们的【】课程，或者在线电子书【】。