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

bluesky 发布于2019-08-16 13:27 / 1388人阅读

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

大家好，我们是爱学啊，继上一篇讲解了【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网易云音乐】课程，或者在线电子书【电子书】。

混合云专线服务网易云音乐网易云音乐解析 js带歌词音乐播放器网易云音乐下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/71785.html

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

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

blair 2019-06-25 12:25 评论0 收藏0
LRC歌词原理和实现高仿Android网易云音乐

摘要：大家好，我们是爱学啊，今天给大家带来一篇关于歌词原理和在上如何实现歌词逐行滚动的效果，本文来自开发项目实战我的云音乐课程逐字滚动下一篇文章讲解。歌词解析不同的语言语法不一样，我们这里先说思路，我们的实现是语言。大家好，我们是爱学啊，今天给大家带来一篇关于LRC歌词原理和在Android上如何实现歌词逐行滚动的效果，本文来自【Android开发项目实战我的云音乐】课程；逐字滚动下一篇文...

megatron 2019-06-25 12:24 评论0 收藏0
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...

RaoMeng 2019-08-20 14:26 评论0 收藏0
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...

array_huang 2019-08-05 10:47 评论0 收藏0
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...

sean 2019-08-30 15:52 评论0 收藏0