ActionScript3.0编写的可读取歌词的音乐播放器

最近用ActionScript3.0制作了一款音乐播放器，功能还需完善，这里做一下简单的讲解。

出于个人习惯，程序没有做文档类，虽然在编程的角度，这种形式看起来非常易于操作，但对于精于外观的Flash制作，还欠缺了一些直观。

在文档的结尾处你可以找到本程序的源文件，希望对你有所帮助。

首先我们要理清思路，这个音乐播放器可以同步歌词，并且根据用户点选的按钮来播放需要的音乐。我准备了两首歌：《青花瓷》和《viva la vida》

开始制作。

我们来导入需要的类：

import flash.media.Sound;

import flash.media.SoundChannel;

import flash.media.SoundCodec;

import flash.media.SoundTransform;

import flash.net.URLRequest;

import flash.net.URLLoader;

import flash.events.Event;

import flash.system.System;

import flash.events.MouseEvent;

import flash.display.Loader;

然后,我们要声明一堆非常有用的东东,这里看起来有点乱.

 

gundong.alpha = 0;//滚动歌词的影片剪辑开始的时候是隐身的.

var he:String = "";//传给歌词读取函数的歌曲名称信号.

var gundongx:Number = 0;//这个数值实时反应了滚动歌词应该待在哪个位置.

var hex:String = "";//传给信息收集函数的歌曲名称信号.

var i:int = 0;//各种循环要用到的序列号.

var tingxialai:int = 0;//换歌的时候为了停下前一首歌的所有循环而定义的这个数值.

 

var snd:Sound;//创建一个音乐空实例.

var kongzhi:SoundChannel = new SoundChannel();//创建一个音乐控制器.

 

我们来创建两个按钮，实例名称为sound1、sound2，然后添加监听器：

 

sound1.addEventListener(MouseEvent.CLICK,gex);

sound2.addEventListener(MouseEvent.CLICK,gex);

 

点击任意按钮都会触发gex函数,这就是信息收集函数.

 

function gex(e:MouseEvent):void{

switch(e.currentTarget.name){

case "sound1":

hex = "青花瓷";

gundongx = 0;

gundong.ci.y = 0;//这个0怎么来的呢,看下文.

duquxinxi();

break;

case "sound2":

hex = "Viva La Vida";

gundongx = -1292;

gundong.ci.y = -1292;//这个数字的产生也需要在后面才能说明.

duquxinxi();

break;

}

}

 

 

function duquxinxi(){

if(snd != null){kongzhi.stop();gundong.alpha = 0;tingxialai = 1;}

snd = new Sound();

var textload:URLLoader = new URLLoader();

var url:URLRequest = new URLRequest("lrc/"+ hex +".txt");//读取了歌词文件地址.

var urlx:URLRequest = new URLRequest("mp3/" + hex +".mp3")//读取了歌曲文件地址

textload.addEventListener(Event.COMPLETE,duqu);

textload.load(url);

snd.load(urlx);

 

 

}

 

 

接着就是歌词读取函数了:

 

 

function duqu(e:Event):void{

 

gundong.alpha = 0;

he = hex;//接收了要播放的歌曲名称.

var a:int = 0;

var b:int = 0;

var c:int = 0;

 

var wenben:String =new String();//新建一个接纳歌词信息的字符串.

var shijian:Array = new Array();//这个数组储存着所有时间信息.

var geci:Array = new Array();//所有歌词信息存在这里.

var qing:Array = new Array();//计算后得到的时间信息连同歌词会显示到这里.

var geciyuan:Array = new Array();

var yunzai:Array = new Array();//运载有两个以上时间的临时储存数组.

 

 

System.useCodePage = true; //强制实现Flash Player使用运行Flash Player的操作系统的传统代码页来解释外部文件,实现中文显示.

wenben = URLLoader(e.target).data as String;

geciyuan = wenben.split("\n");//用回车当做信号分割歌词,存在歌词原数组中.

System.useCodePage = false;

 

 

 

//开始转换歌词.

for(i = 0;i<geciyuan.length;i++){//这个循环首先判断歌词前边的时间是两层还是一层,如果是一层,则读取时间和歌词.如果是两层,则分别读取两个时间并读取两遍歌词.

var guo:String = geciyuan[i];

var zhengze:RegExp = /\[\d\d:\d\d\.\d\d\]/g;//使用正则表达式

var chongfu:int = guo.match(zhengze).length;

yunzai = guo.match(zhengze);

switch(chongfu){

case 1:

geci.push(guo.substr(chongfu*10));shijian.push(yunzai[0]);

break;

case 2:

geci.push(guo.substr(chongfu*10));geci.push(guo.substr(chongfu*10));shijian.push(yunzai[0]);shijian.push(yunzai[1]);

break;

case 3:

geci.push(guo.substr(chongfu*10));geci.push(guo.substr(chongfu*10));geci.push(guo.substr(chongfu*10));shijian.push(yunzai[0]);shijian.push(yunzai[1]);shijian.push(yunzai[3]);

break;

}

}

 

for(i = 0;i<shijian.length;i++){//本循环将音乐信息计算成电脑可以识别的毫秒单位,一秒等于一千毫秒.

guo = shijian[i];

a = int(guo.slice(1,3));b = int(guo.slice(4,6));c = int(guo.slice(7,9));

shijian[i] =  (a*60*1000) + (b*1000) +c*10

}

 

for(i = 0;i<shijian.length;i++){//利用数组的标签功能将数字和歌词分别标注后添加到qing数组.

qing.push({timer:shijian[i],ci:geci[i]});

}

 

qing.sortOn("timer",Array.NUMERIC);//需要将歌词按照时间顺序排列,用到了sortOn的降序排列法.

 

 

addEventListener(Event.ENTER_FRAME, onEnterFrame);

 

kongzhi = snd.play();

 

i=1;

function onEnterFrame(event:Event):void {

if(tingxialai == 1){removeEventListener(Event.ENTER_FRAME, onEnterFrame);tingxialai = 0;}

if(i == 2){gundong.alpha += (1-gundong.alpha)*0.2;}//从第一句开始显示歌词.

gundong.ci.y +=(gundongx - gundong.ci.y)*0.2;//实时更新滚动歌词的位置.

for (i = 1,a = shijian.length; i < a; i++) {

if (kongzhi.position < qing[i].timer) {

if(he != qing[i-1].ci){he = qing[i-1].ci;gundongx -= 21;break;}

else{break;}

}

if(i == shijian.length-1){gundong.alpha = (0-gundong.alpha)*0.2;gundong.ci.y = 0;}

}

 

}

 

//end

}

 

 

在我们的场景上,还要创建一个影片剪辑,实例名称为gundong.分为两层,一层用渐变工具制作成如下效果:颜色很深的地方就是正演唱的那句歌词.

新建一层,将歌词文件放在渐变色块上方,像这样:第一句要放在播放位置.

记录一下第一句歌词的位置,这里第一句歌词的纵向位置正好是0.我们要关注Y值.这个值被写入了信息收集函数.

在歌词文本里我们还要添加第二首歌的歌词,同样要记录一下第一句歌词的位置 -1292.

 

好了,将歌词文本也转换成影片剪辑,命名为ci.

 

将歌词的层设置为遮罩,就会看到这样的效果:

 

最后附上全部源文件：
点击下载