染雾
时下,网上用FLASH制作的MP3播放器随处可见,使得很多音乐网站动感十足,而关于它的制作教程也俯拾即是(当然,好的教程还是不少的,只是有更多是抄袭回来的)，
FLASH打造LRC歌词播放器
。然而,这一类的播放器一直都只在动画效果方面搞创新,笔者总觉得缺少些什么。。。。。
对了!就是少了个同步的歌词播放器
自WINAMP出了个迷你歌词以后,笔者一直心里痒痒的,想找个时间自己也做一个。
现在做好了,大家先预览一下效果：
测试地址：download.incoo.com/blueidea/hbro/player/mp3player_x1.swf
其中歌词就是现在标准的WINAMP的LRC文件,从别处下载的,没作任何修改,
就是说,这个播放器可以用于播放WINAMP格式的LRC文件。该播放器的新功能:点击歌词后可以让歌曲跳转到相应的位置。
一个小BUG：因为采用声音流加载,所以网速慢的话,播放起来不太流畅。
主要使用的AS技术：
1、用XML对象的TOSTRING方法
2、数组的常用处理方法。
3、少量的字符串函数。
4、声音对象的属性和事件。
该播放器分为三部分：
1、记录音乐文件路径的播放列表
2、控制音乐文件播放的控制区
3、显示歌词的歌词播放器
前两部分是经典MP3播放器所具备的。而且笔者不得不承认自己做得不如别人,再加上相关的教程也很容易找,所以这里只介绍歌词播放部分的制作。
因为播放歌词是跟音乐同步的,所以,制作播放器,需要三类文件：
1、SWF格式的播放器,这是我们要做的
2、音乐文件MP3,相信大家都能下载到吧
3、歌词文件LRC,是WINAMP格式的歌词文件,可以到WINAMP的主页下载,也可以到下面的站点下：www.rixiu.com/
文件准备好了,下一步就是把文件置于适当的位置。
在里头建立两个文件夹Sound,Lyrics,和FLASH文档PLAYER.FLA.Sound文件夹放入1.MP3,Lyrics放入文件1.LRC。
下面开始制作FLASH文件：
打开刚才创建的FLASH,在主场景第一帧输入AS：
var song=new Sound();//创建加载声音的对象
song.loadSound("Sound/1.mp3",true)//以数据流的形式读取声音文件。如要事件声音,把TRUE改为FALSE;
song.start(0,1)//从头开始播放声音,循环1次。
以上是载入MP3文件的代码,下面载入的LRC文件跟其同步。
声音文件需要SOUND对象作为容器,同样,歌词文件也需要一个容器。但是FLASH没有内置的歌词对象,所以就要自己创建。
在预览图里,我们所看到的显示歌词的"列表框"就是LRC文件的容器。下面将开始创建。
在主场景里创建一个MC,命名为lyricsItems,实例名相同。
创建了这个容器后,就可以用它来做读取LRC文件的操作了。
所以,在声音加载的同时,我们可以用它来读歌词文件。
在第一帧添加AS：
song.onLoad=function(){
lyricsItems.loadLyrics("Lyrics/1.lrc")//该函数将在lyricsItems里定义。
}
进入lyricsItems的编辑区,在第一帧输入AS：
function (filepath){
}
这样就定义了读歌词的函数。
第一步,先让LRC文件读进FLASH。
也许大家会觉得奇怪,FLASH能读LRC文件吗?
大家不妨先用记事本打开LRC文件,发现它其实是个文本文档。
对于文本文档,其实FLASH的XML对象是可以读到的。
笔者曾经把一个错误的XML文件用XML对象读取,发现XML对象的很多方法都调用失败,可是TOSTRING方法却可以,返回的是跟文本文档内容一样的字符串(只有部分HTML字符发生了转义),也就是说,用XML对象可以把LRC文件全部读到FLASH里。
在loadLyrics函数里加入下面代码：
var lyrics=new XML()
lyrics.load("Lyrics/1。lrc")
lyrics.onLoad=function(){
lyricsString=lyrics.toString()
trace(lyricsString)
}
测试影片,你会发现整个文本文档被读到了lyricsString里面。
下面就是分析LRC文件的结构,从里头提取我们需要的信息。
标准歌词文件范例：
[ti:黑色幽默]
[ar:周杰伦]
[al:Jap]
[by:歌词吾爱http://www.51lrc.com]
[offset:400]
[00:02.00]词/曲:周杰伦
[00:05.49]歌词吾爱
[00:09.48]http://www.51lrc.com
[00:15.84]难过 是因为闷了很久
[00:21.18]是因为想了太多
[00:24.91]是心理起了作用
[00:30.89]你说 苦笑常常陪着你
[00:36.13]在一起有点勉强
[00:39.83]该不该现在休了我
[02:45.62][00:44.86]不想太多
[02:47.71][00:47.41]我想一定是我听错弄错搞错
[02:53.55][00:53.28]拜托 我想是你的脑袋有问题
[03:00.53][01:00.11]随便说说
[03:04.49][01:02.47]其实我早已经猜透看透不想多说
[03:12.19][01:09.94]只是我怕眼泪撑不住
[03:16.31][01:15.77]不懂 你的黑色幽默
[03:23.51][01:23.25]想通 却又再考倒我
[03:30.61][01:30.63]说散 你想很久了吧?
[03:37.92][01:37.72]我不想拆穿你
[03:46.16][01:45.85]当作 是你开的玩笑
[03:53.54][01:53.22]想通 却又再考倒我
[04:16.74][04:01.06][02:00.76]说散 你想很久了吧?
[04:23.15]我的认真败给黑色幽默
结构分析：
1、文件头是记录歌词信息的文字，下面就是时间跟歌词内容的信息了。
2、每一行都是由一到几个用中括号标记的时间值及该时间要显示的歌词内容组成。
如：[04:07.94][02:07.79]败给你的黑色幽默，代表在2分7秒79跟4分7秒94都显示"败给你的黑色幽默"这句歌词。
了解了LRC文件的结构后,就可以利用AS强大的字符串处理功能,把里头包含的一些变量值提取出来。
从范例可见：
歌词文件以行为单位,所以先把文本每行的字符串分别存于一个变量中,但是变量数目不确定,所以就把变量存于数组中。
在LOADLYRICS函数里追加代码：
var riginLyrics=new Array();//创建一个存放每行歌词的数组对象
riginLyrics=lyricsString.split(chr(10))//把字符串分析为数组,分隔符为chr(10)+chr(13)(关于这个分隔符,笔者其实还是比较模糊,笔者开始不知道歌词在换行的时候是用了回车符还是换行符.这个分隔符CHR(10)是笔者经过多次尝试后得出来的).
for (var i in originLyrics) {
if (originLyrics[i] == "") {
originLyrics.splice(i, 1);
}
}//歌词文件里可能有些行是没内容的,这些先删除,以免对后面的分析造成影响。
但是,我们还发现,有些行是多个时间,只有一句歌词.其实这是LRC的压缩格式,为了统一,我们还需要对这些压缩的部分进行"解压",使得每行的组成都是一个时间对应一句歌词。
所以,再定义一个新数组originLyricsBreak,放置解压后的歌词：
下面将以歌词"[04:07.94][02:07.79]败给你的黑色幽默"为例,解释解压歌词的代码：
var riginLyricsBreak=new Array();
for (var i in originLyrics) {
var riginLyricsUnit = originLyrics[i].split("]");//把每行处理为长度为N的数组,里头包含(N-1)个时间信息和一个歌词信息.
//例句中的歌词将分为一个长度为3的数组:三项的内容:[04:07.94,[02:07.79,和败给你的黑色幽默
for (i=0; i<=originLyricsUnit.length-2; i++) {//数组下标最大值等于(数组长度-1),这里之用originLyricsUnit.length-2,是因为要把数组的时间信息枚举出来,而最后一项是歌词信息
originLyricsBreak.unshift(originLyricsUnit[i]+"]"+originLyricsUnit[originLyricsUnit.length-1]);//往ORIGINLYRICSBREAK数组添加一个歌词项,其中包括一个时间信息和相应的歌词内容
}
//经过一次循环后,ORIGINLYRICSBREAK添加了两项:
//"[04:07.94]败给你的黑色幽默"
//"[02:07.79]败给你的黑色幽默"
}
这样所列出来的歌词时间顺序是乱的,所以先进行一下排序：
originLyricsBreak.sort();
接下来就对每行歌词进行时间和歌词内容的提取操作：定义一个数组LYRICSTEXT存放歌词内容,定义一个数组TIMESTRING存放时间。
for (var i = originLyricsBreak.length-1; i>=0; i--) {
var tempText = originLyricsBreak[i].split("]")[1]; // 在时间标记"]"的位置,把每行拆分为长度为2的数组.数组第一项为时间"[02:07.79",第二项为歌词内容"败给你的黑色幽默",在这里取第二项:歌词内容
lyricsText.unshift(tempText);//往LYRICSTEXT添加歌词内容项
var tempTimeString = originLyricsBreak[i].split("]")[0].slice(1);//取上述数组的时间信息"02:07.79",SLICE(1)把"["去掉,
timeString.unshift(tempTimeString);//并添加到时间数组.
timeValue.unshift(convertToTime(tempTimeString));//因为在TIMESTRING中,它是分:秒.毫秒的形式,不能直接运算,所以要转换为数字的形式.convertToTime是自定义函数,在下面将会介绍.
}
在LOADLYRICS函数外定义convertToTime函数:
function convertToTime(str) {
var times = str.split(":");//如果STR为02:07.79,TIMES数组则有两项:"02"和"07.79"
return parseInt(times[0])*60+parseFloat(times[1]);//结果等于2*60+7.79=127.79
}
至此,LRC的分析已经完成,下一步就是要让歌词同步地显示出来，
电脑资料
《FLASH打造LRC歌词播放器》()。歌词算是分析完了.当然,歌词头的信息没有分析,这些内容将在显示中被忽略,读者有兴趣的话可以自己分析,文件头的意义大概如下：
[ti:黑色幽默]标题为黑色幽默
[ar:周杰伦]艺术家为周杰伦
[al:Jap]专辑为JAP
[by:歌词吾爱http://www.51lrc.com]来源为歌词吾爱http://www.51lrc.com
[offset:400]笔者不太清楚,大概是缓冲时间为400毫秒吧,有错的话请指出来。
接着就是让歌词显示在MC中,在预览图的歌词显示器里,播到哪句歌词,哪句就会闪烁;点击一句歌词,音乐会跳到相应位置。这是怎么做的呢?
首先,每一行字都是一个影片剪辑实例,在库里是同一影片剪辑.该剪辑有两帧,第一帧是正常时的状态,第二帧是音乐播到该歌词时的状态。此外,影片剪辑里还有一按钮,用于点击歌词。
下面就一起做这个MC:
新建一个MC,命名为ITEMBUTTON,在该MC里做一个动态文本,变量名为caption1,
然后在文本相应的图层插入一个关键帧,改变一下文本的颜色,使音乐播放到该歌词时有变色的效果.变量名改为caption2.(本来这是多此一举的事情,但不知为什么,变量名相同的话,第二帧老是显示不出文字,所以笔者被迫这样做)。
然后新建一个图层,在该图层新建一按钮,命名为ITEMBUTTON_BUTTON
接着新建一图层,在第一帧输入AS：
stop();//以防止两个状态在开始时交替变换.
至此,显示歌词的MC单元完成了。
把该MC拖到先前创建的LYRICSITEMS剪辑中.实例名为ITEMBUTTON0,假如你需要显示N行歌词,就复制N个,最后就是有N+1个ITEMBUTTON影片剪辑,实例名分别为ITEMBUTTON1,ITEMBUTTON2,...."ITEMBUTTON"+N(为什么是N+1个,在后面会解释).把这些剪辑按顺序从上到下排列好。
当然,这也可以用DUPLICATEMOVIECLIP来实现,但是笔者的机器太慢了,导致这样运行经常出问题,在各位的机里应该不会有此问题(笔者的机:C4,1.0G,内存128MB)
在LRC列表框里,定义一个函数MOVEUP(因为歌词向上移动所以就这样命名该函数),该函数要显示的只是跟时间有关的内容,而且其它内容对歌词主体播放会有影响,主要是数据类型不统一。
因为数组是经过排序的,根据ASCII排列规则,时间集中在一个区域(前提是歌词信息也标准,即变量名不以数字开头),这区域的两头都可能有跟时间没关的信息。
所以显示前先去掉前面和后面的歌词信息。
去掉方法，定义两个变量,STARTING,ENDING,表示歌词从哪句开始显示,哪句结束.
在LYRICSITEMS添加一个函数：
function moveUp(){
var starting
var ending
for (i=0; i>=timeValue.length-1; i++) {//从时间数组的前面读起
if (!isNaN(timeValue[i])) {//读到数据类型为数字的时候
starting = i;//表示到了时间的开始
break;//退出循环
}
}
for (i=timeValue.length-1; i>=0; i--) {//从时间数组的后面读起
if (!isNaN(timeValue[i])) {//读到数据类型为数字的时候
ending = i;//表示到了时间的末端
break;//退出循环
}//第二次循环也可以从STARTING开始,不过一般来说,从STARTING开始,循环的次数要多一些,所以就从TIMEVALUE.LENGTH-1开始往上循环.
}
}
下一步,让歌词随着歌曲的播放而进行高亮显示(其实就是让相应歌词的MC跳到第二帧)
根据TIMEVALUE数组的值来定位：
比如说:下面是一段歌词：
[00:15.84]难过 是因为闷了很久
[00:21.18]是因为想了太多
[00:24.91]是心理起了作用
在15秒84和21秒18之间,第一句歌词处于高亮状态
在21秒18和24秒91之间,第二句歌词处于高亮状态
据此定义一变量TEMPPOS定位歌词.
在MOVEUP函数里追加：
var pos=_parent.song.position//获得歌曲当前的位置
for (i=starting; i<=ending; i++) {//从歌词的时间信息项开始循环
if (i == ending || pos<=timeValue[i+1]*1000) {//当歌曲的时间处在两个相邻时间值之间或者播到末尾,简单地说就是歌词时间跟歌曲时间相对应的时候
temppos = i;//获得要高亮显示的歌词的位置
break;//并退出循环
}
}
预览图中,列表所显示的是高亮歌词及其上下4句歌词,这里涉及一个问题,就是该从哪句开始显示.为此定义一变量STARTPOINT，追加代码：
var shownum=9;//显示歌词的行数,为ITEMBUTTON实例数目.
var startpoint=temppos-Math.floor(shownum/2);//该数值使高亮歌词显示在列表框中间.
for(var i=0;i<=shownum-1;i++){
this["itembutton"+i].caption1=LyricsText[i+startpoint]
this["itembutton"+i].caption2=this["itembutton"+i].caption1
}//随着歌曲的播放,重置歌词的内容.
this["itembutton"+(temppos-startpoint)].gotoAndStop(2)//让播到的歌词高亮显示
this["itembutton"+(temppos-startpoint-1)].gotoAndStop(1);//让刚才高亮的歌词恢复原来的状态
函数主要部分是这样。
让MOVEUP函数在歌曲播放时不断执行,以同步显示歌词,加入：
this.onEnterFrame=function(){
moveUp()
}
如果大家按着笔者的教程来做,现在基本的效果应该出来了.先测试一下。
怎么让歌词平滑滚动呢？
在整个容器里,只显示了SHOWNUM行歌词,所以,不可能就是简单地让歌词在播放过程中一直地上升。
我们主要是让两句歌词之间能够缓慢地上升,而不是播到相应歌词才让歌词跳动.
以以下两句歌词为例：
[00:15.84]难过 是因为闷了很久
[00:21.18]是因为想了太多
在15秒84和21秒18之间,我们让列表框的所有项目匀速移动一个列表框项目的高度.这样,当时
知道了这个原理以后,就开始写这段匀速移动的代码了。这是个初中的物理问题,解决起来应该不难。
我们主要是要求出列表框项目移动的距离△S,然后求出列表框项目的位置.这时,可能会有读者问:那不就是要设置SHOWNUM个列表框的位置吗?从上面的分析可见,所有列表框项目的△S值是相同的,所以,我们干脆控制整个列表框的位置属性。
根据匀速运动的公式,有
△S=V*△T
其中△T就是当前歌曲时间与歌词时间信息的差值,即当前时间(T-15.84).那么V怎么求呢?
我们刚才说了,在两句歌词的时间差里,我们需要移动一个列表框项目的距离S,代入上述公式,得
S=V*(21.18-15.84)
V=S/(21,18-15.84)
解出了V以后,就可以把距离跟时间的关系写出来：
△S=S/(T-15.84)*(21.18-15.84) (其中S为常数)
把该函数用于AS中：
S就是一个列表框的高度itembutton0._height,15.84就是以当前歌词位置TEMPPOS为下标的数组项的值timeValue[temppos],21,18就是当前歌词下一项的时间信息值timeValue[temppos+1],当前歌曲位置T就是歌曲位置pos/1000(因为上面设置了pos=_parent.song.duration,而duration是以毫秒为单位的,TIMEVALUE数组是以秒为单位,所以需要转换一下单位)
于是,控制列表框位置的代码就写出来了：
delta=itembutton._height*(pos/1000-timeValue[temppos])/ (timeValue[temppos+1]-timeValue[temppos]);
该代码添加在MOVEUP函数里。然后列表框的位置就等于列表框初始值减去DELTA(因为往上为负,所以是减)。
为了获得初始值,在MOVEUP函数的外面追加：
inity=_y
接着就可以在MOVEUP函数里追加：
_y=inity-delta
此时,测试影片,就可以看到平滑移动的效果了.但是,当歌词高亮显示发生改变的时候,你会看到列表框上面一项突然消失,同时下面弹出下一项.这个该怎么消除呢?
很简单,就在主场景画两块颜色跟背景颜色一样,大小跟列表框项目相同的矩形方块,一块放在列表框的上面,底线与列表框顶断对齐,另一块放在列表框下面,底线跟列表框底线对齐.这样就看不到这种突然消失的现象了。
效果是达到了,但是可能有些读者还会有疑问:要遮住上下两个项目,用遮罩不是更方便吗,为什么要这么麻烦呢?
原因在于:这样做会让被遮罩层有动态文本,这就需要嵌入字体轮廓才能显示文字,而且文字是从歌词文件那里读取的,什么字符都可能有,于是,就要为所有字符嵌入字体轮廓.也就是需要导入整个字体文件,结果就是导致文件很大(一般是几M到十多M),使得加载的时间大大增加,浏览者会等得不耐烦.所以建议读者还是不使用遮罩为佳.
接着就是制作鼠标点击控制歌词的效果了。
要实现点击歌词的跳转功能,在ITEMBUTTON按钮里添加代码：
on(release){
pos=_parent.timeValue[_name.slice(10)+_parent.startpoint] //获得被点击歌词的相应时间,其中,SLICE(10)是把ITEMBUTTON十个字符去掉,以获得被点击按钮所在的索引.
_parent._parent.song.start(pos,1) //从点击时间开始播放
gotoAndPlay(2) //表示高亮显示被点击的歌词
}
大家现在可以下载源文件了：Player.rar
不过声音文件太大,没放到压缩包里.大家可以从别处下载,或者点击：download.incoo.com/blueidea/hbro/player/mp3player_x1.swf
然后也告诉大家声音文件地址的通式：
download.incoo.com/blueidea/hbro/player/sound/歌名.mp3
声音文件下载后,解压上面的RAR文件.把它们放到SOUND文件夹下,注意声音文件名要跟歌词文件名一致喔(当然不包括扩展名).歌词文件放在LYRICS文件夹下。
