使用Flex4播放MP3文件

1.先来做一个最简单的MP3播放功能

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			
			private var snd:Sound;
			private var channel:SoundChannel;
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				snd = new Sound(new URLRequest("http://localhost/flex/1.mp3"));
				channel = snd.play();
			}

			protected function button3_clickHandler(event:MouseEvent):void
			{
				channel.stop();
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:BorderContainer x="127" y="170" width="273" height="43">
		<s:Button x="47" y="10" label="播放" click="button1_clickHandler(event)"/>
		<s:Button x="151" y="10" label="停止" click="button3_clickHandler(event)"/>
	</s:BorderContainer>
</s:Application>

 

2.在上面例子的基础上，做一些改进，增加对进度，以及音量的控制

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			
			private var snd:Sound;
			private var channel:SoundChannel;
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				snd = new Sound(new URLRequest("http://localhost/flex/1.mp3"));
				channel = snd.play();
			}

			protected function button3_clickHandler(event:MouseEvent):void
			{
				channel.stop();
			}


			protected function hslider1_changeEndHandler(event:FlexEvent):void
			{
				channel.stop();
				channel = snd.play(hslider1.value/hslider1.maximum * snd.length);
			}
			
			protected function hslider2_changeEndHandler(event:FlexEvent):void
			{
				var trans:SoundTransform = new SoundTransform(hslider2.value/hslider2.maximum,0);
				channel.soundTransform = trans;
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Label x="127" y="126" text="进度：" width="45"/>
	<s:HSlider id="hslider1" x="179" y="127" width="221" changeEnd="hslider1_changeEndHandler(event)" maximum="100" showDataTip="false"/>
	<s:Label x="127" y="146" text="音量：" width="45"/>
	<s:HSlider id="hslider2" x="180" y="150" width="221" changeEnd="hslider2_changeEndHandler(event)" maximum="10" showDataTip="false"/>
	
	<s:BorderContainer x="127" y="170" width="273" height="43">
		<s:Button x="47" y="10" label="播放" click="button1_clickHandler(event)"/>
		<s:Button x="151" y="10" label="停止" click="button3_clickHandler(event)"/>
	</s:BorderContainer>	
</s:Application>

 

3.更近一步完善MP3播放功能

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" enterFrame="application1_enterFrameHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			
			private var snd:Sound;
			private var channel:SoundChannel;
			private var trans:SoundTransform;
			private var playStatus:Number = 0;
			private var playPosition:Number = 0;
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// 标示当前播放状态，0是未加载，1是播放，2是暂停
				if(playStatus==0 || playStatus==1)
				{
					if(playStatus==0)
					{
						snd = new Sound(new URLRequest("http://localhost/flex/1.mp3"));
						trans = new SoundTransform();
						trans.volume = hslider2.value/hslider2.maximum;
					}
					
					playButton.label = "暂停";
					channel = snd.play(playPosition);
					playStatus = 2;
				}
				else if(playStatus==2)
				{
					playButton.label = "播放";
					channel.stop();
					playStatus = 1;
				}
			}

			protected function hslider1_changeEndHandler(event:FlexEvent):void
			{
				channel.stop();
				channel = snd.play(hslider1.value/hslider1.maximum * snd.length);
			}
			
			protected function hslider2_changeEndHandler(event:FlexEvent):void
			{
				trans.volume = hslider2.value/hslider2.maximum;
				channel.soundTransform = trans;
			}
			
			// 把毫秒格式化为时间
			protected function formatDate(num:Number):String
			{
				var total:int = int(num / 1000);
				var second:int = total%60;
				total = (total-second)/60;
				var minute:int = total%60;
				total = (total-minute)/60;
				var hour:int = total;
				
				var returnValue:String = "";
				if(hour!=0) returnValue = String(hour) + ":";
				if(minute<10) returnValue += "0";
				returnValue += String(minute) + ":";
				if(second<10) returnValue += "0";
				returnValue += String(second);
				return returnValue;
			}


			// 把播放进度绑定到播放时间的标签上，以及调整进度的组件上
			protected function application1_enterFrameHandler(event:Event):void
			{
				timeLabel.text = formatDate(channel.position) + " / " + formatDate(snd.length);
				playPosition = channel.position;
				hslider1.value = channel.position/snd.length * hslider1.maximum;
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:BorderContainer x="131" y="147" width="369" height="108">
		<s:Label x="83" y="47" text="进度：" width="45"/>
		<s:HSlider id="hslider1" x="135" y="48" width="221" changeEnd="hslider1_changeEndHandler(event)" maximum="100" showDataTip="false"/>
		<s:Label x="83" y="67" text="音量：" width="45"/>
		<s:HSlider id="hslider2" x="136" y="71" width="221" changeEnd="hslider2_changeEndHandler(event)" value="5" maximum="10" showDataTip="false"/>
		<s:Button id="playButton" x="12" y="53" label="播放" click="button1_clickHandler(event)" width="55"/>
		<s:Label id="timeLabel" x="139" y="12" text="00:00 / 00:00" />
		<s:Label x="83" y="12" text="播放进度："/>
	</s:BorderContainer>	
</s:Application>

这里针对上一个例子，做了如下修改：

1）可以显示当前MP3播放时间

2）用一个按钮控制MP3的播放、暂停状态

3) 把播放进度绑定到调整进度条组件上，随时更新进度条位置

做了这些改动，基本上算是一个MP3播放器了，虽然依然很简陋，毕竟只是一个学习的例子，就将就着吧，呵呵