卡拉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网易云音乐】课程,或者在线电子书【电子书】。
卡拉OK歌词原理和实现高仿Android网易云音乐的更多相关文章
- LRC歌词原理和实现高仿Android网易云音乐
大家好,我们是爱学啊,今天给大家带来一篇关于LRC歌词原理和在Android上如何实现歌词逐行滚动的效果,本文来自[Android开发项目实战我的云音乐]课程:逐字滚动下一篇文章讲解. 效果图 相信大 ...
- 【第二版】高仿Android网易云音乐企业级项目实战课程介绍
这是一门付费Android项目课程,我们只做付费课程:同时也感谢大家的支持. 这一节,对本课程做一个简单介绍,以及放一些项目效果图,如果想直接查看项目视频演示,可以直接在腾讯课堂查看[高仿Androi ...
- 高仿Android网易云音乐OkHttp+Retrofit+RxJava+Glide+MVC+MVVM
简介 这是一个使用Java(以后还会推出Kotlin版本)语言,从0开发一个Android平台,接近企业级的项目(我的云音乐),包含了基础内容,高级内容,项目封装,项目重构等知识:主要是使用系统功能, ...
- Swift高仿iOS网易云音乐Moya+RxSwift+Kingfisher+MVC+MVVM
效果 列文章目录 因为目录比较多,每次更新这里比较麻烦,所以推荐点击到主页,然后查看iOS Swift云音乐专栏. 目简介 这是一个使用Swift(还有OC版本)语言,从0开发一个iOS平台,接近企业 ...
- OC高仿iOS网易云音乐AFNetworking+SDWebImage+MJRefresh+MVC+MVVM
效果 因为OC版本大部分截图和Swift版本一样,所以就不再另外截图了. 列文章目录 因为目录比较多,每次更新这里比较麻烦,所以推荐点击到主页,然后查看iOS云音乐专栏. 目简介 这是一个使用OC语言 ...
- C# WPF 低仿网易云音乐(PC)歌词控件
原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music ...
- 网易云音乐 歌词制作软件 BesLyric (最新版本下载)
导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...
- Android项目实战之高仿网易云音乐项目介绍
这一节我们来讲解这个项目所用到的一些技术,以及一些实现的效果图,让大家对该项目有一个整体的认识,推荐大家收藏该文章,因为我们发布文章后会在该文章里面加入链接,这样大家找着就很方便. 目录 第1章 前期 ...
- 新鲜出炉高仿网易云音乐 APP
我的引语 晚上好,我是吴小龙同学,我的公众号「一分钟GitHub」会推荐 GitHub 上好玩的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 项目中成长是最快的,如何成长,就 ...
随机推荐
- SpringBoot入门简介(一)
1.SpringBoot简介 1.1 什么是Spring 随着动态语言的流行 (Ruby.Groovy.Scala.Node.js),Java 的开发显得格外的笨重:繁多的配置.低下的开发效率.复杂的 ...
- 自定义BufferedReader
缓冲区的建立目的就是增加传输性能,使我们传输数据更加快速 缓冲区的内部其实很简单 就是在内部封装了一个数组 用数组来存储数据 对外提供一些方法对数组进行访问 其中这些方法的操作就是对数组的指针(角标) ...
- Rancher1-简单介绍-认识rancher
认识rancher 一.简介 1.什么rancher Rancher是一个开源软件平台,使组织能够在生产中运行和管理Docker和Kubernetes.使用Rancher,组织不再需要使用一套独特的开 ...
- ThinkPHP的视图和模板
简单来说一个控制器对应一个视图,一个方法对应一个模板下面我们直接上图. 二.给模板赋值 给模板赋值在这里用到了assign()这个函数,assign()函数第一个参数为给这个值自定义名称,第二个参数则 ...
- React中autoComplete="off" 失效
Turning Off Autocomplete in Chrome with React tl;dr Add a hidden input with an arbitrary value attri ...
- 基于Java语言的IO操作(文件复制)
public static void main(String[] args) { //获取复制开始前系统时间毫秒值 long start=System.currentTimeMillis(); //文 ...
- 记录一次VMware与xshell远程链接的总结
VMware 与xshell链接 说在前面 用了一年多的virtualbox,虚拟机环境的配置算是理清了,可最近参加红帽培训,大家用的都是VMware,想想我也试试吧,刚好再熟悉一下,于是就捣鼓了很久 ...
- Vue单页面应用打包app处理返回按钮
情况 顶部返回,在header.vue公用组件中使用 this.$router.go(-1) 安卓:点击返回按钮:登录页,项目选择页,首页等几个一级页面要求提示用户是否退出app;确定,退出;取消:不 ...
- Java_零碎知识回顾
封装的理解 1.隐藏实现细节,控制对象的访问权限:对外提供公共方法: 隐藏:private 本类可见 继承的理解 ①父类有共性的属性与方法:子类只需要继承,扩展自己独有的属性方法即可,实现了代码的可复 ...
- CentOS6.8系统最小化安装
一.CentOS系统版本 CentOS-6.8-x86_64 二.安装系统 1.打开VMware主页点击创建虚拟机 2.选择镜像 3.启动虚拟机 4.键入回车键直接进行安装 5.按Tab键选择Skip ...