Flex实现多功能Mp3播放器

功能描述

• 暂停/播放
• 停止
• 上一首
• 下一首
• 音量调整
• 播放进度调整

效果图如下：

 

 

Flex实现比较简单，代码如下：

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
			    fontSize="12" creationComplete="init()"
				minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			public var sound:Sound;
			public var chan:SoundChannel;
			private const server:String = "assets/sound/";
			public var pausePos:int = 0;
			public var tempper:Number = 0;
			private var ac:ArrayCollection =new ArrayCollection(["斯琴高丽的伤心.mp3", "曲终人散.mp3","木兰情.mp3","烟花易冷.mp3"]);
			private var timer:Timer = new Timer(10, 0);

			[Embed(source="assets/sound/play.png")]
			private var playIcon:Class;
			[Bindable]
			[Embed(source="assets/sound/stop.png")]
			private var stopIcon:Class;
			[Embed(source="assets/sound/pause.png")]
			private var pauseIcon:Class;
			[Bindable]
			[Embed(source="assets/sound/pre.png")]
			private var preIcon:Class;
			[Bindable]
			[Embed(source="assets/sound/next.png")]
			private var nextIcon:Class;
			[Bindable]
			[Embed(source="assets/sound/pre2.png")]
			private var pre2Icon:Class;
			[Bindable]
			[Embed(source="assets/sound/next2.png")]
			private var next2Icon:Class;
			[Bindable]
			[Embed(source="assets/sound/sound.png")]
			private var soundIcon:Class;
			[Bindable]
			[Embed(source="assets/sound/full.png")]
			private var fullIcon:Class;
			
			//歌曲序列编号
			private var k:int=0;
			
			private function init():void{
				loadSound();
			}
			private function loadSound():void {
				if(chan != null) {
					chan.stop();
				}
				if(k==0){
					img3.enabled=false;
				}else if(k>=ac.length-1){
					img4.enabled=false;
				}else if(k==ac.length){
					k=0;
				}else{
					img3.enabled=true;
					img4.enabled=true;
				}
				myPanel.title=ac[k];
				timer.stop();
				sound = new Sound();
				var req:URLRequest =new URLRequest(server + ac[k]);
				sound.load(req);
				timer.addEventListener(TimerEvent.TIMER, timerHandler);
				timer.start();
				pausePos = 0;
				chan = sound.play();
				img1.setStyle("skin",pauseIcon);
			}
			
			private function timerHandler(event:TimerEvent):void{
				tempper = (chan.position/sound.length)*100;
				bar.setProgress(tempper,100);
			}
			
			//播放和暂停按钮
			private function playHandler():void{
				var c:Class=img1.getStyle("skin");
				if(c==pauseIcon){
					chan.stop();
					img1.setStyle("skin",playIcon);
					pausePos = chan.position;
				}else if(pausePos!=0){
					chan = sound.play(pausePos);
					img1.setStyle("skin",pauseIcon);
					pausePos = chan.position;
				}else{
					loadSound();
				}
					
			}
			//停止按钮
			private function playStopHandler():void{
				if(chan != null) {
					timer.stop();
					bar.setProgress(0,100);
					chan.stop();
					pausePos = 0;
					img1.setStyle("skin",playIcon);
				}
			}
			
			//进度条
			protected function bar_clickHandler(event:MouseEvent):void{
				var c:Class=img1.getStyle("skin");
				if(c==pauseIcon){
					chan.stop();
					chan = sound.play((event.localX/bar.width) * sound.length);
				}
			}
			
			//设置声音
			private function scanVolume():void{
				var stf:SoundTransform = new SoundTransform(volumeSlider.value,0);
				chan.soundTransform = stf;
			}
			
			private function playPreHandler():void{
				k--;
				loadSound();
			}
			
			private function playNextHandler():void{
				k++;
				loadSound();
			}

		]]>
	</mx:Script>
	<mx:Panel id="myPanel" x="34" y="26" width="478" height="399" layout="absolute">
		<mx:VideoDisplay x="0" y="0" width="100%" height="303"/>
		<mx:ProgressBar x="0" y="311"  height="9" width="100%" id="bar" labelPlacement="bottom" themeColor="#F20D7A"
						minimum="0" maximum="100"  label="" direction="right" mode="manual"  click="bar_clickHandler(event)"/>
		<mx:LinkButton id="img1" x="10" y="328" width="16" click="playHandler()"/>
		<mx:LinkButton id="img2" x="34" y="328" width="16" click="playStopHandler()" icon="{stopIcon}"/>
		<mx:LinkButton id="img3" x="58" y="328" width="16" click="playPreHandler()" icon="{preIcon}" disabledIcon="{pre2Icon}"/>
		<mx:LinkButton id="img4" x="82" y="328" width="16" click="playNextHandler()" icon="{nextIcon}" disabledIcon="{next2Icon}"/>
		<mx:Image id="img5" x="295" y="328" width="16" source="{soundIcon}"/>
		<mx:HSlider x="319" y="328" width="91" change="scanVolume()" id="volumeSlider" height="20"/>
		<mx:LinkButton id="img6" y="328" width="16" right="10" icon="{fullIcon}"/>
	</mx:Panel>
	
</mx:Application>