自定义View强势来袭，用自定义View实现歌词显示控件上篇之实现歌词文件解析
qlong8807
8年前
<p style="text-align: center;"><img src="https://simg.open-open.com/show/a69a1af66b9fd0a96207a96587124539.jpg"></p> <p>这次我要向大家分享的是一个歌词控件，其实，也是我毕业设计中的一部分。起初我是用ScrollView嵌套TextView，再结合我的上一篇文章SpannableString来实现的，Demo其实我早早地就将放在github上，不知道有没有朋友有留心看到，但是总感觉用着不是很流畅，而且不容易加入一些自定义内容，所以一直不好下笔，也不好向大家分享Demo。不过，有兴趣的朋友可以看一下 <a href="/misc/goto?guid=4959713712372053057" rel="nofollow,noindex">（下载地址）</a> ，个人感觉还是挺有创意的，嘻嘻！（害羞脸~）。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/6c1858c54e9d53970d3de437151b00d1.gif"></p> <p>用ScrollView嵌套TextView实现LyricView效果图</p> <p>效果图是旧版本哦，记住，是旧版本！ 通过自定义View实现的"进阶版"LyricView功能更强大，体验效果更佳，能够实现歌词滑动查看，当前播放位置高亮显示，滑动到指定位置并播放等等，总的来说，大致和网易云音乐的歌词显示效果一样。</p> <p>考虑到歌词显示控件涉及到歌词解析，自定义控件的实现等等诸多方面，可能文章的篇幅上会比较冗长，同时也为了方便"简友"们能够根据自己的需求和爱好各取所需。我也就仿着我之前写的文章 <a href="/misc/goto?guid=4959713712470389309" rel="nofollow,noindex">《像360悬浮窗那样，用WindowManager实现炫酷的悬浮迷你音乐盒》</a> 那样，将"用自定义View实现歌词显示控件"这篇文章也分成上、下两篇，分别是 <a href="/misc/goto?guid=4959713712561212865" rel="nofollow,noindex">《用自定义View实现歌词显示控件上篇之实现歌词文件解析》</a> 和《用自定义View实现歌词显示控件下篇之自定义LyricView的实现》。而今天将要分享的是上篇，主要讲解关于*.lrc文件的解析，内容偏理论，所以本章最后我也不会附上Demo，至于下篇我会尽快整理分享出来，届时上下篇的Demo我会整合在一起共享出来。好吧，进入正题：</p> <h2><strong>首先，了解歌词文件的组成</strong></h2> <p>写过音乐播放器的朋友也应该都会去了解过歌词文件的规范格式，既然是歌词显示控件，就必然需要好好了解歌词文件的组成规范，才能准确无误的解析歌词文件，获得与我有用的信息。</p> <pre> [ti:一个人的北京] [ar:好妹妹乐队] [al:南北] [by:] [offset:0] [00:00.10]一个人的北京 - 好妹妹乐队 [00:00.20]词：秦昊 [00:00.30]曲：秦昊 [00:00.40] [00:30.16]你有多久没有看到 满天的繁星 [00:37.34]城市夜晚虚伪的光明 遮住你的眼睛 [00:44.40]连周末的电影 也变得不再有趣 [00:51.71]疲惫的日子里 有太多的问题 [00:59.21] [01:00.96]你有多久单身一人 不再去旅行 [01:08.20]习惯下班回到家里 冷冰冰的空气 [01:15.58]爱情这东西 你已经不再有勇气 [01:22.64]情歌有多动听 你就有多怀疑 [01:30.60]许多人来来去去 相聚又别离 [01:38.29]也有人喝醉哭泣 在一个人的北京 [01:45.16]也许我成功失意 慢慢的老去 [01:52.76]能不能让我留下片刻的回忆 [01:58.95] [01:59.67]许多人来来去去 相聚又别离 [02:07.23]也有人匆匆逃离 这一个人的北京 [02:14.30]也许有一天我们 一起离开这里 [02:21.86]离开了这里 在晴朗的天气 [02:28.38] [02:58.98]你有多久单身一人 不再去旅行 [03:06.36]习惯下班回到家里 冷冰冰的空气 [03:13.55]爱情这东西 你已经不再有勇气 [03:20.69]情歌有多动听 你就有多怀疑 [03:28.53]许多人来来去去 相聚又别离 [03:36.22]也有人喝醉哭泣 在一个人的北京 [03:43.28]也许我成功失意 慢慢的老去 [03:50.82]能不能让我留下片刻的回忆 [03:57.64]许多人来来去去 相聚又别离 [04:05.25]也有人匆匆逃离 这一个人的北京 [04:12.31]也许有一天我们 一起离开这里 [04:19.88]离开了这里 在晴朗的天气 [04:26.62]许多人来来去去 相聚又别离 [04:34.24]也有人匆匆逃离 这一个人的北京 [04:41.37]也许有一天我们 一起离开这里 [04:48.87]离开了这里 在晴朗的天气 [04:55.08] [04:56.27]让我拥抱你 在晴朗的天气</pre> <p>这如上述文本显示，是我在QQ音乐中下载的歌词文件，并用文本方式打开看到的一个结果。其实，所有歌词文件（*.lrc）都是以一个标准来进行制作的，就如同上述文件一样由以"[ti:"开头的标题、以"[ar:"开头的歌手、以"[al:"开头的专辑、以"[by:"开头的制作、以"[offset:"开头的时间偏移量和以"[mm:ss.ms]"开头的歌词信息组成，歌词信息则是由开始时间（分：秒.毫秒）和歌词内容两部分组成。</p> <h2><strong>接着，解析歌词文件</strong></h2> <p>既然了解了歌词文件的组成部分，那么解析歌词文件也就不是一件困难的事情了，就是简单的文件内容读取：首先获取*.lrc歌词文件的二进制流InputStream，再又转换成字符流（注意：转化成字符流的时候需要选择编码，经过我多次尝试，发现好像QQ音乐的歌词文件需要用"GBK"解码，也不清楚会不会有具体的判别方式，有了解的朋友希望可以在留言区和大伙儿分享），然后再调用BufferedReader的readLine()方法逐行读取文件内容，就能获得文件内容了，在这里有一点需要注意的是，各种流在使用结束后一定要调用close()方法关闭。下面就是实现歌词文件的解析工作：</p> <p>首先，需要准备两个类主要用于歌词解析结果的缓存：LyricInfo（歌词信息：包含标题、歌手、专辑等等）和LineInfo（歌词行信息：包含行开始时间和歌词行内容）：</p> <p>LyricInfo 歌词文件信息</p> <pre> class LyricInfo { List<LineInfo> song_lines; String song_artist; // 歌手 String song_title; // 标题 String song_album; // 专辑 long song_offset; // 偏移量 }</pre> <p>LineInfo 歌词行信息</p> <pre> class LineInfo { String content; // 歌词内容 long start; // 开始时间 }</pre> <p>解析歌词文件源码</p> <pre> /** * 初始化歌词信息 * @param inputStream 歌词文件的流信息 * */ private void setupLyricResource(InputStream inputStream, String charsetName) { if(inputStream != null) { try { LyricInfo lyricInfo = new LyricInfo(); lyricInfo.song_lines = new ArrayList<>(); InputStreamReader inputStreamReader = new InputStreamReader(inputStream, charsetName); BufferedReader reader = new BufferedReader(inputStreamReader); String line = null; while((line = reader.readLine()) != null) { analyzeLyric(lyricInfo, line); } reader.close(); inputStream.close(); inputStreamReader.close(); } catch (IOException e) { e.printStackTrace(); } } } /** * 逐行解析歌词内容 * */ private void analyzeLyric(LyricInfo lyricInfo, String line) { int index = line.lastIndexOf("]"); if(line != null && line.startsWith("[offset:")) { // 时间偏移量 String string = line.substring(8, index).trim(); lyricInfo.song_offset = Long.parseLong(string); return; } if(line != null && line.startsWith("[ti:")) { // title 标题 String string = line.substring(4, index).trim(); lyricInfo.song_title = string; return; } if(line != null && line.startsWith("[ar:")) { // artist 作者 String string = line.substring(4, index).trim(); lyricInfo.song_artist = string; return; } if(line != null && line.startsWith("[al:")) { // album 所属专辑 String string = line.substring(4, index).trim(); lyricInfo.song_album = string; return; } if(line != null && line.startsWith("[by:")) { return; } if(line != null && index == 9 && line.trim().length() > 10) { // 歌词内容 LineInfo lineInfo = new LineInfo(); lineInfo.content = line.substring(10, line.length()); lineInfo.start = measureStartTimeMillis(line.substring(0, 10)); lyricInfo.song_lines.add(lineInfo); } } /** * 从字符串中获得时间值 * */ private long measureStartTimeMillis(String str) { long minute = Long.parseLong(str.substring(1, 3)); long second = Long.parseLong(str.substring(4, 6)); long millisecond = Long.parseLong(str.substring(7, 9)); return millisecond + second * 1000 + minute * 60 * 1000; }</pre> <h2><strong>最后，验证解析效果</strong></h2> <p>完成歌词解析，接下来就是验证歌词解析的一个实际效果的时候了：</p> <pre> File file = new File(Constant.lyricPath + "一个人的北京 - 好妹妹乐队.lrc"); if (file != null && file.exists()) { try { setupLyricResource(new FileInputStream(file), "GBK"); StringBuffer stringBuffer = new StringBuffer(); if(lyricInfo != null && lyricInfo.song_lines != null) { int size = lyricInfo.song_lines.size(); for (int i = 0; i < size; i ++) { stringBuffer.append(lyricInfo.song_lines.get(i).content + "\n"); } textView.setText(stringBuffer.toString()); } } catch (FileNotFoundException e) { e.printStackTrace(); } }</pre> <p><img src="https://simg.open-open.com/show/07bc101b66a2c3158de49448e195b2d0.jpg"></p> <p style="text-align: center;">歌词解析效果图</p> <p>关于歌词解析的内容到这里就结束了。</p> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/7b6a42deff27</p> <p> </p>