Flex4实现 音频播放器 显示语音波形

直接上代码，在Flash Builder 4中新建 FLEX项目，复制代码可以可以直接运行

需要将 file = "D:\\voice\\3791.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"    creationComplete="initMusic()"    height="304" width="808"><s:layout><s:BasicLayout/></s:layout><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><fx:Script><![CDATA[import com.adobe.serialization.json.JSON;import flash.utils.ByteArray;import mx.collections.ArrayCollection;import mx.controls.Alert;import mx.core.UIComponent;import mx.events.IndexChangedEvent;import mx.managers.PopUpManager;import mx.printing.FlexPrintJob;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;import mx.rpc.http.HTTPService;private var serverIP:String = "http://127.0.0.1";private var ba:ByteArray = new ByteArray(); private var soundRequest:URLRequest;private var sound:Sound = new Sound(); //使用Sound对象来获取音乐文件播放声音private var chanel:SoundChannel;       //引入SoundChannel对象来精确控制声音private var vol:SoundTransform;        //通过设置SoundTransform对象的volume属性控制音量private var stopPosition:int=0;        //使用stopPosition记录暂停音乐时的位置private var soundState:int=1;          //使用soundState记录是否静音private var soundValue:int=2;          //记录静音前的音量private var playState:int=0;           //使用playState记录声音是否被停止（包括暂停）private var totalTime:String = "00:00";//语音文件总时间private var params:Object;             //URL参数列表private var _sperite:Sprite;           //用于绘制声音波形//初始化private function initMusic():void{var args:Object = getParams();      //获取URL中的参数列表var file:String = serverIP + args.audio+".mp3";//得到语音文件名//file = "http://127.0.0.1/voice/3416.mp3";//对播放控制按钮和滑动条添加鼠标动作监听soundBtn.addEventListener(MouseEvent.CLICK,onSoundClick);//有声音soundBtnJ.addEventListener(MouseEvent.CLICK,onSoundClick);//静音playBtn.addEventListener(MouseEvent.CLICK,onPlayBtnClick);//播放pauseBtn.addEventListener(MouseEvent.CLICK,onPlayBtnClick);//暂停proccessBar.addEventListener(MouseEvent.MOUSE_DOWN,onProccessBarDown);//播放进度条proccessBar.addEventListener(MouseEvent.MOUSE_UP,onProccessBarUp);//播放进度条//组件初始状态设置soundSlide.value=2;//默认音量等于2if(file != null && file != ""){var buffer:SoundLoaderContext = new SoundLoaderContext(5000);soundRequest = new URLRequest(file);sound.load(soundRequest,buffer);sound.addEventListener(Event.COMPLETE, loaded);//监听加载事件sound.addEventListener(ProgressEvent.PROGRESS, progressHandler);//缓冲事件}//控制音量vol = new SoundTransform();vol.volume = soundSlide.value;}//缓冲事件方法private function progressHandler(event:ProgressEvent):void{//计算缓冲方框的宽度(滑块本身也有一定的宽度,减去约10个像素宽度)if (sound.bytesLoaded>0){ bufferRect.width = sound.bytesLoaded / sound.bytesTotal*(proccessBar.width);}  }private function onProccessBarDown(e:MouseEvent):void{this.removeEventListener(Event.ENTER_FRAME,onEnterFrame);}private function onProccessBarUp(e:MouseEvent):void{this.addEventListener(Event.ENTER_FRAME,onEnterFrame);}//读取语音数据，一边取一边画private function loaded(event:Event):void {var width:Number = box.width;var height:Number =box.height;//获取语音长度，毫秒var lengthTime:Number = sound.length;totalTime = formatTime(lengthTime);playTime.text = totalTime;_sperite = new Sprite();//建立影片精灵   var uicomponent:UIComponent = new UIComponent();  uicomponent.addChild(_sperite);  box.addElement(uicomponent);doDraw(0.1,0xffffff,0,height/2,width-2,height/2);  //绘制中心轴线//绘制横轴for(var i:int=20;i<height;i+=20){doDraw(0.1,0xCCCCCC,0,i,width-2,i);  //绘制中心轴线}//绘制纵轴for(var j:int=40;j<width;j+=40){doDraw(0.1,0xCCCCCC,j,0,j,height);  //绘制中心轴线}var dataCount:Number = lengthTime*44.1;sound.extract(ba, dataCount);  //将所有的语音数据读取到字节数组里面ba.position = 0;//文件指针的当前位置var startX:Number = 0,startY:Number = 100;//开始点var m:int = 1;//记录数据个数while(ba.bytesAvailable > 0){var value:Number = ba.readFloat();var endX:Number = m*width/dataCount;var endY:Number = height/2;endY = (1-value)*(height/2);//正数doDraw(0.1, 0x00FF00, startX, startY, endX, endY);//绘制波形startX = endX; startY = endY;if(ba.bytesAvailable > 0){ba.position += 84;m += 11;}}//完成自动播放playState=1;chanel = sound.play(stopPosition);chanel.soundTransform=vol;this.addEventListener(Event.ENTER_FRAME,onEnterFrame);playBtn.visible=false;pauseBtn.visible=true;pState.text = "状态： 播放";load.visible = false;}//绘制曲线private function doDraw(cx:Number,color:uint,startX:Number,startY:Number,endX:Number,endY:Number):void{  _sperite.graphics.lineStyle(cx,color,1);  _sperite.graphics.moveTo(startX,startY);  _sperite.graphics.lineTo(endX,endY);  }  //播放暂停private function onPlayBtnClick(e:MouseEvent):void{//正常状态控制播放与暂停if(playState==1){playState=0;stopPosition = chanel.position; chanel.stop();this.removeEventListener(Event.ENTER_FRAME,onEnterFrame);playBtn.visible=true;pauseBtn.visible=false;pState.text = "状态： 暂停";}else if(playState==0){playState=1;chanel = sound.play(stopPosition);chanel.soundTransform=vol;this.addEventListener(Event.ENTER_FRAME,onEnterFrame);playBtn.visible=false;pauseBtn.visible=true;pState.text = "状态： 播放";}}//停止播放public function musStop():void{playState=0;stopPosition = 0; this.removeEventListener(Event.ENTER_FRAME,onEnterFrame);proccessBar.value=0;playTime.text="00:00/"+totalTime;playBtn.visible=true;pauseBtn.visible=false;pState.text = "状态： 停止";if(chanel!=null){chanel.stop();}}//静音处理按钮private function onSoundClick(e:MouseEvent):void{//点击正常状态的静音按钮处理函数if(soundState==1){soundState=0;vol.volume=0;soundValue = soundSlide.value;soundSlide.value=0;soundBtnJ.visible=true;soundBtn.visible=false;}else if(soundState==0){soundState=1;soundSlide.value = soundValue;vol.volume=soundSlide.value;soundBtnJ.visible=false;soundBtn.visible=true;}chanel.soundTransform=vol;}//控制音量大小private function soundSlideChange():void{vol.volume=soundSlide.value;chanel.soundTransform=vol;}//控制播放进度private function onEnterFrame(e:Event):void{if(chanel!=null){proccessBar.value=chanel.position*(100/sound.length);playTime.text=formatTime(chanel.position) + "/" + totalTime;if(proccessBar.value>99){musStop();}}}//鼠标拖动进度条更改播放进度的处理private function changePos():void{if(chanel!=null){chanel.stop();//完成自动播放playState=1;chanel = sound.play(proccessBar.value*sound.length/100);chanel.soundTransform=vol;this.addEventListener(Event.ENTER_FRAME,onEnterFrame);playBtn.visible=false;pauseBtn.visible=true;pState.text = "状态： 播放";}}//时间格式处理private function formatTime(time:Number):String{var s:String;var m:Number = Math.floor(time / 60000);//分钟if(m >= 60){//小时var h:Number = Math.floor(m / 60);if (h < 10)s = "0" + h;elses = String(h);//分钟m = m - h*60;if (m < 10)s += ":0" + m;elses += ":" + String(m);}else{if (m < 10)s = "0" + m;elses = String(m);}m = Math.floor((time / 1000 ) % 60)if (m < 10)s += ":0" + m;elses += ":" + m;return s;}//从Url中得到参数，得到   ？ 以后的所有private function getParams():Object {params = {};//获取整个URIvar query:String = ExternalInterface.call("window.location.search.substring", 1);var url:String = ExternalInterface.call("window.location.href.toString", 1);var index:int = url.indexOf("dsas")serverIP = url.substring(0,index-1);if(query) {var pairs:Array = query.split("&");for(var i:uint=0; i < pairs.length; i++) {var pos:int = pairs[i].indexOf("=");if(pos != -1) {var argname:String = pairs[i].substring(0, pos);var value:String = pairs[i].substring(pos+1);params[argname] = value;}}}return params;}//下载语音文件private function downLoadsVoice():void{var args:Object = getParams();      //获取URL中的参数列表var fileName:String = args.audio;var file:String = serverIP + fileName + ".mp3";//得到语音文件名var urlReq:URLRequest = new URLRequest(file);  var fileRef:FileReference = new FileReference(); var index:int = fileName.indexOf("voice/");var tempFile:String = fileName.substring(index+6,fileName.length)+".mp3";fileRef.download(urlReq,tempFile);}]]></fx:Script><s:Panel id="panel" x="1.3" y="1.35" width="806" height="302" title="乘务员标准化作业语音监控系统"  backgroundColor="#448FF5" backgroundAlpha="0.72" ><s:Label x="738" y="-24" text="状态：暂停" id="pState" color="#FF0404" fontWeight="bold"/><s:BorderContainer x="2" y="2" width="800" height="200" id="box" backgroundColor="#0211D6"><s:Label x="260" y="84" text="语音加载完成后自动播放，请稍后..." id="load" fontSize="20" color="#FC0000" fontWeight="bold" fontStyle="italic" fontFamily="Courier New"/></s:BorderContainer><s:BorderContainer id="bufferRect" x="1" y="210" width="7" height="7" buttonMode="true" borderColor="red" backgroundColor="red"></s:BorderContainer><s:HSlider x="1" y="207" width="801" id="proccessBar" change="changePos()"    minimum="0" maximum="100" snapInterval="0.1" liveDragging="true"    showDataTip="false" height="13" alpha="0.5" buttonMode="true"/><mx:Image x="6" y="227" source="assets/play.png" id="playBtn"/><mx:Image x="6" y="227" source="assets/pause.png" id="pauseBtn" visible="false"/><mx:Image x="56" y="227" source="assets/stop.png" id="stopBtn" click="musStop()"/><mx:Image x="106" y="227" source="assets/volume.png" id="soundBtn"/><mx:Image x="106" y="227" source="assets/volumeJ.png" id="soundBtnJ" visible="false"/><s:HSlider x="149" y="238" width="107" id="soundSlide" change="soundSlideChange()" minimum="0" maximum="5"/><s:Label y="224" right="1" text="00:00" id="playTime"/><s:Button x="758" y="247" label="下载" width="46" click="downLoadsVoice()" id="dl"/></s:Panel></s:Application>