卡拉OK歌词原理和实现高仿Android网易云音乐

大家好，我们是爱学啊，继上一篇讲解了【LRC歌词原理和实现高仿Android网易云音乐】，今天给大家带来一篇关于卡拉OK歌词原理和在Android上如何实现歌词逐字滚动的效果，本文来自【Android开发项目实战我的云音乐】课程。

效果图

相信大家都懂一张图胜过千言万语。

ksc.gif

效果和现在市面上大部分播放器差不多，当然如果要运用到商业项目中，肯定还需要进行一些优化，例如：滚动效果有弹性，字体大小，字体颜色等。

什么是卡拉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网易云音乐】课程，或者在线电子书【电子书】。