《Flex播放器(实现播放、缓冲进度条和音频曲线显示)_.docx》由会员分享，可在线阅读，更多相关《Flex播放器(实现播放、缓冲进度条和音频曲线显示)_.docx（17页珍藏版）》请在三一文库上搜索。
1、Flex播放器(实现播放、缓冲进度条和音频曲线显示)_ 一时兴起，玩起了Flex，原来还想要做个Flex博客，不过目前还只能在里面树个公告。没方法做完啊，河蟹的个杯具的！Flex布局不像是CSS，精致Flash动画不是拖一个两个控件就能做出来滴，而是一笔一条线绘制出来滴！这些我都还不熟识，全部折腾快一个星期了，每天都是搞到头大才睡觉，今日最终能出一个简洁的播放器。 始终很喜爱音乐这个东西，喜爱Jay，更喜爱他的歌，也很崇拜小猪，他的一段灰色空间曾让我激流奋进，想过自己能做个播客放自己喜爱听的歌曲，出于自恋那样会更有一点点满足感。呃走神了，前二天无意看到一群老师的个人博客，深深的被他们的博文所吸
2、引，无论是谈技术还是记录生活的，写得都是那么的真实，还有坚持每日一博的，坚持不放弃. mx:ProgressBar实现加载歌曲缓冲进度条 ProgressBar有三大mode模式，分别为event、manual、polled，event为基于大事驱动模式，可设置source对象自动显示加载进程；manual为手动模式，需要调用ProgressBar.setProgress()方法设置滚动条进度；polled为轮询模式，本例用法的manual模式，Sound加载load恳求歌曲添加一个ProgressEvent.PROGRESS处理中监听大事，然后依据Sound已加载的bytes和bytesTo
3、tal数，设置setProgress进度。这里需要留意在切换歌曲的时候先要移除ProgressEvent.PROGRESS大事，否则之前播放歌曲还未加载完又切换load新歌曲时回消失ProgressBar触发多个PROGRESS大事被设置进度消失来回滚动的问题。 mx:HSlide调整滑秆 这个控件在本例中2处用法，实现对播放进度和声音大小的掌握。最一开头调整播放进度的问题难倒了我很久，由于在歌曲播放过程中HSlide要自动滑动当前播放位置，同时又需要能手动拖动播放位置，HSlide原来有一个很好的change大事用来侦听转变，但是我用法定时器设置HSlide的value的时竟然也给我触发ch
4、ange大事，参考了Adobe哥官网的关心文档，说是Slider 组件的值因鼠标或键盘交互操作而转变时调度，假如 liveDragging 属性是 true，则在用户移动滑块时持续调度该大事。 假如 liveDragging 是 false，则在用户释放滑块时调度该大事。但是无论我怎么设置，在代码里转变了HSlide的value值怎会触发change大事，不是说在用户交互操作而转变时调度吗？无赖啊，后来只能折中实行监听thumbDrag滑秆拖动时大事，这个大事Adobe哥的说明是当按下滑块并随后随鼠标移动时调度，这样会有一个小问题，就是需要拖动滑秆按下时才会触发，点击无效。 SoundMput
5、eSpectrum()分析音频曲线 本例你看到显示的音频曲线其实是右64个绘制成条状的Canvas控件排列而成，然后用法定时器每间隔100毫秒重新设置他们的scaleY位置以呈现出变化曲线的效果，代码只有三行很简洁，具体可参见我下面源码给出的timerTick大事。这里为什么要用定时器呢？在网上看别人是监听Event.ENTER_FRAME大事重绘音频曲线的，不想搞那么麻烦就挺直用定时器了，任凭依据bytesTotal和bytesLoaded计算下歌曲播放时间，用法100毫秒的定时器也并好耗站资源，CPU没有涨很高。 效果图： mxml代码如下： 代码如下: ?xml version=1.0
6、encoding=utf-8? mx:Application xmlns:mx=http:/ verticalGap=0 scroll=false backgroundAlpha=0 horizontalScrollPolicy=off verticalScrollPolicy=off verticalAlign=middle horizontalAlign=center initialize=init(event) layout=vertical fontSize=14 paddingLeft=0 paddingTop=0 paddingRight=0 paddingBottom=0 mx:
7、Script !CDATA import mx.formatters.DateFormatter; import mx.effects.SoundEffect; import mx.events.SliderEvent; import mx.core.SoundAsset; import mx.controls.Alert; import mx.managers.CursorManager; import flash.media.*; import flash.utils.Timer; Embed(source=images/cursor.gif) private var cursorHand
8、 : Class;/图标 private var xml:XML; private var xmlPath:String = /flex/bin-debug/song.xml; private var currIndex : Number = 0; private var song :Sound; private var channel :SoundChannel; private var position : Number = 0; / 保存 512 个声音波形的快照 private var bytes:ByteArray = new ByteArray(); / SoundBar 的个数
9、private var barNum:uint = 64; / 保存全部 SoundBar 的引用 private var soundBars:Array = new Array(); /定时器 private var timer : Timer; /Application的initialize初试化大事 private function init(event:Event):void var loader:URLLoader = new URLLoader(); loader.load(new URLRequest(xmlPath); loader.addEventListener(Event
10、.COMPLETE,Xml_Complete); timer = new Timer(100); timer.addEventListener(TimerEvent.TIMER,timerTick); var barWidth:Number = boxSoundBar.width*1.00/barNum; / 初始化Canvas为音频条，放入舞台并加入数组 for (var i:uint = 0; i barNum; i+) var soundBar:Canvas = new Canvas(); soundBar.width = barWidth; soundBar.height = boxS
11、oundBar.height; soundBar.x = i * barWidth; soundBar.y = 0; var g:Graphics = soundBar.graphics; g.lineStyle(1,0x6688AA,1); g.beginGradientFill(GradientType.RADIAL,0x33cc00,0x456628,1,1,0,255,null,SpreadMethod.REFLECT,InterpolationMethod.RGB,0); g.drawRect(0,0,soundBar.width,soundBar.height); g.endFil
12、l(); boxSoundBar.addChild(soundBar); soundBars.push(soundBar); / 隐蔽一些内建的鼠标右键菜单项 this.contextMenu.hideBuiltInItems(); var contextMenuItem : ContextMenuItem = new ContextMenuItem(Powered By: Jonllen); contextMenuItem.enabled = false; contextMenu.customItems.push(contextMenuItem); this.contextMenu.cust
13、omItems.push(contextMenuItem); /更改鼠标图标 CursorManager.setCursor(cursorHand); /读取XML文件完成大事 private function Xml_Complete(event:Event):void xml = new XML(event.target.data); if(xml.item.length()=1) listSong.dataProvider= xml.item.name; listSong.selectedIndex = 0; /手动触发List的Change大事 listSong.dispatchEve
14、nt(new mx.events.ListEvent(Event.CHANGE, true, false); /List选择歌曲转变大事 private function Xml_Change(event:Event):void currIndex = event.target.selectedIndex; timer.stop(); /停止声音文件的加载 if( song!=null ) /移除之前加载PROGRESS大事对songProgress进度条的掌握 song.removeEventListener(ProgressEvent.PROGRESS,songProgress_Chang
15、e); if( song.isBuffering ) song.close(); song = new Sound(); var url : String = xml.itemcurrIndex.url; var source:URLRequest = new URLRequest(url); song.load(source); song.addEventListener(ProgressEvent.PROGRESS, songProgress_Change); song.addEventListener(IOErrorEvent.IO_ERROR, songProgress_Error);
16、 position = 0; songStart(); /歌曲播放完成 private function songProgress_Complete(e:Event):void if(currIndex = xml.item.length()-1) currIndex = 0; else currIndex+; listSong.selectedIndex = currIndex; listSong.dispatchEvent(new mx.events.ListEvent(Event.CHANGE, true, false); /加载歌曲失败 private function songPro
17、gress_Error(e:IOErrorEvent):void Alert.show(文件不存在！,系统提示); /开头播放歌曲 private function songStart():void if ( channel != null ) channel.stop(); lblName.text = xml.itemcurrIndex.name; channel = song.play(position,int.MAX_VALUE); var length :Number = song.length*song.bytesTotal/song.bytesLoaded; var date :
18、 Date = new Date(); date.time = length; var dt : DateFormatter = new DateFormatter(); dt.formatString=NN:SS; var totalTime : String = dt.format(date); date.time = channel.position; lblTime.text = dt.format(date) + | + totalTime; lblStatus.text = 播放; var soundcontrol : SoundTransform = channel.soundT
19、ransform; soundcontrol.volume = volumeSlider.value; channel.soundTransform= soundcontrol; timer.start(); boxSoundBar.visible = true; /停止歌曲播放 private function songStop():void timer.stop(); position = 0; boxSoundBar.visible = false; lblTime.text = 00:00 |+lblTime.text.split(|)1; lblStatus.text = 停止; s
20、ongSlider.value = songSlider.minimum; songProgress.setProgress(songProgress.minimum,songProgress.maximum); if ( channel != null ) channel.stop(); /暂停歌曲播放 private function songPause():void if ( channel != null ) timer.stop(); position = channel.position; channel.stop(); lblStatus.text = 暂停; /加载歌曲进度条显
21、示 private function songProgress_Change(e:ProgressEvent):void var percent:int = Math.round(e.bytesLoaded * 100 / e.bytesTotal); songProgress.setProgress(e.bytesLoaded,e.bytesTotal); /定时器方法 private function timerTick( e:TimerEvent):void if( channel!=null) var length :Number = song.length*song.bytesTot
22、al/song.bytesLoaded; var date : Date = new Date(); date.time = length; var dt : DateFormatter = new DateFormatter(); dt.formatString=NN:SS; var totalTime : String = dt.format(date); date.time = channel.position; lblTime.text = dt.format(date) + | + totalTime; songSlider.value=100*channel.position/le
23、ngth; if( songSlider.value=songSlider.maximum) timer.stop(); songProgress_Complete(null); return; SoundMputeSpectrum(bytes, false, 0); for (var i:uint = 0; i barNum; i+) soundBarsi.scaleY = bytes.readFloat(); /歌曲进度调整大事 internal function songSlider_Change(e:SliderEvent):void timer.stop(); if ( channe
24、l != null ) var length :Number = song.length*song.bytesTotal/song.bytesLoaded; position = e.value*length/100; songStart(); /声音大小调整大事 internal function changeVolume(evt:SliderEvent):void if ( channel != null ) var soundcontrol : SoundTransform = channel.soundTransform; soundcontrol.volume = evt.value
25、; channel.soundTransform= soundcontrol; /设置歌曲播放时间和总时间 private function setTimeStatus():void var length :Number = song.length*song.bytesTotal/song.bytesLoaded; var date : Date = new Date(); date.time = length; var dt : DateFormatter = new DateFormatter(); dt.formatString=NN:SS; var totalTime : String
26、 = dt.format(date); date.time = channel.position; lblTime.text = dt.format(date) + | + totalTime; /mx:Script mx:HBox width=100% verticalGap=0 verticalAlign=middle horizontalAlign=center mx:Canvas width=440 borderColor=#CCCCCC borderStyle=solid height=171 mx:Label id=lblName x=5 fontSize=18 y=10 text
27、=/ mx:HBox id=boxSoundBar horizontalGap=0 verticalAlign=middle width=192 height=50 x=5 y=39 visible=false/mx:HBox mx:ProgressBar id=songProgress label= width=290 height=3 mode=manual textAlign=left labelPlacement=center fontSize=3 x=10 y=97 minimum=0 maximum=100 barColor=yellow trackColors=white, ha
28、loSilver/ mx:HSlider id=songSlider styleName=song value=0 showTrackHighlight=true x=5 y=85 thumbDrag=songSlider_Change(event) width=300 height=22 minimum=0 maximum=100 liveDragging=false snapInterval=1 toolTip=拖动调整播放进度 /mx:HSlider mx:Label id=lblStatus x=243 y=41 text=/ mx:Label id=lblTime x=205 y=6
29、6 text=00:00 | 5:23/ mx:Button x=10 y=124 label=Play click=songStart()/ mx:Button x=74 y=124 label=Pause click=songPause()/ mx:Button x=152 y=124 label=Stop click=songStop()/ mx:HSlider id=volumeSlider styleName=volume change=changeVolume(event) showTrackHighlight=true value=0.5 x=222 y=133 width=81 minimum=0 maximum=10 liveDragging=true snapInterval=0.1 toolTip=音量调整 / mx:Label x=308 fontSize=18 y=10 text=歌曲列表/ mx:List id=listSong alpha=0.25 x=308 y=43 height=116 change=Xml_Change(event) width=130 toolTip=点击选择歌曲/mx:List /mx:Canvas /mx:HBox /mx:Application 更多信息请查看IT技术专栏 .