时下,网上用FLASH制作的MP3播放器随处可见,使得很多音乐网站动感十足,而关于它的制作教程也俯拾即是(当然,好的教程还是不少的,只是有更多是抄袭回来的)。
然而,这一类的播放器一直都只在动画效果方面搞创新,笔者总觉得缺少些什么。。。。。
对了!就是少了个同步的歌词播放器
自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的主页下载,也可以到下面的站点下： [url=http://www.rixiu.com/]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 OriginLyrics=new Array();//创建一个存放每行歌词的数组对象
OriginLyrics=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 originLyricsBreak=new Array();
for (var i in originLyrics) {
var originLyricsUnit = 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的分析已经完成,下一步就是要让歌词同步地显示出来。
歌词算是分析完了.当然,歌词头的信息没有分析,这些内容将在显示中被忽略,读者有兴趣的话可以自己分析,文件头的意义大概如下：
[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句歌词,这里涉及一个问题,就是该从哪句开始显示.为此定义一变量STARTPO
