FLASH打造LRC歌词播放器

2008-04-02 11:04:41来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折


  时下,网上用FLASH制作的MP3播放器随处可见,使得很多音乐网站动感十足,而关于他的制作教程也俯拾即是(当然,好的教程还是不少的,只是有更多是抄袭回来的)。

  然而,这一类的播放器一直都只在动画效果方面搞创新,笔者总觉得缺少些什么。。。。。

  对了!就是少了个同步的歌词播放器

  自WINAMP出了个迷您歌词以后,笔者一直心里痒痒的,想找个时间自己也做一个。

  其中歌词就是现在标准的WINAMP的LRC文档,从别处下载的,没作任何修改,

  就是说,这个播放器能够用于播放WINAMP格式的LRC文档。该播放器的新功能:点击歌词后能够让歌曲跳转到相应的位置。

  一个小BUG:因为采用声音流加载,所以网速慢的话,播放起来不太流畅。

  主要使用的AS技术:

  1、用XML对象的TOSTRING方法

  2、数组的常用处理方法。

  3、少量的字符串函数。

  4、声音对象的属性和事件。

  该播放器分为三部分:

  1、记录音乐文档路径的播放列表

  2、控制音乐文档播放的控制区

  3、显示歌词的歌词播放器

  前两部分是经典MP3播放器所具备的。而且笔者不得不承认自己做得不如别人,再加上相关的教程也很容易找,所以这里只介绍歌词播放部分的制作。

  因为播放歌词是跟音乐同步的,所以,制作播放器,需要三类文档:

  1、SWF格式的播放器,这是我们要做的

  2、音乐文档MP3,相信大家都能下载到吧

  3、歌词文档LRC,是WINAMP格式的歌词文档,能够到WINAMP的主页下载。

  文档准备好了,下一步就是把文档置于适当的位置。

  在里头建立两个文档夹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、每一行都是由一到几个用中括号标记的时间值及该时间要显示的歌词内容组成。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇: 更改实例的颜色和透明度

下一篇: Flash网页制作之详谈loading的制作