flash 频谱 转html,Flash制作音乐频谱
本教程是向大家介紹Flash制作音樂頻譜，教程比較基礎(chǔ)，轉(zhuǎn)發(fā)過來，希望大家喜歡！花了3天做的音樂頻譜的效果，截圖的效果：
包括了5個類：
MusicControl類，不多說了，用來控制音樂的，包括音樂的載入和播放時的控制等。
ID3Control類，用來提取音樂文件的相關(guān)信息的類，循環(huán)的顯示各種信息，提取的中文顯示亂碼，這里用一個函數(shù)進(jìn)行更正即可：
復(fù)制代碼代碼如下:
function EncodeUtf8(str:String):String {
var oriByteArr:ByteArray = new ByteArray();
oriByteArr.writeUTFBytes(str);
var tempByteArr:ByteArray = new ByteArray();
for (var i = 0; i
if (oriByteArr == 194) {
tempByteArr.writeByte(oriByteArr[i+1]);
i++;
} else if (oriByteArr == 195) {
tempByteArr.writeByte(oriByteArr[i+1] + 64);
i++;
} else {
tempByteArr.writeByte(oriByteArr);
}
}
tempByteArr.position = 0;
return tempByteArr.readMultiByte(tempByteArr.bytesAvailable,"chinese");
}
Spectrum類，管理和顯示頻譜的類，從MusicControl類里取出頻譜的信息，注意MusicControl類里的
SoundMixer.computeSpectrum(_spectrumArray,true);
里第二個參數(shù) true 表示取出的是頻譜，而 false 表示取出的是波形。
/*
類功能：顯示頻譜。
*/
package net.cdipan.spectrum{
import flash.display.Sprite;
import flash.utils.ByteArray;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
public class Spectrum extends Sprite {
//記錄頻譜的數(shù)組
private var _spectrum:Array;
//記錄顯示的類型
private var _type:int;
//用于顯示頻譜的精靈對象
private var _showSpectrum:Sprite;
//用于顯示柱狀頻譜的精靈對象
private var _show1:Sprite;
//用于顯示波浪頻譜的精靈對象
private var _show2:Sprite;
//用于顯示波形頻譜的精靈對象
private var _show3:Sprite;
//柱形對象
private var _column:Column;
//波形對象
private var _waveform:Waveform;
public function Spectrum():void {
_spectrum = new Array(512);
_showSpectrum = new Sprite();
_showSpectrum.x = 22;
_showSpectrum.y = 18;
_show1 = new Sprite();
_show2 = new Sprite();
_show3 = new Sprite();
this.addChild(_showSpectrum);
//創(chuàng)建柱狀頻譜
createColumn(64,3,1,_show1);
createColumn(256,1,0,_show2);
//創(chuàng)建波形頻譜
_waveform = new Waveform();
_show3.addChild(_waveform);
_showSpectrum.addChild(_show1);
}
//獲取頻譜數(shù)組
public function getSpectrum(byteArray:ByteArray):void {
for (var i:int=0; i<512; i++) {
_spectrum = byteArray.readFloat();
}
//將頻譜數(shù)據(jù)傳送給柱狀和波浪的精靈實例
for (var j:int=0; j<64; j++) {
var temp1:Column = _show1.getChildByName("column_"+j.toString()) as Column;
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);
}
for (var m:int=0; m<256; m++) {
var temp2:Column = _show2.getChildByName("column_"+m.toString()) as Column;
temp2.getSpectrum((_spectrum[m]+_spectrum[m+256])*50);
}
//將頻譜數(shù)據(jù)傳送給波形的精靈實例
_waveform.getSpectrum(_spectrum);
}
//創(chuàng)建柱狀的精靈對象
private function createColumn(f_num:int,f_width:int,f_space:int,target:Sprite):void {
for (var i:int=0; i
_column = new Column();
_column.name = "column_"+i.toString();
_column.width = f_width;
_column.x = i*(f_width+f_space);
target.addChild(_column);
}
}
//更改樣式(type 為 0 時顯示柱形，為 1 時顯示波浪，為 2 時顯示波形)
public function changeType(type:int):void {
switch (type) {
case 0 :
if (_showSpectrum.contains(_show1)) {
_showSpectrum.removeChild(_show1);
}
if (_showSpectrum.contains(_show2)) {
_showSpectrum.removeChild(_show2);
}
if (_showSpectrum.contains(_show3)) {
_showSpectrum.removeChild(_show3);
}
_showSpectrum.addChild(_show1);
break;
case 1 :
if (_showSpectrum.contains(_show1)) {
_showSpectrum.removeChild(_show1);
}
if (_showSpectrum.contains(_show2)) {
_showSpectrum.removeChild(_show2);
}
if (_showSpectrum.contains(_show3)) {
_showSpectrum.removeChild(_show3);
}
_showSpectrum.addChild(_show2);
break;
case 2 :
if (_showSpectrum.contains(_show1)) {
_showSpectrum.removeChild(_show1);
}
if (_showSpectrum.contains(_show2)) {
_showSpectrum.removeChild(_show2);
}
if (_showSpectrum.contains(_show3)) {
_showSpectrum.removeChild(_show3);
}
_showSpectrum.addChild(_show3);
break;
}
}
}
}
Column類，條形的頻譜類，在Spectrum類里柱狀樣式中創(chuàng)建了 64 個，而波浪樣式中創(chuàng)建了 256 個。
/*
類功能：柱狀的頻譜。
*/
package net.cdipan.spectrum{
import flash.display.*;
import flash.geom.*;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
public class Column extends Sprite {
//頂部小方塊顏色
private const square_color:uint = 0xffffff;
//頂部顏色
private const top_color:uint = 0xffffff;
//中間顏色
private const middle_color:uint = 0x8cdcff;
//底部顏色
private const bottom_color:uint = 0x07f7ff;
//背景精靈對象
private var BG_Sp:Sprite;
//遮罩精靈對象
private var mask_Sp:Sprite;
//小方塊精靈對象
private var square_Sp:Sprite;
//記錄上次的頻譜的值，如果比這次的高就減一，否則將這次的設(shè)為此值
private var oldNum:Number;
//計時器對象
private var myTimer:Timer;
//記錄小方塊是否可以下落
private var canDrop:Boolean;
public function Column():void {
BG_Sp = new Sprite();
drawGradualRect();
addChild(BG_Sp);
mask_Sp = new Sprite();
drawMaskRect();
addChild(mask_Sp);
square_Sp = new Sprite();
drawSquareRect();
square_Sp.y = 99;
square_Sp.addEventListener(Event.ENTER_FRAME, _enterframe);
addChild(square_Sp);
//設(shè)置遮罩
BG_Sp.mask = mask_Sp;
oldNum = 0;
myTimer = new Timer(200, 1);
myTimer.addEventListener("timer", onTimer);
canDrop = false;
}
//使小方塊下落
private function _enterframe(e:Event):void {
if (canDrop) {
square_Sp.y += 4;
}
if (square_Sp.y > 99) {
square_Sp.y = 99;
}
if (square_Sp.y < -1) {
square_Sp.y = -1;
}
}
//繪制漸變圖形
private function drawGradualRect():void {
var fillType:String = GradientType.RADIAL;
var colors:Array = [top_color, middle_color, bottom_color];
var alphas:Array = [1, 1, 1];
var ratios:Array = [0x00, 0x7f, 0xff];
BG_Sp.graphics.beginGradientFill(fillType, colors, alphas, ratios);
BG_Sp.graphics.drawRect(0,-1,100,1);
BG_Sp.rotation = 90;
}
//繪制遮罩圖形
private function drawMaskRect():void {
mask_Sp.graphics.lineStyle();
mask_Sp.graphics.beginFill(0);
mask_Sp.graphics.drawRect(0,-100,1,100);
mask_Sp.graphics.endFill();
mask_Sp.y = 100;
}
//繪制小方塊
private function drawSquareRect():void {
square_Sp.graphics.lineStyle();
square_Sp.graphics.beginFill(square_color);
square_Sp.graphics.drawRect(0,0,1,1);
square_Sp.graphics.endFill();
}
//接收頻譜數(shù)據(jù)
public function getSpectrum(num:Number):void {
if (oldNum > num) {
oldNum -= 7;
} else {
oldNum = num;
if (oldNum != 0) {
//調(diào)用小方塊運動的函數(shù)
squareMove(oldNum);
}
}
if (oldNum<0) {
oldNum = 0;
}
mask_Sp.height = oldNum;
}
//控制小方塊運動的函數(shù)
private function squareMove(num:Number):void {
if (square_Sp.y > 99 - oldNum) {
square_Sp.y = 99 - num;
canDrop = false;
myTimer.reset();
myTimer.start();
}
}
public function onTimer(e:TimerEvent):void {
canDrop = true;
}
}
}
Waveform類，波形的類，用一條線條來繪制的，加入了逐漸消失的軌跡的效果。
/*
類功能：波形。
*/
package net.cdipan.spectrum{
import flash.display.*;
import flash.filters.*;
import flash.geom.*;
public class Waveform extends Sprite {
//線條顏色
private const line_color:uint = 0x07f7ff;
//創(chuàng)建用來繪制線條的精靈對象
private var Line:Sprite;
//用于逐漸消失的軌跡的位圖對象
private var bmpData:BitmapData;
private var bmp:Bitmap;
//濾鏡的各項參數(shù)
private var colorM:ColorMatrixFilter;
private var blur:BlurFilter;
private var r:Rectangle;
private var point;
//通過數(shù)字使濾鏡處理慢一步
private var num:int;
public function Waveform():void {
Line = new Sprite();
bmpData = new BitmapData(256,100,true,0);
bmp = new Bitmap(bmpData);
colorM = new ColorMatrixFilter([.98,0,0,0,0,0,.98,0,0,0,0,0,.98,0,0,0,0,0,.5,0]);
blur = new BlurFilter(7,7,BitmapFilterQuality.LOW);
r = new Rectangle(0,0,256,100);
p = new Point(0,0);
//添加顯示對象
this.blendMode=BlendMode.ADD;
this.addChild(bmp);
this.addChild(Line);
}
//接收頻譜數(shù)據(jù)
public function getSpectrum(array:Array):void {
if (num%2 == 0) {
var m:Number = 0;
for (var j=0; j<256; j+=2) {
m += array[j];
}
if (m != 0) {
//停止播放時不繪制圖像，就只會顯示一條直線
bmpData.draw(this);
}
bmpData.applyFilter(bmpData,r,p,colorM);
bmpData.applyFilter(bmpData,r,p,blur);
}
num++;
Line.graphics.clear();
Line.graphics.lineStyle(1,line_color,100);
for (var i=0; i<256; i+=2) {
var n:Number = array*50;
if (i != 0) {
Line.graphics.lineTo(i,50-n);
} else {
Line.graphics.moveTo(0,50-n);
}
}
}
}
}
教程結(jié)束，以上就是Flash制作音樂頻譜過程，希望對大家有所幫助，謝謝大家觀看本教程！
總結(jié)
以上是生活随笔為你收集整理的flash 频谱 转html,Flash制作音乐频谱的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为云人脸识别SDK踩坑日记
- 下一篇： 如何用Photoshop2021自动抠图