使用Flash as3实现音频波形与条形EQ显示的方法

FFTMode代表是否进行离散形式的快速傅立叶变换.

stretchFactor参数有2个,
为0时,采样率为44.1Khz,
为1时采样率22.05Khz,
为2时,11.025Khz.
因此一般我们使用参数0,也就是44.1Khz

下面再来看傅立叶变化,首先撇开原理不谈.实验证明,进行变换之后的数据试用于画条形和环形图,变换之前的数据适合作波形图.
why?
波形图是函数随着自变量的变化而在平衡位置附近上下运动的结果,
那么需要画波形图的时候,我们需要在0附近左右振荡的波形数据,而画条形和环形时,我们只需要在0+方向的波形数据.
因此如果你需要做波形图,请将FFTMode置0,否则置1.

现在我们已经知道我们需要的波形数据,已经以二进制串的形式保存在了ByteArray这个数组中
假设我们用Barray这个数组来存储,
那么快照后保存的数据以一维方式从Barray[0]开始存,一直存到Barray[2047]
这样一共是2048bit(我是如此理解的)
每一位对应一个数据元素,你可以想象在每一秒中声卡将对波形数据进行还原,每秒取样频率达到4万多次,每次的数据流量如果按照这里的Barray的2048bit来计算,......我也懒得算了,反正1Kb=1024bit,1Mb=1024Kb.......

这里其实默认的是双声道立体声,大多数mp3都是如此的,如果是单声道可能会有些出入,也许只需要1024bit
那么从第一个bit到1024个bit这里放的是左声道的数据,从1025到2048放的是右声道数据.
也许你说要是能把这些数据进行混合与处理,是不是可以做均衡器了,so 遗憾,这只是个method,我们只有读的份.

好了到这里你应该迫不及待了,我只需要搞清楚Barray如何来用就OK了
不错,实事就是如此.
这里有两种方法:
1.将这个二进制串转换为浮点数
2.逐个读取这个二进制串中的每一个数据

这两种方法有利有弊
先说第一个,最大的好处就是省资源,不用遍历整个二进制串你就可以使用宝贵的数据了,在这个将就资源环保的今天,你还犹豫什么呢.缺点呢,缺点就是,我觉得不太准确,因为似乎并不是每一个数据都派上了用场,有相当一部分被抛弃了,在资源匮乏的今天......

第二个,是我自己独立想出来的 表扔鸡蛋,我觉得第二个对于提高EQ显示的精确度有些许帮助,当然,我也在考虑将所有的音频数据重新分频,有点不现实,毕竟flash无法调用声卡,也没有相应的API.第二个方法最大的好处就是不管你的条形是宽是窄是胖是瘦,我都能让你吃饱.

什么意思?就是说我让所有数据都能显示到你的条形上面去,如果你的条形宽,数量少,那么我将每十个单位的数据整理成一个,也就是压缩之后,再传给条形显示函数,要是你条形窄,数量多,那么我可以5合1甚至不合,这恐怕不太现实,有谁愿意让2048个进度条在屏幕上跳.而且还是每秒钟跳动几十下.非卡死你不可.

差点忘了关键的一点
soundmixer类对policy安全设置要求严格
只能在samedomain同域名下可用
如果是crossdomain不同域名下,读取将会报错
下面的代码没有加入查错处理,所以,attention

此处为代码区域,或许你看到这里已经不需要代码
但我还是贴出来一部分
这是我的彩色条形代码 
复制内容到剪贴板 
代码:

var myurl=new URLRequest;
var mytimer:uint;
var bit:Array = new Array(36);//采样数组
var prebit:Array = new Array(36);//预采样数组
var vt:Array = new Array(36);//下落速度数组
var peak:Array = new Array(36);//峰值位置数组
var ratios:Array = new Array(255,255)
var alphas:Array = new Array(100,100)
var matrix:Matrix = new Matrix(50,50,0,100,200,0);
var color = createRainbowGradientArray(); 
for(var i=0;i<36;i++) {
    bit[i]=0;prebit[i]=0;vt[i]=0;peak[i]=0;
}
var bArray:ByteArray = new ByteArray();
myurl.url="song.mp3";//此处替换为您自己的mp3地址
var mysound=new Sound(myurl);
mysound.play();
setInterval(showBar,20);
mytimer=setInterval(caiyang,80);
//clik.addEventListener(MouseEvent.CLICK,clikme);
function clikme(Event:MouseEvent) {
    
}
function showBar() {
    this.graphics.clear()
    for(i=0;i<18;i++) {
        if(bit[i]<prebit[i]) {
            bit[i]=prebit[i];
        }
        if(peak[i]<bit[i]) {
            peak[i]=bit[i];
            vt[i]=0;
        }
        if(bit[i+18]<prebit[i+18]) {
            bit[i+18]=prebit[i+18];
        }
        if(peak[i+18]<bit[i+18]) {
            peak[i+18]=bit[i+18];
            vt[i+18]=0;
        }
        this.graphics.lineStyle(10,0xFFF001,20,false,"noSacle","none");
        this.graphics.lineGradientStyle("linear",new Array(color[i*14+14],color[i*14+14]),alphas,ratios,matrix,"reflect","LinearRGB",1)    
        this.graphics.moveTo(50+i*15,200);
        this.graphics.lineTo(50+i*15,200-bit[i]/2)
        this.graphics.lineGradientStyle("linear",new Array(color[i*14+14],color[i*14+14]),alphas,ratios,matrix,"reflect","LinearRGB",1)
        this.graphics.moveTo(600-i*15,200);
        this.graphics.lineTo(600-i*15,200-bit[i+18]/2)
        bit[i]-=4;
        bit[i+18]-=4;
        vt[i]+=0.1;
        vt[i+18]+=0.1;
        if(peak[i]>0) {
            peak[i]-=vt[i];
            this.graphics.lineStyle(2,0xCCCCCC,100,false,"noScale","none")
            this.graphics.moveTo(45+i*15,200-peak[i]/2);
            this.graphics.lineTo(55+i*15,200-peak[i]/2);
        }
        if(peak[i+18]>0) {
            peak[i+18]-=vt[i+18];
            this.graphics.lineStyle(2,0xCCCCCC,100,false,"noScale","none")
            this.graphics.moveTo(595-i*15,200-peak[i+18]/2);
            this.graphics.lineTo(605-i*15,200-peak[i+18]/2);
        }
    }
}
function caiyang() {
    SoundMixer.computeSpectrum(bArray,true,0);
    for(var i=0;i<18;i++) {
        for(var j=0;j<30;j++) {
            prebit[i]+=bArray[i*50+j+1]*2^j
            prebit[i+18]+=bArray[1024+i*50+j]*2^j
        }
        prebit[i]/=50
        prebit[i+18]/=50
    }
}
function createRainbowGradientArray(): Array
        {
            var gradient: Array = new Array();
            
            var shape: Shape = new Shape();
            var bmp: BitmapData = new BitmapData( 256, 1, false, 0 );
            
            var colors: Array = [ 0, 0xff0000, 0xffff00, 0x00ff00, 0x00ffff ];
            var alphas: Array = [ 100, 100, 100, 100, 100 ];
            var ratios: Array = [ 0, 16, 128, 192, 255 ];
            
            var matrix: Matrix = new Matrix();
            
            matrix.createGradientBox( 256, 1, 0, 0, 0 );
            
            shape.graphics.beginGradientFill( 'linear', colors, alphas, ratios, matrix );
            shape.graphics.drawRect( 0, 0, 256, 1 );
            shape.graphics.endFill();
            
            bmp.draw( shape );
            
            for( var i: int = 0 ; i < 256 ; i++ )
            {
                gradient[i] = bmp.getPixel( i, 0 );
            }
            
            return gradient;
        }