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


爱学啊
我们是一家专注于IT职业教育的在线教育企业。目的是通过对课程质量的苛刻要求,以达到学习完我们课程的...

我们是爱学啊(寓意"爱上学习啊",全拼域名:ixuea.com);人生苦短,我们只做好课。我们不做免费课程,...

20 声望
0 粉丝
0 条评论
推荐阅读
Swift高仿iOS网易云音乐Moya+RxSwift+Kingfisher+MVC+MVVM
这是一个使用Swift(还有OC版本)语言,从0开发一个iOS平台,接近企业级的项目(我的云音乐),包含了基础内容,高级内容,项目封装,项目重构等知识;主要是使用系统功能,流行的第三方框架,第三方服务,完成接...

爱学啊阅读 762

封面图
一文搞懂秒杀系统,欢迎参与开源,提交PR,提高竞争力。早日上岸,升职加薪。
前言秒杀和高并发是面试的高频考点,也是我们做电商项目必知必会的场景。欢迎大家参与我们的开源项目,提交PR,提高竞争力。早日上岸,升职加薪。知识点详解秒杀系统架构图秒杀流程图秒杀系统设计这篇文章一万多...

王中阳Go32阅读 2.4k评论 1

封面图
计算机网络连环炮40问
本文已经收录到Github仓库,该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点,欢迎star~

程序员大彬14阅读 1.7k

万字详解,吃透 MongoDB!
MongoDB 是一个基于 分布式文件存储 的开源 NoSQL 数据库系统,由 C++ 编写的。MongoDB 提供了 面向文档 的存储方式,操作起来比较简单和容易,支持“无模式”的数据建模,可以存储比较复杂的数据类型,是一款非常...

JavaGuide8阅读 1.6k

封面图
花了半个小时基于 ChatGPT 搭建了一个微信机器人
相信大家最近被 ChatGPT 刷屏了,其实在差不多一个月前就火过一次,不会那会好像只在程序员的圈子里面火起来了,并没有被大众认知到,不知道最近是因为什么又火起来了,而且这次搞的人尽皆知。

Java极客技术12阅读 3.1k评论 3

封面图
数据结构与算法:二分查找
一、常见数据结构简单数据结构(必须理解和掌握)有序数据结构:栈、队列、链表。有序数据结构省空间(储存空间小)无序数据结构:集合、字典、散列表,无序数据结构省时间(读取时间快)复杂数据结构树、 堆图二...

白鲸鱼9阅读 5.2k

PHP转Go实践:xjson解析神器「开源工具集」
我和劲仔都是PHP转Go,身边越来越多做PHP的朋友也逐渐在用Go进行重构,重构过程中,会发现php的json解析操作(系列化与反序列化)是真的香,弱类型语言的各种隐式类型转换,很大程度的减低了程序的复杂度。

王中阳Go11阅读 2.7k评论 4

封面图

我们是爱学啊(寓意"爱上学习啊",全拼域名:ixuea.com);人生苦短,我们只做好课。我们不做免费课程,...

20 声望
0 粉丝
宣传栏