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

一直很喜歡音樂這個(gè)東西，喜歡Jay，更喜歡他的歌，也很崇拜小豬，他的一段灰色空間曾讓我激流奮進(jìn)，想過自己能做個(gè)播客放自己喜歡聽的歌曲，出于自戀那樣會(huì)更有一點(diǎn)點(diǎn)滿足感。呃~走神了，前二天無意看到一群教師的個(gè)人博客，深深的被他們的博文所吸引，無論是談技術(shù)還是記錄生活的，寫得都是那么的真切，還有堅(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為輪詢模式，本例使用的manual模式，Sound加載load請(qǐng)求歌曲添加一個(gè)ProgressEvent.PROGRESS處理中監(jiān)聽事件，然后根據(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)來回滾動(dòng)的問題。

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

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

SoundMixer.computeSpectrum()分析音頻曲線

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

// 保存 512 個(gè)聲音波形的快照

private var bytes:ByteArray = new ByteArray();

// SoundBar 的個(gè)數(shù)

private var barNum:uint = 64;

// 保存所有 SoundBar 的引用

private var soundBars:Array = new Array();

//定時(shí)器

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.COMPLETE,Xml_Complete);

timer = new Timer(100);

timer.addEventListener(TimerEvent.TIMER,timerTick);

var barWidth:Number = boxSoundBar.width*1.00/barNum;

// 初始化Canvas為音頻條，放入舞臺(tái)并加入數(shù)組

for (var i:uint = 0; i < barNum; i++) {

var soundBar:Canvas = new Canvas();

soundBar.width = barWidth;

soundBar.height = boxSoundBar.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.endFill();

boxSoundBar.addChild(soundBar);

soundBars.push(soundBar);

}

// 隱藏一些內(nèi)建的鼠標(biāo)右鍵菜單項(xiàng)

this.contextMenu.hideBuiltInItems();

var contextMenuItem : ContextMenuItem = new ContextMenuItem("Powered By: Jonllen");

contextMenuItem.enabled = false;

contextMenu.customItems.push(contextMenuItem);

this.contextMenu.customItems.push(contextMenuItem);

//更改鼠標(biāo)圖標(biāo)

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;

//手動(dòng)觸發(fā)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事件對(duì)songProgress進(jìn)度條的控制

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("文件不存在！","系統(tǒng)提示");

}

//開始播放歌曲

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 = "暫停";

}

}

//加載歌曲進(jìn)度條顯示

private function songProgress_Change(e:ProgressEvent):void {

var percent:int = Math.round(e.bytesLoaded * 100 / e.bytesTotal);

songProgress.setProgress(e.bytesLoaded,e.bytesTotal);

}

//定時(shí)器方法

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();

}

}

}

//歌曲進(jìn)度調(diào)整事件

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();

}

}

//聲音大小調(diào)整事件

internal function changeVolume(evt:SliderEvent):void{

if ( channel != null ){

var soundcontrol : SoundTransform = channel.soundTransform;

soundcontrol.volume = evt.value;

channel.soundTransform= soundcontrol;

}

}

//設(shè)置歌曲播放時(shí)間和總時(shí)間

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;

}

]]>

</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=""/>

<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, haloSilver]"/>

<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="拖動(dòng)調(diào)整播放進(jìn)度">

</mx:HSlider>

<mx:Label id="lblStatus" x="243" y="41" text=""/>

<mx:Label id="lblTime" x="205" y="66" 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="音量調(diào)節(jié)" />

<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="點(diǎn)擊選擇歌曲"></mx:List>

</mx:Canvas>

</mx:HBox>

</mx:Application>

更多信息請(qǐng)查看IT技術(shù)專欄