Flex播放器(實(shí)現(xiàn)播放、緩沖進(jìn)度條和音頻曲線(xiàn)顯示)

2024-09-08 18:17:05

字體：大中小

供稿：網(wǎng)友

一時(shí)興起，玩起了Flex，本來(lái)還想要做個(gè)Flex博客，不過(guò)目前還只能在里面樹(shù)個(gè)公告。。。沒(méi)辦法做完啊，河蟹的個(gè)杯具的！Flex布局不像是CSS，精美Flash動(dòng)畫(huà)不是拖一個(gè)兩個(gè)控件就能做出來(lái)滴，而是一筆一條線(xiàn)繪制出來(lái)滴！這些我都還不熟悉，所有折騰快一個(gè)星期了，每天都是搞到頭大才睡覺(jué)，今天終于能出一個(gè)簡(jiǎn)單的播放器。

一直很喜歡音樂(lè)這個(gè)東西，喜歡Jay，更喜歡他的歌，也很崇拜小豬，他的一段灰色空間曾讓我激流奮進(jìn)，想過(guò)自己能做個(gè)播客放自己喜歡聽(tīng)的歌曲，出于自戀那樣會(huì)更有一點(diǎn)點(diǎn)滿(mǎn)足感。呃~走神了，前二天無(wú)意看到一群教師的個(gè)人博客，深深的被他們的博文所吸引，無(wú)論是談技術(shù)還是記錄生活的，寫(xiě)得都是那么的真切，還有堅(jiān)持每日一博的，堅(jiān)持不放棄...

mx:ProgressBar實(shí)現(xiàn)加載歌曲緩沖進(jìn)度條

ProgressBar有三大mode模式，分別為event、manual、polled，event為基于事件驅(qū)動(dòng)模式，可設(shè)置source對(duì)象自動(dòng)顯示加載進(jìn)程；manual為手動(dòng)模式，需要調(diào)用ProgressBar.setProgress()方法設(shè)置滾動(dòng)條進(jìn)度；polled為輪詢(xún)模式，本例使用的manual模式，Sound加載load請(qǐng)求歌曲添加一個(gè)ProgressEvent.PROGRESS處理中監(jiān)聽(tīng)事件，然后根據(jù)Sound已加載的bytes和bytesTotal數(shù)，設(shè)置setProgress進(jìn)度。這里需要注意在切換歌曲的時(shí)候先要移除ProgressEvent.PROGRESS事件，否則之前播放歌曲還未加載完又切換load新歌曲時(shí)回出現(xiàn)ProgressBar觸發(fā)多個(gè)PROGRESS事件被設(shè)置進(jìn)度出現(xiàn)來(lái)回滾動(dòng)的問(wèn)題。

mx:HSlide調(diào)節(jié)滑稈

這個(gè)控件在本例中2處使用，實(shí)現(xiàn)對(duì)播放進(jìn)度和聲音大小的控制。最一開(kāi)始調(diào)整播放進(jìn)度的問(wèn)題難倒了我很久，因?yàn)樵诟枨シ胚^(guò)程中HSlide要自動(dòng)滑動(dòng)當(dāng)前播放位置，同時(shí)又需要能手動(dòng)拖動(dòng)播放位置，HSlide本來(lái)有一個(gè)很好的change事件用來(lái)偵聽(tīng)改變，但是我使用定時(shí)器設(shè)置HSlide的value的時(shí)竟然也給我觸發(fā)change事件，參考了Adobe哥官網(wǎng)的幫助文檔，說(shuō)是Slider 組件的值因鼠標(biāo)或鍵盤(pán)交互操作而改變時(shí)調(diào)度，如果 liveDragging 屬性是 true，則在用戶(hù)移動(dòng)滑塊時(shí)持續(xù)調(diào)度該事件。如果 liveDragging 是 false，則在用戶(hù)釋放滑塊時(shí)調(diào)度該事件。但是無(wú)論我怎么設(shè)置，在代碼里改變了HSlide的value值怎會(huì)觸發(fā)change事件，不是說(shuō)在用戶(hù)交互操作而改變時(shí)調(diào)度嗎？無(wú)賴(lài)啊，后來(lái)只能折中采取監(jiān)聽(tīng)thumbDrag滑稈拖動(dòng)時(shí)事件，這個(gè)事件Adobe哥的解釋是當(dāng)按下滑塊并隨后隨鼠標(biāo)移動(dòng)時(shí)調(diào)度，這樣會(huì)有一個(gè)小問(wèn)題，就是需要拖動(dòng)滑稈按下時(shí)才會(huì)觸發(fā)，點(diǎn)擊無(wú)效。

SoundMixer.computeSpectrum()分析音頻曲線(xiàn)

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

效果圖：

mxml代碼如下：

復(fù)制代碼代碼如下:

<?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;//圖標(biāo)

            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;