一時興起，玩起了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代碼如下：
// 保存 512 個聲音波形的快照
private var bytes:ByteArray = new ByteArray();
// SoundBar 的個數
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.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 = 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);
}
// 隱藏一些內建的鼠標右鍵菜單項
this.contextMenu.hideBuiltInItems();
var contextMenuItem : ContextMenuItem = new ContextMenuItem("Powered By: Jonllen");
contextMenuItem.enabled = false;
contextMenu.customItems.push(contextMenuItem);
this.contextMenu.customItems.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.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;
}
]]>
</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="拖動調整播放進度">
</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="音量調節" />
<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>
新聞熱點
疑難解答
