FLASH打造LRC歌词播放器 FLASH打造LRC歌词播放器(1)

作者：HBrO   类型:闪吧BBS   来源:闪吧

  • 第1页 FLASH打造LRC歌词播放器(1)
  • 第2页 FLASH打造LRC歌词播放器(2)
    • 　　

    (参与闪吧论坛此文讨论)
    时下,网上用FLASH制作的MP3播放器随处可见,使得很多音乐网站动感十足,而关于它的制作教程也俯拾即是(当然,好的教程还是不少的,只是有更多是抄袭回来的)。
    然而,这一类的播放器一直都只在动画效果方面搞创新,笔者总觉得缺少些什么。。。。。
    对了!就是少了个同步的歌词播放器
    自WINAMP出了个迷你歌词以后,笔者一直心里痒痒的,想找个时间自己也做一个。
    现在做好了,大家先预览一下效果：
    测试地址：asp5.6to23.com/7years/yiyuan7years/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 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的分析已经完成,下一步就是要让歌词同步地显示出来。

  • 1
  • 2
    •    责任编辑:uufeng    时间:2006年1月10日
    • 最近更新
    查看所有评论