Flex播放器(實現播放、緩沖進度條和音頻曲線顯示)

2024-09-08 18:17:05

字體：大中小

來源：轉載

供稿：網友

一時興起，玩起了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()分析音頻曲線

本例你看到顯示的音頻曲線其實是右64個繪制成條狀的Canvas控件排列而成，然后使用定時器每間隔100毫秒重新設置他們的scaleY位置以呈現出變幻曲線的效果，代碼只有三行很簡單，具體可參見我下面源碼給出的timerTick事件。這里為什么要用定時器呢？在網上看別人是監聽Event.ENTER_FRAME事件重繪音頻曲線的，不想搞那么麻煩就直接用定時器了，隨便根據bytesTotal和bytesLoaded計算下歌曲播放時間，使用100毫秒的定時器也并好耗站資源，CPU沒有漲很高。

效果圖：

mxml代碼如下：

復制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 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: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 : 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;