歌词同步的原理其实很简单:

歌词显示是一个线程, 音乐播放时一个线程,通过播放时间将歌词显示进度与播放进度同步起来。

网络标准的歌词格式是LRC。 我们看下一个LRC文档,其格式就一目了然了。

[ti:爱]

[ar:小虎队]

[al:华纳国语情浓13首]

[by:爱上你了音乐网]

[02:08.00][00:38.00]把你的心、我的心串一串

[02:11.00][00:41.00]串一株幸运草、串一?同心圆

[02:16.00][00:46.00]让所有期待未?的呼唤

[02:19.00][00:49.00]趁青春做?伴

[03:16.00][02:24.00][00:53.00]?让年轻越长大越孤单

[03:19.00][02:27.00][00:56.00]把我的幸运草种在你的梦田

[03:23.00][02:31.00][01:01.00]让地球随我?的同心圆

LRC 格式为 [歌词显示起始时间][歌词显示结束时间]歌词内容。

了解歌词同步原理,我们可以想到要做如下工作:

1. LRC 解析

2. LRC 歌词显示

3. 歌词与播放音乐同步

4. 歌词的获取

一 LRC解析

这边我推荐YOYOPlayer 音乐播放开源项目。 源代码已经非常好的支持了LRC解析。 我拿过来就用了。

过程大概如此: 把LRC文件读到内存里面,用 sentence数据结构存放。 Sentence里面有 Fromtime, Totime, content三个成员变量。显示的时候需要这些数据。

二。 LRC歌词显示

歌词的绘制通过重写 OnDraw方法。

绘制的代码贴出来:

java代码:

01
long t = tempTime;
02
int index = getNowSentenceIndex(t);
03
if (index == -1) {
04
return;
05
}
06
Sentence now = list。get(index);
07
float f = (t - now。getFromTime()) *1.0f/ (now.getToTime() - now.getFromTime());
08
if (f >0.98f) {
09
f =0.98f;
10
}
11
Shader shader =new LinearGradient(0,0,now。getContentWidth(mTxtPaint),0,new int[] { Color.RED,Color.BLUE },new float[] { f, f +0.01f },TileMode.CLAMP);
12
mTxtPaint.setShader(shader);
13
canvas.drawText(now.getContent(),0,20, mTxtPaint);

上面的代码很简单,关键一个函数是getNowSentenceIndex(t). 通过播放时间来获得歌词的索引. 我们看下getNowSentenceIndex()如何实现.   java代码:

1
private int getNowSentenceIndex(long t) {
2
for (int i =0; i < list.size(); i++) {
3
if (list.get(i).isInTime(t)) {
4
return i;
5
}
6
}
7
// throw new RuntimeException("竟然出现了找不到的情况!");
8
return -1;
9
}

还有一个歌词渐变的效果,其关键代码在与对画笔的设置,如下.   java代码:

1
Shader shader =new LinearGradient(0,0,
2
now.getContentWidth(mTxtPaint),0,new int[] { Color.RED,Color.BLUE },new float[] { f, f +0.01f },TileMode.CLAMP);
3
mTxtPaint.setShader(shader);

三. 歌词与播放音乐同步   音乐播放的时候,同时启动歌词显示线程. 将音乐播放的时间设置到歌词View的成员变量中, 以达到同步的目的.   java代码:

1
private class MyHandlerextends Handler {
2
@Override
3
public void handleMessage(Message msg) {
4
// Log.v("#################hahah", "" + mp.getCurrentPosition());
5
// 重画
6
lrcView.mLyric.setTime(mp.getCurrentPosition());
7
lrcView.invalidate();
8
}
9
}

四. 歌词的获取   歌词的获取是通过百度搜索出来的. 具体代码如下,很好看懂,关键代码如下:   java代码:

1
GetMethod get =new GetMethod("http://www.baidu.com/s?wd=" + URLEncoder.encode("filetype:lrc " + key,"GBK"));
2
get.addRequestHeader("Host","www.baidu.com");
3
get.addRequestHeader("User-Agent","Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11");
4
get.addRequestHeader("Accept","text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5");
5
get.addRequestHeader("Accept-Language","zh-cn,zh;q=0.5");
6
get.addRequestHeader("Keep-Alive","300");
7
get.addRequestHeader("Referer","http://www.baidu.com/");
8
get.addRequestHeader("Connection","keep-alive");
9
int i = http.executeMethod(get);