利用flash组件制作mp3播放器,Flash实例

mediaplayback是flash2004中的组件之一，7.02将其功能有所强化，因此建议你将flash升级到7.2后再继续下面的步骤。
升级参考：more.asp?name=kinghill&id=267

开始，我们制作一个简单的播放器，只播放一首歌曲，然后循环播放。
拖放一个mediaplayback到场景，并将它命名为“musicplayer”。（如果组件窗口没有打开，请在窗口菜单中找到相应菜单并选择它）修改mediaplayback组件的尺寸，因为我们这里不播放视频，所以只要设为300*86就够了，打开组件检查器面板，将control visibility 设置为on,始终打开，播放类型默认为flv,将它设置为mp3。

修改场景的尺寸，只要能容纳mediaplayback就可以了，保存到计算机的硬盘上某个目录，顺便拷贝一首mp3到这个目录，如music.mp3,需要注意的是mediaplayback并不支持某些非标准的mp3格式文件，所以一旦播放器不能播放你的mp3文件，你应该首先考虑换一个mp3试一试。

在组件检查器的url栏内添上mp3文件的名称或地址，这里添上music.mp3就可以了。

发布预览，是不是可以播放了，但是有个缺陷，只能播放一遍就停止了。

实现循环播放，我们只要在场景的第一桢上填写下面的as就可以了。

myListener = new Object();
myListener.complete = function() {

musicplayer.stop();
musicplayer.play();
}
musicplayer.addEventListener("complete", myListener);

这里设置了一个监听，如果musicplayer播放完毕，则执行：
musicplayer.stop();
musicplayer.play();
添加了一个musicplayer.stop();语句是为了解决mediaplayback的一个小bug,你可以去调这一句看看。

下面是本部分的截图，注意画红线的部分。

上面我们利用组件制作了一个可以循环播放的mp3播放器，但这不是我们的终点，离我们的要求还很远。

打开上次制作的文件，点击实例名为：musicplayer的mediaplayback组件，并打开组件检查器，我们上次在url栏填写了播放歌曲的名字（或路径），举例中用的是：music.mp3,这里控制着mediaplayback组件播放的内容，假设我们使用as来控制这个栏内的内容，就可以实现随时切换播放的歌曲。

做个测试：我们把上次在url内的内容去掉，也就是让url栏什么都不添，发布测试看看，是不是放不出来声音？点击时间轴的第一桢，在原来的as的最顶上添加一行as,内容这样写：

musicplayer.contentPath="music.mp3"

解释：

//mediaplayback实例名.contentPath="歌曲播放的地址"。

现在发布测试一下，是不是和原来一样能播放歌曲了？原来mediaplayback组件使用contentPath来记录播放内容的地址。

看看Flash的帮助，看软件的帮助是一个良好的养成习惯，帮助是这样的：

---------------------------------

Media.contentPath适用于
MediaController

可用性
Flash Player 7。

版本
Flash MX Professional 2004。

用法
myMedia.contentPath

描述
属性；一个字符串，保存要进行流式处理和/或播放的媒体的相对路径和文件名。Media.setMedia()方法是通过动作脚本设置此属性的唯一受支持的方法。默认值是 undefined。

范例
下面的范例在文本框中显示播放中影片的名称：

myTextField.text = myMedia.contentPath;

另请参见
Media.setMedia()

----------------------------

了解了contentPath的用法，剩下的就好办了，我们可以通过外部的XML文件记录播放的歌曲的地址，通过其他组件来控制切换contentPath的内容。

关于xml，我们可以通过网络搜索来了解有关的知识。

前面我们了解了一些基础知识，今天我们利用xml制作一个用于blog的小型音乐播放器，细节的部分，如循环播放等，可以参考前面的部分。

新建一个文档，拖入三个组件，分别是mediaplayback、combobox、XMLconnector,他们的位置分别在media、ui、data三类组件当中。
将medianplayback命名（实例名）为：musicplayer,用于播放音乐，并将mediapalyback的参数设置为类型：mp3, Control Visibility:on，始终打开；将combobox命名（实例名）为musiclist,用于显示和选择播放内容；将XMLconnector命名（实例名）为：xmlconn，用于读取提前准备的好的xml数据文件，这个xml文件可以是远程服务器上的，这里我们把它保存到和我们制做的播放器的同一目录下，命名为music_list.xml，里面提前按照xml规范写好了歌曲的名字和播放地址，下面是music_list.xml的一个例子：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<list title="播放列表">
<item url="http://www.13ms.net/demo/csgirl.mp3" id="CS美女--希婕">
<![CDATA[CS美女--希婕]]>
</item>
<item url="226167_200541223491569545.mp3" id="哎呀--王蓉">
<![CDATA[哎呀--王蓉]]>
</item>
<item url="yianlu.mp3" id="天路--韩红">
<![CDATA[天路--韩红]]>
</item>
<item url="blggc.mp3" id="布拉格广场--蔡依林">
<![CDATA[布拉格广场--蔡依林]]>
</item>
<item url="yebaihe.mp3" id="野百合也有春天--黑鸭子合唱组">
<![CDATA[野百合也有春天--黑鸭子合唱组]]>
</item>
<item url="nvrenhua.mp3" id="女人花--黑鸭子合唱组">
<![CDATA[女人花--黑鸭子合唱组]]>
</item>
<item url="6_2758.mp3" id="屋顶--温岚、周杰伦">
<![CDATA[屋顶--温岚、周杰伦]]>
</item>
<item url="i_donot_want_to_miss_a_thing.mp3" id="I_donot_want_to_miss_a_thing">
<![CDATA[I_donot_want_to_miss_a_thing]]>
</item>

</list>

url标签内保存的是歌曲的地址，id标签保存的是歌曲的名字。ps: xml现在应用特别广泛，我们应该简单了解它，使用各种搜索引擎可以很方便的找到相关资料。

版面编排根据个人的需要排版，我这里使用了一个很小的布局，尽量缩小尺寸。如图：

xmlconnector并不会显示在版面上，所以可以把它放置在画布的外面。

选择xmlconnector组件，参数标签栏里的url内添上xml文件的地址，这里因为存放在本地，所以直接填写music_list.xml就可以了，direcrion选项选择receive，这里不需要输出数据。如图：

选择xmlconnector组件，选择架构标签，选择从示例xml文件读取架构按钮，在打开对话框内选择保存在本地的xml文件，架构标签里就会显示出xml文件的基本架构，如图：

选择xmlconnector组件，选择绑定标签，此时绑定是空的，点击加号添加绑定，在弹出的对话框中选择：item:Array，因为这里是保存歌曲地址和名称的架构，如图：

确定后，绑定栏内出现第一个绑定，接着选择下面的bound to(绑定到)，点后面的放大镜，在弹出的对话框中左边选择ComboBox,<musiclist>，右边选择dataProvider:Array，即将它绑定到歌曲列表组件内，如图：

选择场景的第一桢，添加一个行为，驱动xmlconnector，具体做法是选择场景第一桢，然后在行为面板中点击加号，选择数据-触发数据源，选择_root下的connxml,选项为“绝对”，实际上就是在第一桢上添加了一行as:

_root.xmlconn.trigger();

发布预览看看是不是列表里已经显示歌曲的内容了？

我们已经将歌曲的信息绑定到了歌曲列表里，发布后我们可以看到combobox内显示的信息，点击下拉箭头就可以改变播放的内容。

继续下一步，绑定歌曲的地址到meidiaplayback的contentpath

仍旧是用鼠标选择舞台上的xmlconnector组件，组件检查器切换到绑定标签，添加一个绑定，这次我们选择@url:string，因为这个架构里面保存的是歌曲的地址信息。如图：

接着选择下面的bound to,将它绑定到mediaplayback的contentpath,具体设置参考下面的图：

继续选择下面的index for "item"，默认为0，点后面的放大镜，在弹出的对话框中将“使用常数值”前面的钩去掉，绑定索引导commobox的selectedindex:number上，这样就同播放器的列表建立了关联，设置如图：

好了，现在发布预览看看，选择歌曲的列表内的歌曲，播放器是不是随之对应播放？

但是有几个缺点，

一、没有开始马上播放，可以参考这里添加相应的代码：more.asp?name=kinghill&id=244

commobox和list组件有很多共同点，参考修改。

二、不能自动切换到下一首播放

这里需要设置监听，有能力的自己搜索一下资料，制作的乐趣在于动脑并调试成功，我水平有限，只能起个引路的作用，更多的组件应用还需要查阅更多的资料。

下面是一些回复内容：

底下提问的人说，会遇到播放列表显示地址的问题，我试过也使如此，和版本没有关系。也尝试榜定array底下的id字段，但无法显示整个列表。
--------------------------------------------------------------------------------
我将ComboBox的参数中的Data改为“播放清单”labels改为“播放清单”把MediaPlayback参数的Automatically Play选中测试后可以自动播放。再加上
myListener = new Object();
myListener.complete = function() {
//trace("media is Finished");
var selIndex = musiclist.selectedIndex;
if (selIndex==musiclist.length-1){
musiclist.selectedIndex = 0;
}
else{
musiclist.selectedIndex = (selIndex+1);
}
musiclist.refreshDestinations();
musicplayer.play();
}
musicplayer.addEventListener("complete", myListener);

参考吧，这是我的源代码。监听播放器complete,完毕判断列表，如果在尾部，从头开始，否则selectedindex加1……

By kinghill
的代码就可以实现自动播放和播放下一首。
--------------------------------------------------------------------------------
[ 2005-11-16 21:34:57 | By: kinghill ]

xml不标准的话肯定会出错的，你可以用ie打开你的xml文件测试是否正确。
--------------------------------------------------------------------------------
By: kinghill ]

以下引用天焕(游客)在2005-11-13 14:07:11发表的评论:

我按照你的方法试了4个小时，将xml中的列表绑定到commobox中，但是测试影片的时候commobox中却什么也不显示，您看看有可能是那里出了问题？？

flash8我没有用来尝试做这个，当初我做的时候用的是mx2004,如果什么都不显示，可能还是绑定的有问题，你可以单独新建文件做测试，做这个时间很久了，我都忘得差不多了。
--------------------------------------------------------------------------------
我按照你的方法试了4个小时，将xml中的列表绑定到commobox中，但是测试影片的时候commobox中却什么也不显示，您看看有可能是那里出了问题？？
--------------------------------------------------------------------------------
问题2：为什么我做的播放器读取xml文件之后，

id连同url一起显示在list上呢

可是你的只显示id阿
--------------------------------------------------------------------------------
自动播放的代码我市这样写的

_root.xmlconn.trigger();
System.useCodepage = true;
cdlist.addEventListener("bindingExecuted", this);
myListener = new Object();
myListener.complete = function ()
{
    var _l1 = musiclist.selectedIndex;
    if (_l1 == musiclist.length - 1)
    {
        musiclist.selectedIndex = 0;
    }
    else
    {
        musiclist.selectedIndex = _l1 + 1;
    } // end if
    musiclist.refreshDestinations();
    musicplayer.play();
};
musicplayer.addEventListener("complete", myListener);
--------------------------------------------------------------------------------

哈哈，自动播放下一首我也弄明白了。

可是怎么也做不出来专辑选择，xml文件我照你说的做了，可是两个combox怎么联系在一起阿？

教教我吧 ps：昨晚你的服务器有登录不上
--------------------------------------------------------------------------------
By: kinghill ]

myListener = new Object();
myListener.complete = function() {
//trace("media is Finished");
var selIndex = musiclist.selectedIndex;
if (selIndex==musiclist.length-1){
musiclist.selectedIndex = 0;
}
else{
musiclist.selectedIndex = (selIndex+1);
}
musiclist.refreshDestinations();
musicplayer.play();
}
musicplayer.addEventListener("complete", myListener);

参考吧，这是我的源代码。监听播放器complete,完毕判断列表，如果在尾部，从头开始，否则selectedindex加1……
--------------------------------------------------------------------------------
By: kinghill ]

如果我现在说的这个你能做出来并理解的话，应该稍微动点脑筋就能做出来，修改一下xml文件的结构，

[专辑一]

歌曲1

歌曲2

[专辑一结束]

[专辑二]

歌曲一

歌曲二

[专辑二结束]

……

flash中绑定2个文本框……

生搬硬套别人的没有兴趣，自己尝试有滋味。