給mp3播放器增加音樂波形顯示功能

2008-04-02 16:18:18| 分類： 應用編程 | 標簽： |字號大中小 訂閱

用過winamp的人都知道，winamp有一個音樂波形顯示功能，當播放音樂的時候，有一些音樂波形跟著上下跳動，翩翩起舞，又好看，又專業。那么如何給自己的播放器增加這樣一個波形顯示器呢。

本文給出了一個完整的代碼例子，并一步一步的教你實現的過程。為了，推廣as2.0和as3.0，本文的例子，采用外部純 .as文件編寫，編譯測試時，完全脫離flash，采用FlashDevelop工具編譯。代碼見附錄。

本文的運行效果，可以參考http://www.iu1u.com/res/mywave.swf,本文可以隨意轉載，但請保證文章的完整性。

準確地說，這里實現地是一個偽波形顯示功能。為什么叫做偽波形呢，真正的波形，應該來自實際的音頻數據，對應時間對應頻段的聲音強度高時，就顯示高的柱狀，聲音強度低時，就顯示低的柱狀。但是，對于大部分的用戶來說，實際的音頻數據對他們來說也沒有什么概念，所以，用偽波形，幾乎可以達到以假亂真的效果。

其實，要顯示偽波形很容易，只要隨機生成不同高度的柱狀圖，就可以了。但是，為了得到更逼真的效果，大家可以注意一下，很多播放器的波形圖里，頂端都有一個小點，它們的反應往往遲鈍一下，當一個柱狀由高突然變低的時候，并不馬上跟著變低，而是，慢慢的往下掉。如何實現這種效果呢，其實，分析一下他的原理，就很簡單了。只要每次柱狀高度變化的時候，記錄一下這組高度，下次生成新的高度時，如果，新的高度比原高度高，那么，頂點跟著網往上走，就是，如果，新高度比原高度小，那么，就讓頂點高度減掉一個常數，注意，這里只是減掉一個常數，而不是直接變成新高度。這樣，實現出來的效果，就是頂點好像有些緩沖，別柱狀頂上去后，是慢慢的往下掉。

本例子里的所有顯示內容，都是通過BitmapData對象的畫布直接畫出來的。所以，也可以幫助讀者復習一下BitmapData的用法，以及它如何與MovieClip關聯。

在onEnterFrame事件中，調用updatePanel()函數，這個函數會重新生成新的波形，并刷新顯示。其中的if (frameCount++>1) 是調整波形的刷新頻率用的，不改變1這個數字，就可以實現讓波形跳動的更快，或者更慢一些。

最后，因為這是一個繼承自MovieClip的類。要想把這個類變成一個flash中的真正的MovieClip對象，必須通過 Object.registerClass()把它注冊一下。然后，通過AttachMovie加入flash。這是as2.0里的做法，在as3.0 里，就方便很多了，直接new這個對象，然后通過addChild()加入flash即可。

附：代碼


/**
* Test class for testing mtasc swf building in FlashDevelop.
* @mtasc -swf c:\Test.swf -header 500:400:12:EFEFEF -main -trust -trace org.flashdevelop.utils.FlashConnect.mtrace org/flashdevelop/utils/FlashConnect.as
*/
import flash.display.*;
import flash.geom.Rectangle;

class Wave extends MovieClip
{
static var symbolName:String = "__Packages.Wave";
static var symbolOwner:Function = Wave;
// associate the symbol to the class when the class is defined
static var symbolLinked = Object.registerClass(symbolName, symbolOwner);

var LeftMargin, Bar_Width, Bar_Gap, Bar_Max_Height,BarCount,Client_Height: Number;
var frameCount:Number = 0;
var PolarBarHeight:Array;
var img:BitmapData;
var rect:Rectangle;
var rectPolar: Rectangle;
function Wave ()
{
LeftMargin = 20;
Bar_Width = 5;
Bar_Gap = 3;
Bar_Max_Height = 40;
BarCount = 20;
Client_Height = 200;

rect = new Rectangle(0,0,100,100);
rectPolar = new Rectangle(0,0,Bar_Width,1);
img = new BitmapData( 256, 200, false, 0 );
PolarBarHeight = new Array(20);
for (var i:Number = 0;i<BarCount;i++)
PolarBarHeight[i] = 0;
this.attachBitmap(img,1);
}

function updatePanel()
{
trace(PolarBarHeight);
var i:Number =0;
img.fillRect(img.rectangle,0x000000);
for (i=0;i<BarCount;i++)
{
var WaveHeight:Number = random(Bar_Max_Height);
rect.left = LeftMargin + i * (Bar_Width + Bar_Gap);
rect.top = Client_Height - WaveHeight;
rect.right = LeftMargin + i * (Bar_Width + Bar_Gap) + Bar_Width;
rect.bottom = Client_Height;
img.fillRect(rect,0x009900);

if ((PolarBarHeight[i] == 0) || (PolarBarHeight[i] < WaveHeight + 5))
PolarBarHeight[i] = WaveHeight + 5;
else
PolarBarHeight[i] = PolarBarHeight[i] - 4;
if (PolarBarHeight[i] < WaveHeight + 5)
PolarBarHeight[i] = WaveHeight + 5;
rectPolar.left = LeftMargin + i * (Bar_Width + Bar_Gap);
rectPolar.top = Client_Height - PolarBarHeight[i];
rectPolar.width = Bar_Width;
rectPolar.height = 1;

img.fillRect(rectPolar,0xFF9900);
}
}


function onEnterFrame()
{
if (frameCount++>1)
{
updatePanel();
frameCount = 0;
}
}

// entry point
static function main (mc)
{
//var wave:Wave = new Wave ();
_root.attachMovie(Wave.symbolName, "wave", 1);
}
}

總結

以上是生活随笔為你收集整理的给mp3播放器增加音乐波形显示功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。