Flex4 - 制作一个带波形的MP3播放器
下面是一个使用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>