用Flash做一个自己的个性MP3播放器 -pc6资讯

您的位置：首页 → 网页设计 → Flash → 用Flash做一个自己的个性MP3播放器

用Flash做一个自己的个性MP3播放器 时间：2004/11/7 2:21:00来源：本站整理作者：蓝点我要评论(0)

　　　　　　　　　　　　

　　　　　　　　　　　　一个朋友托我做的,模仿http://www.iconsound.com里面的播放器,原来的代码太繁琐,就自己写了一个.高手们就别来笑话我了.

　　演示地址:http://www.player.com.cn/yu/ro/mp3player.htm（点击预览）

最终效果预览区（点击预览）

　　工具:FLASHMX 2004+记事本

　　首先,先用记事本编辑一个XML文件,内容如下:

A DISTANCE THERE IS
distance.mp3

LOVE IN DECEMBER
love.mp3

THANK YOU
thanku.mp3

ESTRANGED
estranged.mp3

NOTHING ELSE MATTERS
matters.mp3

HELLO LITTLE STAR
hello.mp3

DAS SCHWEIGEN
das.mp3

SHEETA'S DECISION
sheeta.mp3

BGM
bgm01.mp3

SHOW ME
showme.mp3

title是歌曲的名字,而name是mp3的文件名,以后需要修改的话就按照格式修改或添加就行了,当然也可以用ASP,PHP之类的程序来生成...由于是个简单的东西,所以没用上ID3.也算偷懒吧,呵呵,要注意文件一定要和XML放在同个目录下,否则会出错.
当然,只要不嫌麻烦的话,你也可以在FLASH里多加个MP3路径,或是本地路径什么的.

　　做好了保存成list.xml,建立个music的目录,把MP3文件和XML文件丢里面,上一级目录就放FLASH吧.

　　大家看看这个图片,作为MP3的背景图,当然你有更漂亮或需要更多功能的也可以换进去.

　　我FLASH设置的大小为320*60,就比图片稍大一点点,让我们开始写AS吧!

　　Frame 1:

　　第一步:

//定义XML和数组
var myXML = new XML();
var mp3total = new Array();
var mp3name = new Array();
var mp3 = new Array();
//定义s为声音类
var s = new Sound();
//定义MP3和XML的路径
var url = "music/";
//定义歌曲ID,也就是第几第几首
var id = 0;
//定义已播放时间,在后面的播放/暂停按钮里会用得着的
var played = 0;
//定义停止按钮参数,判断是否未停止播放,也就是说key==true时暂停按钮可以按...(好像弄反了)
var key = true;
//定义暂停按钮参数,判断是否已经暂停播放
var paused = false;

　　定义完了上面的内容后,让我们进行下一步...

　　第二步:

//定义预读函数
function preloading() {
//给preload赋予enterframe事件,preload就是进度条,后面会给大家解释...
preload.onEnterFrame = function() {
//取得MP3的总字节数和已下载字节数
var loaded = s.getBytesLoaded();
var total = s.getBytesTotal();
//进度条显示的长度,取160的原因是因为最大长度有160...-___-b
//----- qhwa 注：用_xscale可以更简单、通用些
this._width = loaded / total * 160;
if (loaded == total) {
//下载完成后删除enterframe事件
delete this.onEnterFrame;
}
};
}

　　这里相信用不着做多少解释了...做过FLASH LOADING的朋友们应该都用过,这里只不过是把影片的LOADING换成MP3的LOADING而已

现在开始第三步:

//播放声音函数
function loadsound(x) {
//把已播放时间设置为0,用处上面说过了..-___-b
played = 0;
//为暂停和停止按钮变量重新赋值
paused = false;
key = true;
//这里重复s = new Sound()是为了让声音已播放的毫秒数(position)重置为0,我找不到更好的解决办法,还望大虾们指教...
s = new Sound();
//读取MP3,url上面定义过了,是MP3的路径,x是函数里的参数,这里的x代表歌曲的MP3名,后面的true是让声音以数据流的格式播放
s.loadSound(url + x, true);
//trackname是显示歌曲名的文本框,id已经被定义为歌曲的序列号,由于是从0开始的,所以在这里要+1,总不能让第一首显示为0吧...中间冒号里的内容是隔开序列号与MP3的曲名,你可以换成自己喜欢的符号.后面的mp3name[id]就是加载进数组里的MP3歌名了,下面一个函数里会做解释
trackname = (id + 1) + ". - " + mp3name[id];
//开始播放音乐...
s.start();
//onSoundComplete的作用是声音停止播放时调用后面的函数
s.onSoundComplete = function() {
//又是个条件表达式,解释起来真烦...这东西一般是懒人才用的,比如说我...-___-b,写成if大家会容易看明白些...这里是让判断问号(?)前面的(id == mp3total.length - 1)是否成立,成立的话id赋值为0,否则id赋值为id + 1
id = (id == mp3total.length - 1) ? 0 : (id + 1);
//执行loadsound函数,也就是现在的函数再执行一次,小括号里面参数是给函数里的x赋值为mp3[id],也就是歌曲名,mp3这个数组在下面解释...
loadsound(mp3[id]);
//大括号就用不着解释了吧?
};
//mix就是在右边乱蹦乱跳的东西,现在我没办法拿到MP3各个频率的音高,只能用个假的来代替,呵呵
mix.gotoAndStop(1);
//执行preloading函数
preloading();
}

　　打了好多字哦,有点累了,写完下面的再休息

　　第四步:

//这个这个...大家还是翻翻以前的帖子或是看看帮助吧,反正在FLASH里用XML基本都会用到这两个东西
myXML.ignoreWhite = true;
System.useCodepage = true;
//XML开始读取的时候执行下面的函数
myXML.onLoad = function(success) {
if (success) {
//读取成功就开始分析XML,parseXML函数在下面解释...
parseXML();
} else {
//这个..我不说了好不好?
trace("载入失败");
}
};
//分析XML
function parseXML() {
//取得MP3的总数,关于这方面的资料大家翻翻以前的帖子或是到置顶帖里能找得到的,找不到你们问版主好了
mp3total = myXML.firstChild.childNodes;
//建立for循环
for (var i = 0; i < mp3total.length; i++) {
//把MP3的歌曲名放到mp3name的数组里
mp3name[i] = mp3total[i].childNodes[0].firstChild.nodeValue;
//和上面道理差不多,只不过这里是放mp3的文件名
mp3[i] = mp3total[i].childNodes[1].firstChild.nodeValue;
}
//.........(你就当我哑了)
play();
}
//读取XML
myXML.load(url + "list.xml");
stop();

Frame N

　　这里也就是随便第几祯都行了,你喜欢弄多长就弄多长...中间可以随便加些乱七八糟效果什么的

　　开始定义按钮...我这里一共放了四个按钮,btn1,btn2,btn3,btn4,分别是上一首,停止,播放/暂停,下一首,把它们放到合适的地方,图上画着的,看不懂画什么的多研究下其他播放器.

　　开始给它们加上鼠标事件...

　　上一首的按钮
　　btn1

btn1.onPress = function() {
//和前面一样是一个条件表达式,大家看看前面的解释
id = id == 0 ? mp3total.length - 1 : id - 1;
//好象上面也解释过了...
loadsound(mp3[id]);
};

　　停止按钮
　　btn2

btn2.onPress = function() {
//判断这个按钮是否可以按下去.呵呵,可以按的话,就执行里面的东西
if (key) {
//停止声音,不停的话也不叫停止按钮了...
s.stop();
//trackname里面显示STOP
trackname = "STOP";
//让mix停下来不乱跳
mix.gotoAndPlay(1);
//前面解释过了...
played = 0;
key = false;
s = new Sound();
}
};

　　播放/暂停按钮,也是要写最多东西的.哭~`和上面相同或类似的我就不废话了..早点写完早点睡觉
　　btn3

btn3.onPress = function() {
if (key) {
if (paused) {
//从获取已播放多少的地方开始播放,由于played的单位是毫秒,所以在这里要除以1000,后面就是循环了...
s.start(played / 1000, 1);
//略...
trackname = (id + 1) + ". - " + mp3name[id];
mix.gotoAndStop(1);
paused = false;
} else {
//给played赋值,也就是已播放了多少毫秒
played = s.position;
//略...
s.stop();
mix.gotoAndPlay(1);
trackname = "PAUSED";
paused = true;
}
} else {
loadsound(mp3[id]);
}
};

下一首按钮
　　btn4

btn4.onPress = function() {
id = id == mp3total.length - 1 ? 0 : id + 1;
loadsound(mp3[id]);
};

　　四个按钮都放上去了,如果要为播放器加个时间显示的话,那我们需要加上下面的代码...

//执行loadsound函数
loadsound(mp3[id]);
//定义几个变量
var time1 = time2 = time3 = time4 = 0;
onEnterFrame = function () {
//又是头疼的条件表达式...给大家解释一下几个命令好了...(偷懒)...position前面我应该说过了吧,除以60000也就是除以1000再除以60,为什么要这么做呢?因为时间是60进制的,把毫秒换成秒的单位后还要换成时间单位,int()是取整的意思,也就把里面的东西化成整数,当前面的条件小于10的时候,我们不能让时间这么显示吧?
//如: 12:1,所以要加个0在前面.
//duration就是歌曲的总长度了.
//百分比符号在这里的作用可不是百分比哦,是取余数的意思,如 9%5=4
//%60也就是除以60后取它的余数了,肯定不会超过60,用来做秒正合适
time1 = int(s.position / 60000) < 10 ? "0" + int(s.position / 60000) : int(s.position / 60000);
time2 = int(s.position / 1000 % 60) < 10 ? "0" + int(s.position / 1000 % 60) : int(s.position / 1000 % 60);
time3 = int(s.duration / 60000) < 10 ? "0" + int(s.duration / 60000) : int(s.duration / 60000);
time4 = int(s.duration / 1000 % 60) < 10 ? "0" + int(s.duration / 1000 % 60) :
int(s.duration / 1000 % 60);
//四个变量都好了以后,放到名为timeline的文本框里,这个文本框大家找找,就在歌曲名上面
timeline = time1 + ":" + time2 + " - " + time3 + ":" + time4;
};
stop();

　　呼...主要的东西都写完了,下面我们来处理音量条,进度条和右边乱跳的东西...

　　我们先从VOLUME开始,也就是音量控制..新建个MC,随便怎么命名都好,然后在里面写AS

　　VOLUME

//定义两个变量,l就是left的简写,t就是top了
var l = this._x;
var t = this._y;

btn.onPress = function() {
//点击的时候开始拖...这个MC,鼠标中心点定义成false,左边为l-146,因为这里的空间只有146这么宽,因为不让它上下移动,所以最高范围是t,右边也就是现在的位置定义为l,不让它超出现在的范围,最低范围也是t
startDrag(this._parent, false, l - 146, t, l, t);
};

btn.onRelease = btn.onReleaseOutside = function () {
stopDrag();
};

onEnterFrame = function () {
//给vol变量赋值,这个公式大家研究一下看看,呵呵,挺简单的
vol = (this._x - l) / 146 * 100 + 100;
//设置上一级里的声音大小
_parent.s.setVolume(vol);
};

　　完成后把它拖到主场景里就用不着管它了,不过要注意放的位置哦

　　进度条:preload
　　其实只是个灰色的MC,和上面的格子状的东西做了个MASK,主场景里的AS控制了这里的长度

频率和音高:mix
　　这只是个假的东西,因为现在FLASH还取不到音高的各种数值,随便画几个运动的MC,和上面的点阵状的东西做个MASK也就能骗骗人了,不过我们要在这里做个停止和播放时不同的动作.

　　在mix里的Frame1放上能动的MC,MC的动作在MC里完成,也就是做无规律的上下运动,看起来有点以假乱真的感觉就好,注意有动作的MC只保留在Frame1.

　　后面就用个大点的白的MC来完成吧,移动到点阵状那东西的最上方然后下降,在下降过程中渐变成红色就OK.

　　最后把这个东西拖到主场景合适的位置里,命名为mix就完成工作了.

　　现在大家可以试试这个播放器的效果,也可以结合其他的素材等做出更漂亮的播放器来.需要更强大功能的话大家要研究一下哦,比如在FLASH里自由添加删除歌曲的功能,就是用合适的事件来增减各个数组里的东西和进行排序就OK了,拖动进度就是用position和duration取得时间来定义长度和实现.其他更多的,还有待于大家的想象,要相信自己的能力,多动手的话会提高得很快的.:)

　　教程还有很多不足的地方,还望大虾们指正...欢迎提出问题,呵呵

　　有兴趣交流经验的朋友可以进我的QQ群组讨论:106538