网络音乐播放器的实现(Flex+JAVA)

最近在做一个音乐播放器，纯粹练手，前端使用FLex，后台使用JAVA，现在慢慢的在实现,主要涉及的技术还在不断学习中：
这里也一点一点记录下来和大家分享哈。

自定义组件：（左边是一个播放列表，右边是音乐播放控件）
自定义组件要继承SkinnableComponent类。主要有两部分组成，一个是组件的功能逻辑，一个是皮肤。
功能逻辑和普通的as写法一样，要用到皮肤就需要遵守皮肤的契约.看看下面的代码：
(音乐播放控件:PlayerControlBar.as):

  1 package components
  2 {
  3     import events.PlayEvent;
  4     import events.StopEvent;
  5     
  6     import flash.events.Event;
  7     import flash.media.Sound;
  8     import flash.media.SoundChannel;
  9     import flash.net.URLRequest;
 10     
 11     import mx.controls.Alert;
 12     import mx.controls.HSlider;
 13     import mx.controls.sliderClasses.Slider;
 14     import mx.events.SliderEvent;
 15     import mx.messaging.AbstractConsumer;
 16     
 17     import service.IPlayController;
 18     import service.impl.PlayController;
 19     
 20     import spark.components.Button;
 21     import spark.components.TextArea;
 22     import spark.components.supportClasses.SkinnableComponent;
 23     
 24     [SkinState("stop")]
 25     [SkinState("run")]
 26     /**播放控制栏组件*/
 27     public class PlayerControlBar extends SkinnableComponent
 28     {
 29         [SkinPart(required="true")]
 30         public var lyricText:TextArea;
 31         [SkinPart(required="true")]
 32         public var playSlider:HSlider;
 33         [SkinPart(required="true")]
 34         public var preButton:Button;
 35         [SkinPart(required="true")]
 36         public var stateButton:Button;
 37         [SkinPart(required="true")]
 38         public var nextButton:Button;
 39         [SkinPart(required="true")]
 40         public var stopButton:Button;
 41         
 42         public function PlayerControlBar()
 43         {
 44             super();
 45             //添加播放状态更改的监听器
 46             this.addEventListener(PlayEvent.PLAY, handleStateButtonClick);
 47             this.addEventListener(StopEvent.STOP, handleStopButtonClick);
 48             this.addEventListener(SliderEvent.CHANGE, handlePlaySilderChange);
 49         }
 50         
 51         /**是否在播放*/
 52         public var isStart:Boolean = false;
 53         /**音乐播放控制器*/
 54         private var playController:IPlayController;
 55         /**播放状态改变的处理函数*/
 56         private function handleStateButtonClick(event:PlayEvent):void
 57         {
 58             if(!isStart)
 59             {
 60                 //加载音乐并开始播放
 61                 playController = new PlayController(this);
 62                 playController.start("gole.mp3");
 63                 isStart = true;
 64                 //改变皮肤的状态
 65                 this.skin.currentState="stop";
 66             }
 67             else if(this.skin.currentState == "stop")
 68             {
 69                 //暂停播放音乐
 70                 playController.pause();
 71                 this.skin.currentState="run";
 72             }
 73             else if(this.skin.currentState == "run")
 74             {
 75                 //开始音乐播放
 76                 playController.play();
 77                 this.skin.currentState="stop";
 78             }
 79         }
 80         
 81         private function handleStopButtonClick(e:StopEvent):void
 82         {
 83             isStart = false;
 84             this.skin.currentState = "run";
 85             if(playController)
 86                 playController.stop(true);
 87         }
 88         
 89         //活动条拉动的触发函数，从指定位置开始播放
 90         private function handlePlaySilderChange(e:SliderEvent):void
 91         {
 92             if(isStart)
 93             {
 94                 (playController as PlayController).clickPlay();
 95                 if(this.skin.currentState == "run")
 96                     this.skin.currentState = "stop";
 97             }
 98         }
 99     }
100 }

看到24~25行为自定义组件加了两个SkinState标注,这个是皮肤的状态，
第29~40行为几个组件加了[SkinPart(required="true")]标注，这个是皮肤必须要拥有的控件
皮肤的契约如下图：

利用flex builder的功能可以为自定义组件添加皮肤，它会根据皮肤的契约自动生成提示：
如下：
(音乐播放控件的皮肤:PlayerControlBarSkin.mxml):

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
 3         xmlns:s="library://ns.adobe.com/flex/spark" 
 4         xmlns:mx="library://ns.adobe.com/flex/mx"
 5         creationComplete="this.currentState = 'run'"
 6         >
 7     <!-- host component -->
 8     <fx:Metadata>
 9         [HostComponent("components.PlayerControlBar")]
10     </fx:Metadata>
11     <fx:Script>
12         <![CDATA[
13             import events.PlayEvent;
14             import events.StopEvent;
15             
16             import mx.events.SliderEvent;
17         ]]>
18     </fx:Script>
19     
20     <!-- states -->
21     <s:states>
22         <s:State id="runState" name="run"/>
23         <s:State id="stopState" name="stop" />
24     </s:states>
25     
26     <!-- SkinParts
27     name=lyricText, type=spark.components.TextArea, required=true
28     name=stateButton, type=spark.components.Button, required=true
29     name=nextButton, type=spark.components.Button, required=true
30     name=preButton, type=spark.components.Button, required=true
31     name=stopButton, type=spark.components.Button, required=true
32     -->
33     
34     <s:Group width="700" height="600">
35         <s:Image source="../asserts/img/background.jpg" alpha=".6"/>
36         
37         <s:VGroup width="100%" height="100%" horizontalAlign="center" paddingTop="20">
38             <s:Group width="60%" height="80%" horizontalCenter="0">
39                 <s:TextArea id="lyricText" width="100%" height="100%" alpha=".8" borderVisible="false">
40                 </s:TextArea>
41             </s:Group>
42             <s:HGroup width="55%" verticalAlign="middle">
43                 <mx:HSlider id="playSlider" width="100%" height="100%" minimum="0" maximum="100"
44                             change="dispatchEvent(new SliderEvent(SliderEvent.CHANGE,true))"/>
45             </s:HGroup>
46             <s:HGroup width="60%" horizontalAlign="center" paddingBottom="10">
47                 <s:Button id="preButton" skinClass="skins.PreButtonSkin"/>
48                 <s:Button left="15" id="stateButton" skinClass.run="skins.PlayButtonSkin" skinClass.stop="skins.PauseButtonSkin" click="dispatchEvent(new PlayEvent(PlayEvent.PLAY))"/>
49                 <s:Button left="15" id="nextButton" skinClass="skins.NextButtonSkin"/>
50                 <s:Button left="15" id="stopButton" skinClass="skins.StopButtonSkin" click="dispatchEvent(new StopEvent(StopEvent.STOP))"/>
51             </s:HGroup>
52         </s:VGroup>
53     </s:Group>
54 </s:Skin>

自定义组件的好处是将逻辑内部封装好，安全也便于维护，通过皮肤改变外观也是很方便的，需要对外的服务只要提供接口就可以了。

在主界面使用自定义组件：

1 <s:HGroup horizontalAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="0">
2         <components:MusicList skinClass="skins.MusicListSkin" listContent="{musicList}" creationComplete="initMusicList()"/>        
3         <components:PlayerControlBar skinClass="skins.PlayeControlBarSkin"/>
4 </s:HGroup>

运行效果(自定义组件PlayerControlBar)：

 

自定义事件和事件派发:

事件流有三个阶段：捕获阶段--->目标阶段--->冒泡阶段
1.捕获阶段（从根节点到子节点，检测对象是否注册了监听器，是则调用监听函数）
2.目标阶段（调用目标对象本身注册的监听程序）
3.冒泡阶段（从目标节点到根节点，检测对象是否注册了监听器，是则调用监听函数）
注：事件发生后，每个节点可以有2个机会（2选1）响应事件，默认关闭捕获阶段。
从上到下（从根到目标）是捕获阶段，到达了目标后是目标阶段，然后从目标向上返回是冒泡阶段。

这里需要注意的是：如果派发事件的源(调用dispatchEvent方法)没有在一组容器里，那么这组容器里面的控件是监听不到这个派发事件的。

如下，在点击stateButton按钮的时候会派发一个自定义的事件PlayEvent, 然后在自定义组件PlayControlBar中添加
监听并作出相应处理：

<s:Button left="15" id="stateButton" skinClass.run="skins.PlayButtonSkin" skinClass.stop="skins.PauseButtonSkin" click="dispatchEvent(new PlayEvent(PlayEvent.PLAY))"/>

(自定义的事件:PlayEvent.as) :

 1 package events
 2 {
 3     import flash.events.Event;
 4     
 5     import mx.states.OverrideBase;
 6     
 7     public class PlayEvent extends Event
 8     {
 9         public static const PLAY:String = "play";
10         
11         public function PlayEvent(type:String = "play", bubbles:Boolean=true, cancelable:Boolean=false)
12         {
13             super(type, bubbles, cancelable);
14         }
15         
16         override public function clone():Event
17         {
18             return new PlayEvent();
19         }
20     }
21 }

自定义事件要继承Event类和重写clone方法。构造函数的第二参数表示是否要执行冒泡，如果不冒泡，父容器就捕获不到事件

添加监听：

public function PlayerControlBar()
        {
            super();
            //添加播放状态更改的监听器
            this.addEventListener(PlayEvent.PLAY, handleStateButtonClick);
          ………………
        }

事件处理函数：

 1 private function handleStateButtonClick(event:PlayEvent):void
 2         {
 3             if(!isStart)
 4             {
 5                 //加载音乐并开始播放
 6                 playController = new PlayController(this);
 7                 playController.start("gole.mp3");
 8                 isStart = true;
 9                 //改变皮肤的状态
10                 this.skin.currentState="stop";
11             }
12             else if(this.skin.currentState == "stop")
13             {
14                 //暂停播放音乐
15                 playController.pause();
16                 this.skin.currentState="run";
17             }
18             else if(this.skin.currentState == "run")
19             {
20                 //开始音乐播放
21                 playController.play();
22                 this.skin.currentState="stop";
23             }
24         }

 

音频播放的处理：
Flex中音频的播放主要是靠Sound和SoundChannel两个类来实现的。
具体的使用Adobe的官方文档讲得非常详细，地址是：
http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/media/Sound.html

(控制音乐播放类:PlayController.as)：

  1 package service.impl
  2 {
  3     import components.PlayerControlBar;
  4     
  5     import flash.display.DisplayObject;
  6     import flash.events.Event;
  7     import flash.events.TimerEvent;
  8     import flash.media.Sound;
  9     import flash.media.SoundChannel;
 10     import flash.net.URLRequest;
 11     import flash.utils.Timer;
 12     
 13     import mx.managers.CursorManager;
 14     
 15     import service.IPlayController;
 16     
 17     /**音乐播放控制类*/
 18     public class PlayController implements IPlayController
 19     {
 20         private var sound:Sound;
 21         private var soundChannel:SoundChannel;
 22         private var _pausePosition:int;
 23         private var _derectory:String =  "../music/"
 24         /**实时记录播放进度*/
 25         private var timer:Timer;
 26         private var view:PlayerControlBar;
 27         
 28         public function PlayController(view:DisplayObject)
 29         {
 30             this.view = view as PlayerControlBar;
 31         }
 32         
 33 
 34         /**音乐播放暂停位置*/
 35         public function get pausePosition():int
 36         {
 37             return _pausePosition;
 38         }
 39 
 40         /**
 41          * @private
 42          */
 43         public function set pausePosition(value:int):void
 44         {
 45             _pausePosition = value;
 46         }
 47 
 48         /**音乐存放的目录*/
 49         public function get derectory():String
 50         {
 51             return _derectory;
 52         }
 53 
 54         public function set derectory(value:String):void
 55         {
 56             _derectory = value;
 57         }
 58 
 59         public function start(music:String):void
 60         {
 61             sound = new Sound();
 62             timer = new Timer(1000);
 63             var urlRequest:URLRequest = new URLRequest(derectory + music);
 64             sound.addEventListener(Event.COMPLETE, function handleStart(e:Event):void
 65             {
 66                 soundChannel = sound.play();
 67                 //增加音乐播放完毕的监听器
 68                 soundChannel.addEventListener(Event.SOUND_COMPLETE, handlePlayEnd);
 69                 timer.start();
 70                 sound.removeEventListener(Event.COMPLETE,handleStart);
 71             }
 72             );
 73             timer.addEventListener(TimerEvent.TIMER, handleTimmerWork);
 74             sound.load(urlRequest);
 75         }
 76         
 77         /*音乐播放结束处理函数*/
 78         private function handlePlayEnd(e:Event):void
 79         {
 80             stop(true);
 81             view.skin.currentState = "run";
 82             view.isStart = false;
 83             soundChannel.removeEventListener(Event.SOUND_COMPLETE,handlePlayEnd);
 84         }
 85         
 86         /*每隔一秒，刷新进度条*/
 87         private function handleTimmerWork(e:TimerEvent):void
 88         {
 89             var estimatedLength:int =  Math.ceil(sound.length / (sound.bytesLoaded / sound.bytesTotal)); 
 90             var playbackPercent:uint =  Math.round(100 * (soundChannel.position / estimatedLength));
 91             view.playSlider.value = playbackPercent;
 92         }
 93         
 94         public function pause():void
 95         {
 96             if(soundChannel)
 97             {
 98                 pausePosition = soundChannel.position;
 99                 stop();                    
100             }
101         }
102         
103         public function play():void
104         {
105             if(sound)
106             {
107                 soundChannel = sound.play(pausePosition);
108                 soundChannel.addEventListener(Event.SOUND_COMPLETE, handlePlayEnd);                
109             }
110             if(!timer.running)
111                 timer.start();
112         }
113         
114         public function stop(isExit:Boolean = false):void
115         {
116             if(soundChannel)
117             {
118                 soundChannel.stop();
119                 soundChannel.removeEventListener(Event.SOUND_COMPLETE,handlePlayEnd);                
120             }
121             if(timer.running)
122                 timer.stop();
123             if(isExit)
124                 timer.removeEventListener(TimerEvent.TIMER,handleTimmerWork);
125         }
126         
127         /**由Slider触发的播放*/
128         public function clickPlay():void
129         {
130             //根据拖动的位置计算实际音乐播放的位置
131             var percent:Number = view.playSlider.value / view.playSlider.maximum;
132             var estimatedLength:uint = Math.ceil(sound.length / (sound.bytesLoaded / sound.bytesTotal));
133             var position:uint = Math.round(percent * estimatedLength);
134             pause();
135             pausePosition = position;
136             play();
137         }
138     }
139 }

第59至75行是第一次点击播放时调用的方法，第64行Sound增加了一个事件监听，是在音乐加载完后执行的，
这个如果要边加载边播放的时候不适用,可以参考官方文档来解决这个问题。第94~101行中是点击暂停时调用
的方法，暂停的时候要把音乐播放的位置记录下来，如98行，这是为了要在继续播放的时候找到起点。第103
至112行是继续播放函数。


Timer类的使用实现播放进度实时更新：

当音乐播放的时候，这个播放进度条会每个同步的移动位置，拖动进度条，音乐也会播放到相应的位置。

进度条控件：

<s:HGroup width="55%" verticalAlign="middle">
                <mx:HSlider id="playSlider" width="100%" height="100%" minimum="0" maximum="100"
                            change="dispatchEvent(new SliderEvent(SliderEvent.CHANGE,true))"/>
</s:HGroup>

当进度条通过拖动或者点击改变值的时候会派发自定义事件SliderEvent，这个在自定义组件PlayerControlBar中进行监听和处理.

public function PlayerControlBar()
        {
            super();
          　………………this.addEventListener(SliderEvent.CHANGE, handlePlaySilderChange);
        }

 处理函数：

//进度条拉动的触发函数，从指定位置开始播放
        private function handlePlaySilderChange(e:SliderEvent):void
        {
            if(isStart)
            {
                (playController as PlayController).clickPlay();
                if(this.skin.currentState == "run")
                    this.skin.currentState = "stop";
            }
        }

clickplay方法：

 1         /**由Slider触发的播放*/
 2         public function clickPlay():void
 3         {
 4             //根据拖动的位置计算实际音乐播放的位置
 5             var percent:Number = view.playSlider.value / view.playSlider.maximum;
 6             var estimatedLength:uint = Math.ceil(sound.length / (sound.bytesLoaded / sound.bytesTotal));
 7             var position:uint = Math.round(percent * estimatedLength);
 8             pause();
 9             pausePosition = position;
10             play();
11         }

第5~7行是计算当前进度条拖动的进度对应的音乐播放位置。

实时更新播放进度条：

 1 public function start(music:String):void
 2         {
 3             sound = new Sound();
 4             timer = new Timer(1000);
 5             var urlRequest:URLRequest = new URLRequest(derectory + music);
 6             sound.addEventListener(Event.COMPLETE, function handleStart(e:Event):void
 7             {
 8                 soundChannel = sound.play();
 9                 //增加音乐播放完毕的监听器
10                 soundChannel.addEventListener(Event.SOUND_COMPLETE, handlePlayEnd);
11                 timer.start();
12                 sound.removeEventListener(Event.COMPLETE,handleStart);
13             }
14             );
15             timer.addEventListener(TimerEvent.TIMER, handleTimmerWork);
16             sound.load(urlRequest);
17         }

第4行，在点击音乐播放的时候新建一个Timer类，并规定1秒执行一次，第11行是音乐播放的时候开始启动这个timer，第15行
中添加timer触发的事件。处理函数如下：

/*每隔一秒，刷新进度条*/
        private function handleTimmerWork(e:TimerEvent):void
        {
            var estimatedLength:int =  Math.ceil(sound.length / (sound.bytesLoaded / sound.bytesTotal)); 
            var playbackPercent:uint =  Math.round(100 * (soundChannel.position / estimatedLength));
            view.playSlider.value = playbackPercent;
        }

当停止音乐播放的时候也停止timer,开始播放音乐的时候启动timer:

 1 public function stop(isExit:Boolean = false):void
 2         {
 3             if(soundChannel)
 4             {
 5                 soundChannel.stop();
 6                 soundChannel.removeEventListener(Event.SOUND_COMPLETE,handlePlayEnd);                
 7             }
 8             if(timer.running)
 9                 timer.stop();
10             if(isExit)
11                 timer.removeEventListener(TimerEvent.TIMER,handleTimmerWork);
12         }

 1 public function play():void
 2         {
 3             if(sound)
 4             {
 5                 soundChannel = sound.play(pausePosition);
 6                 soundChannel.addEventListener(Event.SOUND_COMPLETE, handlePlayEnd);                
 7             }
 8             if(!timer.running)
 9                 timer.start();
10         }

 

前端(FLEX)和服务器端(JAVA)之间的通信：
这个是通过Socket来实现的.
JAVA端的Socket编程若要和Flex端通信并且传递对象，就需要用到AMF序列化，这个Adobe为我们实现了，
只需要调用接口就可以了。Adobe的这个框架叫做blazeds，在官网可以下载到，为了方便大家，这里给出了
下载地址：blazeds.zip    BlazeDS开发者指南

java服务端：

 1 public class MusicServer {
 2     private ServerSocket serverSocket;
 3     private Socket clientSocket;
 4     
 5     public MusicServer(int port)
 6     {
 7         try {
 8             serverSocket = new ServerSocket(port);
 9             clientSocket = serverSocket.accept();
10             ClientSocketManager.addClient(clientSocket);
11             MusicListService.sendMusicList(clientSocket);
12         } catch (IOException e) {
13             e.printStackTrace();
14         }
15     }
16     
17     
18     public static void main(String[] args) {
19         new MusicServer(9000);
20     }
21 }

第11行是socket输入，输出流处理的类，主要是把服务端里面的所有音乐的文件名发送给客户端。
ClientSocketManager.java:

 1 public class MusicListService {
 2     
 3     public static void sendMusicList(Socket socket)
 4     {
 5         try {
 6             InputStream input = socket.getInputStream();
 7             OutputStream outputStream = socket.getOutputStream();
 8             Amf3Output amfoutput = new Amf3Output(new SerializationContext());
 9             
10             while(true)
11             {
12                 int index = 0;
13                 byte[] buffer = new byte[100];
14                 StringBuffer requestState = new StringBuffer();
15                 while(-1 != (index = input.read(buffer, 0, buffer.length)))
16                 {
17                     String value = new String(buffer, 0, index);
18                     requestState.append(value);
19                     
20                     ByteArrayOutputStream byteOutput = new ByteArrayOutputStream();
21                     DataOutputStream output = new DataOutputStream(byteOutput);
22                     amfoutput.setOutputStream(output);
23                     MusicList musicList = MusicListGet.getMusicList();
24                     amfoutput.writeObject(musicList);
25                     output.flush();
26                     
27                     byte[] data = byteOutput.toByteArray();
28                     outputStream.write(data);
29                     outputStream.flush();
30                 }
31                 
32                 break;
33             }
34         } catch (IOException e) {
35             e.printStackTrace();
36         }finally
37         {
38             try {
39                 socket.close();
40                 ClientSocketManager.removeClient(socket);
41             } catch (IOException e) {
42                 e.printStackTrace();
43             }
44         }
45     }
46 }

 

 

第8行中导入了Amf3Output类，这个类就是blazeds.zip包下面的，导入到项目中就可以了。

Flex客户端：

 1 public class SocketController extends EventDispatcher
 2     {
 3         private static var socket:Socket = null;
 4         private var view:DisplayObject;
 5         
 6         public function SocketController(host:String = null, port:int = 0, view:DisplayObject = null)
 7         {
 8             if(!socket)
 9                 socket = new Socket();
10             this.view = view;
11             configureListener();
12             if(host && port != 0)
13             {
14                 socket.connect(host,port);
15             }
16         }
17         
18         
19         private function configureListener():void
20         {
21             socket.addEventListener(Event.CONNECT, handleConnect);
22             socket.addEventListener(Event.CLOSE, handleClose);
23             socket.addEventListener(ProgressEvent.SOCKET_DATA, handleRecieve);
24         }
25         
26         private function handleConnect(e:Event):void
27         {
28             socket.writeUTFBytes(RequestState.REQUESTLIST);
29             socket.flush();
30         }
31         
32         private function handleClose(e:Event):void
33         {
34             if(socket.connected)
35                 socket.close();
36             socket = null;
37         }
38         
39         private function handleRecieve(e:Event):void
40         {
41             var obj:Object = socket.readObject();
42             if(socket.connected)
43                 socket.close();
44             var musicList:ArrayCollection = obj.musicNames;
45             if(view)
46                 view.dispatchEvent(new MusicListEvent(MusicListEvent.LISTRECIEVE,musicList));        
47         }
48         
49     }

Flex的socket都是异步方式来实现的，通过事件来处理，可以看到第21~23行为socket添加了几个事件监听，
第一个是建立连接成功的事件监听，第二个是连接关闭的监听，第三个是得到服务端返回消息的监听。 

 

程序还在不断的完善，本人也在学习当中，如果有兴趣的朋友，可以告诉我好的学习资料，或有什么好的建议，也希望告诉我哦.