返回 导航

Flex

hangge.com

Flex4 - 制作一个带波形的MP3播放器

作者:hangge | 2015-03-31 09:32
下面是一个使用Flex制作的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"
			   creationComplete="initApp()"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Script>
		<![CDATA[
			//导入声音相关类
			import flash.display.Graphics;
			import flash.events.TimerEvent;
			import flash.filters.GlowFilter;
			import flash.media.Sound;
			import flash.media.SoundChannel;
			import flash.media.SoundMixer;
			import flash.media.SoundTransform;
			import flash.net.URLRequest;
			import flash.utils.Timer;
			
			import mx.events.SliderEvent;
			//声音对象与声音控制对象
			private var sound:Sound;
			private var soundChannel:SoundChannel;
			//播放位置和播放状态
			private var position:Number = 0;
			private var isPlaying:Boolean = false;
			//定时器
			private var soundTimer:Timer = new Timer(100,0);
			
			private function initApp():void{
				//还没加载完,按钮不可用
				btn_play.enabled = false;
				btn_pause.enabled = false;
				//左右声道均衡
				slider_pan.value = 0;
				//音量最大
				slider_volume.value = 1;
				//
				var url:URLRequest = new URLRequest("./music.mp3");
				
				sound = new Sound();
				//声音加载完毕监听
				sound.addEventListener(Event.COMPLETE, completeHandler);
				//声音播放完毕监听
				sound.addEventListener(Event.SOUND_COMPLETE,mp3EndHandler);
				sound.load(url); 
				//滑块与按钮监听
				slider_volume.addEventListener(SliderEvent.CHANGE,changeVolume);
				slider_pan.addEventListener(SliderEvent.CHANGE,changePan);
				btn_play.addEventListener(MouseEvent.CLICK,playSound);  
				btn_pause.addEventListener(MouseEvent.CLICK,pauseSound); 
				//定时器添加监听
				soundTimer.addEventListener(TimerEvent.TIMER,showSoundWave);
				//定义一个发光效果,用于波形图上
				var glow:GlowFilter = new GlowFilter();
				glow.color = 0xAEB4E6;
				glow.blurY = 6;
				glow.strength = 3;
				soundWave.filters = [glow];
			}
			
			//改变音量
			internal function changeVolume(evt:SliderEvent):void{
				//得到声音的soundTransform对象
				var soundControl:SoundTransform = soundChannel.soundTransform;     
				soundControl.volume = evt.value;
				//应用新的设置
				soundChannel.soundTransform = soundControl;
			}
			
			//左右声道
			internal function changePan(evt:SliderEvent):void{
				var soundControl:SoundTransform = soundChannel.soundTransform;     
				soundControl.pan = evt.value;
				soundChannel.soundTransform = soundControl;
			}
			
			//加载完毕
			internal function completeHandler(evt:Event):void{
				btn_play.enabled = true;
				btn_pause.enabled = true;
			}
			
			//播放完毕
			internal function mp3EndHandler(evt:Event):void{
				position = 0; 
				soundTimer.stop();
				isPlaying = false;
			}
			
			//开始播放
			internal function playSound(evt:MouseEvent):void{
				soundChannel = sound.play();
				isPlaying = true;
				position = 0;        
				soundTimer.start();
			}
			
			//暂停
			internal function pauseSound(evt:MouseEvent):void{
				//判断是否在播放       
				if(isPlaying){
					position = soundChannel.position; 
					soundChannel.stop();
					soundTimer.stop()
				}else{
					soundChannel = sound.play(position);
					soundTimer.start();
				}
				isPlaying = !isPlaying;
			}
			
			//显示波形
			internal function showSoundWave(evt:TimerEvent):void{
				
				var g:Graphics = soundWave.graphics;
				//清除以前绘制对象
				g.clear();
				//接受波形数据
				var soundData:ByteArray = new ByteArray();
				SoundMixer.computeSpectrum(soundData,true,0);
				//线条样式
				g.lineStyle(1,0x006699,1);
				//i每次加2,读取128个数据单位
				//0~255是左声道,256~512是右声道
				for(var i:Number = 0;i<256;i+=2){
					//读取32位的浮点数
					var n:Number = soundData.readFloat();
					//放大32倍,看得更清楚
					g.lineTo(i,36*n);
					g.moveTo(i,36*n);
				}
			}
		]]>
	</fx:Script>
	
	<s:Panel x="37" y="51" width="337" height="170" title="Mp3播放器">
		<s:HSlider id="slider_volume" x="42" y="18" width="90" 
				   minimum="0" maximum="1" liveDragging="true"/>
		<s:HSlider id="slider_pan" x="215" y="18" width="90" 
				   minimum="-1" maximum="1" liveDragging="true"/>
		<s:Label x="3" y="19" text="音量:"/>
		<s:Label x="154" y="20" text="左右声道:"/>
		<s:Group styleName="soundBox" x="6" y="58" width="256" height="36">
			<s:Group width="100%" height="100%" id="soundWave" >
				
			</s:Group>
		</s:Group>
		<s:HGroup bottom="10">			
			<s:Spacer width="2" />
			<s:Button label="播放" id="btn_play" width="50" height="20"/>
			<s:Spacer />
			<s:Button label="暂停" id="btn_pause"  width="50" height="20"/>			
		</s:HGroup>
	</s:Panel>
</s:Application>
评论

全部评论(0)

回到顶部