A DISTANCE THERE IS di...">
当前位置 > 文字教程 > Flash教程

做个简单的flash-MP3播放器

文章类别：Flash | 发表日期:2008-9-21 20:06:14
　　工具:FLASHMX 2004+记事本

首先,先用记事本编辑一个XML文件,内容如下:
<?xml version="1.0" encoding="GB2312"?>

<data>
<song>
<title>A DISTANCE THERE IS</title>
<name>distance.mp3</name>
</song>
<song>
<title>LOVE IN DECEMBER</title>
<name>love.mp3</name>
</song>
<song>
<title>THANK YOU</title>
<name>thanku.mp3</name>
</song>
<song>
<title>ESTRANGED</title>
<name>estranged.mp3</name>
</song>
<song>
<title>NOTHING ELSE MATTERS</title>
<name>matters.mp3</name>
</song>
<song>
<title>HELLO LITTLE STAR</title>
<name>hello.mp3</name>
</song>
<song>
<title>DAS SCHWEIGEN</title>
<name>das.mp3</name>
</song>
<song>
<title>SHEETA''''''''''''''''S DECISION</title>
<name>sheeta.mp3</name>
</song>
<song>
<title>BGM</title>
<name>bgm01.mp3</name>
</song>
<song>
<title>SHOW ME</title>
<name>showme.mp3</name>
</song>
</data>

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取得时间来定义长度和实现.其他更多的,还有待于大家的想象,要相信自己的能力,多动手的话会提高得很快的.:) （注重本教程非本人原创）
原文件如下：

点击浏览该文件





上一篇：{实例}Alert 组件实例 人气:2564
下一篇：{实例}看看我做的表，准不准 人气:3034
视频教程列表
文章教程搜索
 
Flash推荐教程
Flash热门教程