Flex开发实例教程-Mp3播放器代码demo分享

快来打我* 2022-07-17 04:53 185阅读 0赞

原文：[Flex开发实例教程-Mp3播放器代码demo分享][Flex_-Mp3_demo]

源代码下载地址： [http://www.zuidaima.com/share/1835085544524800.htm][http_www.zuidaima.com_share_1835085544524800.htm]

本例中的MP3播放器是用Flex做的，主要是ActionScript和MXML。主要的功能有 播放，暂停，音量控制，播放进度显示。好了先给大家看看界面吧！如下：

![20140524114903696.jpg][]

总体的设计还是用了PureMVC框架。项目目录：

![20140524115341866.jpg][]

这里简单的说说几个功能点吧！

1.播放进度

显示歌曲播放的进度可以使用Flex中 提供的ProgressBar控件，这个控件可以事实的去显示歌曲进行的任务完成的情况！代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="30">
    	<mx:ProgressBar id="progressBar" left="10" top="10" label="" mode="manual"/>
    </mx:Canvas>

2.歌曲列表

在Flex 里面提供了List，DataGrid等数据控件。本例中就三个字段 我们可以选择DataGrid控件来显示歌曲列表。在该控件里面可以使用DataGridColumn来自定义列的标题，宽度，显示内容，本例中的歌曲列表代码如下：

<mx:DataGrid id="songDataGrid" dataProvider="{songs}" 
    		width="200" height="150" left="10" 
    		click="if (songDataGrid.selectedIndex != -1) sendEvent(SELECT)">
    		<mx:columns>
    			<mx:DataGridColumn dataField="songName" headerText="歌曲"/>
    			<mx:DataGridColumn dataField="songArtist" headerText="歌手"/>
    			<mx:DataGridColumn dataField="songDuring" headerText="时间"/>
    		</mx:columns>
    	</mx:DataGrid>

3.播放

播放功能是播放器程序里面最核心的应用，当我们点击播放的时候，系统会相应去调用事件函数。如下：

<?xml version="1.0" encoding="utf-8"?>
    <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" height="30" 
    	horizontalAlign="center">
    	
    	<mx:Script>
    		<![CDATA[
    			public static const PLAY:String = "play";//播放 静态变量
    			
    			private function controlHandle(note:String):void
    			{
    				dispatchEvent(new Event(note));// 派发 事件
    			}
    		]]>
    	</mx:Script>
    	
    	<mx:Image id="btnPlay" source="@Embed(source='/assets/play.png')" 
    		buttonMode="true" click="controlHandle(PLAY)"/>		
    </mx:HBox>

暂停控制，停止控制，音量调节等我就不继续详细介绍了！

说明：有需要的牛牛们可以下载下来看看，有bug可以一起解决，因为我也是因为兴趣 学习没几天，Flex方面的大牛请勿笑喷！

[Flex_-Mp3_demo]: http://www.zuidaima.com/share/1836161863568384.htm
[http_www.zuidaima.com_share_1835085544524800.htm]: http://www.zuidaima.com/share/1835085544524800.htm
[20140524114903696.jpg]: /images/20220717/41ca259d8cd04c6b932652233e1f1b15.png
[20140524115341866.jpg]: /images/20220717/ea354c74f71746b091c1cc6e34c2ba07.png