| AI教程 | Flash教程 | Fireworks教程 | Painter教程 | CDR教程 | CAD教程 | 3Dmax教程 | Maya教程 | 摄影技巧 | 广告文案 | LOGO案例 | PS教程

FLASH打造LRC歌词播放器

  时下,网上用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的主页下载,也可以到下面的站点下: http://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文件的结构,从里头提取我们需要的信息。

主题测试文章,只做测试使用。发布者:绘画吧,转转请注明出处:http://www.huitu8.com/shejijiaocheng/Flashjiaocheng/20190830/93927.html



联系我们

在线咨询:点击这里给我发消息

邮件: