Flex播放器(实现播放、缓冲进度条和音频曲线显示)

高洛峰

发布时间：2016-12-27 16:51:42

1774人浏览过

来源于php中文网

原创

一时兴起，玩起了flex，本来还想要做个flex博客，不过目前还只能在里面树个公告。。。没办法做完啊，河蟹的个杯具的！flex布局不像是css，精美flash动画不是拖一个两个控件就能做出来滴，而是一笔一条线绘制出来滴！这些我都还不熟悉，所有折腾快一个星期了，每天都是搞到头大才睡觉，今天终于能出一个简单的播放器。

一直很喜欢音乐这个东西，喜欢Jay，更喜欢他的歌，也很崇拜小猪，他的一段灰色空间曾让我激流奋进，想过自己能做个播客放自己喜欢听的歌曲，出于自恋那样会更有一点点满足感。呃~走神了，前二天无意看到一群教师的个人博客，深深的被他们的博文所吸引，无论是谈技术还是记录生活的，写得都是那么的真切，还有坚持每日一博的，坚持不放弃...

mx:ProgressBar实现加载歌曲缓冲进度条

ProgressBar有三大mode模式，分别为event、manual、polled，event为基于事件驱动模式，可设置source对象自动显示加载进程；manual为手动模式，需要调用ProgressBar.setProgress()方法设置滚动条进度；polled为轮询模式，本例使用的manual模式，Sound加载load请求歌曲添加一个ProgressEvent.PROGRESS处理中监听事件，然后根据Sound已加载的bytes和bytesTotal数，设置setProgress进度。这里需要注意在切换歌曲的时候先要移除ProgressEvent.PROGRESS事件，否则之前播放歌曲还未加载完又切换load新歌曲时回出现ProgressBar触发多个PROGRESS事件被设置进度出现来回滚动的问题。

mx:HSlide调节滑秆

这个控件在本例中2处使用，实现对播放进度和声音大小的控制。最一开始调整播放进度的问题难倒了我很久，因为在歌曲播放过程中HSlide要自动滑动当前播放位置，同时又需要能手动拖动播放位置，HSlide本来有一个很好的change事件用来侦听改变，但是我使用定时器设置HSlide的value的时竟然也给我触发change事件，参考了Adobe哥官网的帮助文档，说是Slider 组件的值因鼠标或键盘交互操作而改变时调度，如果 liveDragging 属性是 true，则在用户移动滑块时持续调度该事件。如果 liveDragging 是 false，则在用户释放滑块时调度该事件。但是无论我怎么设置，在代码里改变了HSlide的value值怎会触发change事件，不是说在用户交互操作而改变时调度吗？无赖啊，后来只能折中采取监听thumbDrag滑秆拖动时事件，这个事件Adobe哥的解释是当按下滑块并随后随鼠标移动时调度，这样会有一个小问题，就是需要拖动滑秆按下时才会触发，点击无效。

SoundMixer.computeSpectrum()分析音频曲线

蕉点AI

AI电商商品图生成平台 | 智能商品素材制作工具

下载

本例你看到显示的音频曲线其实是右64个绘制成条状的Canvas控件排列而成，然后使用定时器每间隔100毫秒重新设置他们的scaleY位置以呈现出变幻曲线的效果，代码只有三行很简单，具体可参见我下面源码给出的timerTick事件。这里为什么要用定时器呢？在网上看别人是监听Event.ENTER_FRAME事件重绘音频曲线的，不想搞那么麻烦就直接用定时器了，随便根据bytesTotal和bytesLoaded计算下歌曲播放时间，使用100毫秒的定时器也并好耗站资源，CPU没有涨很高。

效果图：

Flex播放器(实现播放、缓冲进度条和音频曲线显示)

mxml代码如下：



    
        =1)
                {
                    listSong.dataProvider= xml.item.name;
                    listSong.selectedIndex = 0;
                    //手动触发List的Change事件
                    listSong.dispatchEvent(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_Change);
                    if( song.isBuffering )
                        song.close();
                }
                
                song = new Sound();
                var url : String = xml.item[currIndex].url;
                var source:URLRequest = new URLRequest(url);
                song.load(source);
                song.addEventListener(ProgressEvent.PROGRESS, songProgress_Change);
                song.addEventListener(IOErrorEvent.IO_ERROR, songProgress_Error);
                
                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 songProgress_Error(e:IOErrorEvent):void {
                Alert.show("文件不存在！","系统提示");
            }
            
            //开始播放歌曲
            private function songStart():void {
                
                if ( channel != null ){
                    channel.stop();
                }
                
                lblName.text = xml.item[currIndex].name;
                channel = song.play(position,int.MAX_VALUE);
                
                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 = dt.format(date);
                
                date.time = channel.position;
                lblTime.text = dt.format(date) + " | " + totalTime;
                lblStatus.text = "播放";
                
                var soundcontrol : SoundTransform = channel.soundTransform;
                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 = "停止";
                songSlider.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 = "暂停";
                }
            }
            
            //加载歌曲进度条显示
            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.bytesTotal/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/length;
                    if( songSlider.value>=songSlider.maximum){
                        timer.stop();
                        songProgress_Complete(null);
                        return;
                    }
                    
                    SoundMixer.computeSpectrum(bytes, false, 0);
                    for (var i:uint = 0; i < barNum; i++)  {
                       soundBars[i].scaleY = bytes.readFloat();
                    }
                    
                }
            }
            
            //歌曲进度调整事件
            internal function songSlider_Change(e:SliderEvent):void{
                timer.stop();
                if ( channel != 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;
                    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 = dt.format(date);
                
                date.time = channel.position;
                lblTime.text = dt.format(date) + " | " + totalTime;
            }
            
        ]]>