Flash音乐频谱制作

花了3天做的音乐频谱的效果，截图的效果：

包括了5个类：

MusicControl类，不多说了，用来控制音乐的，包括音乐的载入和播放时的控制等。

ID3Control类，用来提取音乐文件的相关信息的类，循环的显示各种信息，提取的中文显示乱码，这里用一个函数进行更正即可：

1. function EncodeUtf8(str:String):String {
   
2. var oriByteArr:ByteArray = new ByteArray();
   
3. oriByteArr.writeUTFBytes(str);
   
4. var tempByteArr:ByteArray = new ByteArray();
   
5. for (var i = 0; i<oriByteArr.length; i++) {
   
6.   if (oriByteArr == 194) {
   
7.    tempByteArr.writeByte(oriByteArr[i+1]);
   
8.    i++;
   
9.   } else if (oriByteArr == 195) {
   
10.    tempByteArr.writeByte(oriByteArr[i+1] + 64);
    
11.    i++;
    
12.   } else {
    
13.    tempByteArr.writeByte(oriByteArr);
    
14.   }
    
15. }
    
16. tempByteArr.position = 0;
    
17. return tempByteArr.readMultiByte(tempByteArr.bytesAvailable,"chinese");
    
18. }

Spectrum类，管理和显示频谱的类，从MusicControl类里取出频谱的信息，注意MusicControl类里的

1. SoundMixer.computeSpectrum(_spectrumArray,true);

里第二个参数 true 表示取出的是频谱，而 false 表示取出的是波形。

1. 
   
2. /*
   
3. 类功能：显示频谱。
   
4. */
   
5. package net.cdipan.spectrum{
   
6. import flash.display.Sprite;
   
7. import flash.utils.ByteArray;
   
8. import flash.text.TextField;
   
9. import flash.events.MouseEvent;
   
10. import flash.net.navigateToURL;
    
11. import flash.net.URLRequest;
    
12. public class Spectrum extends Sprite {
    
13.   //记录频谱的数组
    
14.   private var _spectrum:Array;
    
15.   //记录显示的类型
    
16.   private var _type:int;
    
17.   //用于显示频谱的精灵对象
    
18.   private var _showSpectrum:Sprite;
    
19.   //用于显示柱状频谱的精灵对象
    
20.   private var _show1:Sprite;
    
21.   //用于显示波浪频谱的精灵对象
    
22.   private var _show2:Sprite;
    
23.   //用于显示波形频谱的精灵对象
    
24.   private var _show3:Sprite;
    
25.   //柱形对象
    
26.   private var _column:Column;
    
27.   //波形对象
    
28.   private var _waveform:Waveform;
    
29.   public function Spectrum():void {
    
30.    _spectrum = new Array(512);
    
31.    _showSpectrum = new Sprite();
    
32.    _showSpectrum.x = 22;
    
33.    _showSpectrum.y = 18;
    
34.    _show1 = new Sprite();
    
35.    _show2 = new Sprite();
    
36.    _show3 = new Sprite();
    
37.    this.addChild(_showSpectrum);
    
38.    //创建柱状频谱
    
39.    createColumn(64,3,1,_show1);
    
40.    createColumn(256,1,0,_show2);
    
41.    //创建波形频谱
    
42.    _waveform = new Waveform();
    
43.    _show3.addChild(_waveform);
    
44.    _showSpectrum.addChild(_show1);
    
45.   }
    
46.   //获取频谱数组
    
47.   public function getSpectrum(byteArray:ByteArray):void {
    
48.    for (var i:int=0; i<512; i++) {
    
49.     _spectrum = byteArray.readFloat();
    
50.    }
    
51.    //将频谱数据传送给柱状和波浪的精灵实例
    
52.    for (var j:int=0; j<64; j++) {
    
53.     var temp1:Column = _show1.getChildByName("column_"+j.toString()) as Column;
    
54.     temp1.getSpectrum((_spectrum[j*4]+_spectrum[j*4+1]+_spectrum[j*4+2]+_spectrum[j*4+3]+_spectrum[j*4+256]+_spectrum[j*4+257]+_spectrum[j*4+258]+_spectrum[j*4+259])*12.5);
    
55.    }
    
56.    for (var m:int=0; m<256; m++) {
    
57.     var temp2:Column = _show2.getChildByName("column_"+m.toString()) as Column;
    
58.     temp2.getSpectrum((_spectrum[m]+_spectrum[m+256])*50);
    
59.    }
    
60.    //将频谱数据传送给波形的精灵实例
    
61.    _waveform.getSpectrum(_spectrum);
    
62.   }
    
63.   //创建柱状的精灵对象
    
64.   private function createColumn(f_num:int,f_width:int,f_space:int,target:Sprite):void {
    
65.    for (var i:int=0; i<f_num; i++) {
    
66.     _column = new Column();
    
67.     _column.name = "column_"+i.toString();
    
68.     _column.width = f_width;
    
69.     _column.x = i*(f_width+f_space);
    
70.     target.addChild(_column);
    
71.    }
    
72.   }
    
73.   //更改样式(type 为 0 时显示柱形，为 1 时显示波浪，为 2 时显示波形)
    
74.   public function changeType(type:int):void {
    
75.    switch (type) {
    
76.     case 0 :
    
77.      if (_showSpectrum.contains(_show1)) {
    
78.       _showSpectrum.removeChild(_show1);
    
79.      }
    
80.      if (_showSpectrum.contains(_show2)) {
    
81.       _showSpectrum.removeChild(_show2);
    
82.      }
    
83.      if (_showSpectrum.contains(_show3)) {
    
84.       _showSpectrum.removeChild(_show3);
    
85.      }
    
86.      _showSpectrum.addChild(_show1);
    
87.      break;
    
88.     case 1 :
    
89.      if (_showSpectrum.contains(_show1)) {
    
90.       _showSpectrum.removeChild(_show1);
    
91.      }
    
92.      if (_showSpectrum.contains(_show2)) {
    
93.       _showSpectrum.removeChild(_show2);
    
94.      }
    
95.      if (_showSpectrum.contains(_show3)) {
    
96.       _showSpectrum.removeChild(_show3);
    
97.      }
    
98.      _showSpectrum.addChild(_show2);
    
99.      break;
    
100.     case 2 :
     
101.      if (_showSpectrum.contains(_show1)) {
     
102.       _showSpectrum.removeChild(_show1);
     
103.      }
     
104.      if (_showSpectrum.contains(_show2)) {
     
105.       _showSpectrum.removeChild(_show2);
     
106.      }
     
107.      if (_showSpectrum.contains(_show3)) {
     
108.       _showSpectrum.removeChild(_show3);
     
109.      }
     
110.      _showSpectrum.addChild(_show3);
     
111.      break;
     
112.    }
     
113.   }
     
114. }
     
115. }

Column类，条形的频谱类，在Spectrum类里柱状样式中创建了 64 个，而波浪样式中创建了 256 个。

1. 
   
2. /*
   
3. 类功能：柱状的频谱。
   
4. */
   
5. package net.cdipan.spectrum{
   
6. import flash.display.*;
   
7. import flash.geom.*;
   
8. import flash.events.Event;
   
9. import flash.utils.Timer;
   
10. import flash.events.TimerEvent;
    
11. public class Column extends Sprite {
    
12.   //顶部小方块颜色
    
13.   private const square_color:uint = 0xffffff;
    
14.   //顶部颜色
    
15.   private const top_color:uint = 0xffffff;
    
16.   //中间颜色
    
17.   private const middle_color:uint = 0x8cdcff;
    
18.   //底部颜色
    
19.   private const bottom_color:uint = 0x07f7ff;
    
20.   //背景精灵对象
    
21.   private var BG_Sp:Sprite;
    
22.   //遮罩精灵对象
    
23.   private var mask_Sp:Sprite;
    
24.   //小方块精灵对象
    
25.   private var square_Sp:Sprite;
    
26.   //记录上次的频谱的值，如果比这次的高就减一，否则将这次的设为此值
    
27.   private var oldNum:Number;
    
28.   //计时器对象
    
29.   private var myTimer:Timer;
    
30.   //记录小方块是否可以下落
    
31.   private var canDrop:Boolean;
    
32.   public function Column():void {
    
33.    BG_Sp = new Sprite();
    
34.    drawGradualRect();
    
35.    addChild(BG_Sp);
    
36.    mask_Sp = new Sprite();
    
37.    drawMaskRect();
    
38.    addChild(mask_Sp);
    
39.    square_Sp = new Sprite();
    
40.    drawSquareRect();
    
41.    square_Sp.y = 99;
    
42.    square_Sp.addEventListener(Event.ENTER_FRAME, _enterframe);
    
43.    addChild(square_Sp);
    
44.    //设置遮罩
    
45.    BG_Sp.mask = mask_Sp;
    
46.    oldNum = 0;
    
47.    myTimer = new Timer(200, 1);
    
48.    myTimer.addEventListener("timer", onTimer);
    
49.    canDrop = false;
    
50.   }
    
51.   //使小方块下落
    
52.   private function _enterframe(e:Event):void {
    
53.    if (canDrop) {
    
54.     square_Sp.y += 4;
    
55.    }
    
56.    if (square_Sp.y > 99) {
    
57.     square_Sp.y = 99;
    
58.    }
    
59.    if (square_Sp.y < -1) {
    
60.     square_Sp.y = -1;
    
61.    }
    
62.   }
    
63.   //绘制渐变图形
    
64.   private function drawGradualRect():void {
    
65.    var fillType:String = GradientType.RADIAL;
    
66.    var colors:Array = [top_color, middle_color, bottom_color];
    
67.    var alphas:Array = [1, 1, 1];
    
68.    var ratios:Array = [0x00, 0x7f, 0xff];
    
69.    BG_Sp.graphics.beginGradientFill(fillType, colors, alphas, ratios);
    
70.    BG_Sp.graphics.drawRect(0,-1,100,1);
    
71.    BG_Sp.rotation = 90;
    
72.   }
    
73.   //绘制遮罩图形
    
74.   private function drawMaskRect():void {
    
75.    mask_Sp.graphics.lineStyle();
    
76.    mask_Sp.graphics.beginFill(0);
    
77.    mask_Sp.graphics.drawRect(0,-100,1,100);
    
78.    mask_Sp.graphics.endFill();
    
79.    mask_Sp.y = 100;
    
80.   }
    
81.   //绘制小方块
    
82.   private function drawSquareRect():void {
    
83.    square_Sp.graphics.lineStyle();
    
84.    square_Sp.graphics.beginFill(square_color);
    
85.    square_Sp.graphics.drawRect(0,0,1,1);
    
86.    square_Sp.graphics.endFill();
    
87.   }
    
88.   //接收频谱数据
    
89.   public function getSpectrum(num:Number):void {
    
90.    if (oldNum > num) {
    
91.     oldNum -= 7;
    
92.    } else {
    
93.     oldNum = num;
    
94.     if (oldNum != 0) {
    
95.      //调用小方块运动的函数
    
96.      squareMove(oldNum);
    
97.     }
    
98.    }
    
99.    if (oldNum<0) {
    
100.     oldNum = 0;
     
101.    }
     
102.    mask_Sp.height = oldNum;
     
103.   }
     
104.   //控制小方块运动的函数
     
105.   private function squareMove(num:Number):void {
     
106.    if (square_Sp.y > 99 - oldNum) {
     
107.     square_Sp.y = 99 - num;
     
108.     canDrop = false;
     
109.     myTimer.reset();
     
110.     myTimer.start();
     
111.    }
     
112.   }
     
113.   public function onTimer(e:TimerEvent):void {
     
114.    canDrop = true;
     
115.   }
     
116. }
     
117. }

Waveform类，波形的类，用一条线条来绘制的，加入了逐渐消失的轨迹的效果。

1. 
   
2. /*
   
3. 类功能：波形。
   
4. */
   
5. package net.cdipan.spectrum{
   
6. import flash.display.*;
   
7. import flash.filters.*;
   
8. import flash.geom.*;
   
9. public class Waveform extends Sprite {
   
10.   //线条颜色
    
11.   private const line_color:uint = 0x07f7ff;
    
12.   //创建用来绘制线条的精灵对象
    
13.   private var Line:Sprite;
    
14.   //用于逐渐消失的轨迹的位图对象
    
15.   private var bmpData:BitmapData;
    
16.   private var bmp:Bitmap;
    
17.   //滤镜的各项参数
    
18.   private var colorM:ColorMatrixFilter;
    
19.   private var blur:BlurFilter;
    
20.   private var r:Rectangle;
    
21.   private var point;
    
22.   //通过数字使滤镜处理慢一步
    
23.   private var num:int;
    
24.   public function Waveform():void {
    
25.    Line = new Sprite();
    
26.    bmpData = new BitmapData(256,100,true,0);
    
27.    bmp = new Bitmap(bmpData);
    
28.    colorM = new ColorMatrixFilter([.98,0,0,0,0,0,.98,0,0,0,0,0,.98,0,0,0,0,0,.5,0]);
    
29.    blur = new BlurFilter(7,7,BitmapFilterQuality.LOW);
    
30.    r = new Rectangle(0,0,256,100);
    
31.    p = new Point(0,0);
    
32.    //添加显示对象
    
33.    this.blendMode=BlendMode.ADD;
    
34.    this.addChild(bmp);
    
35.    this.addChild(Line);
    
36.   }
    
37.   //接收频谱数据
    
38.   public function getSpectrum(array:Array):void {
    
39.    if (num%2 == 0) {
    
40.     var m:Number = 0;
    
41.     for (var j=0; j<256; j+=2) {
    
42.      m += array[j];
    
43.     }
    
44.     if (m != 0) {
    
45.      //停止播放时不绘制图像，就只会显示一条直线
    
46.      bmpData.draw(this);
    
47.     }
    
48.     bmpData.applyFilter(bmpData,r,p,colorM);
    
49.     bmpData.applyFilter(bmpData,r,p,blur);
    
50.    }
    
51.    num++;
    
52.    Line.graphics.clear();
    
53.    Line.graphics.lineStyle(1,line_color,100);
    
54.    for (var i=0; i<256; i+=2) {
    
55.     var n:Number = array*50;
    
56.     if (i != 0) {
    
57.      Line.graphics.lineTo(i,50-n);
    
58.     } else {
    
59.      Line.graphics.moveTo(0,50-n);
    
60.     }
    
61.    }
    
62.   }
    
63. }
    
64. }

源文件下载：

Flash音乐频谱制作.rar

 

转自：http://www.68design.net/Web-Guide/Flash/45403-1.html