AS3.0构建简单声音可视化(波型图)



　　使用 SoundMixer.computeSpectrum 思路方法来显示声音波形图

import flash.display.Graphics;
import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundMixer;
import flash.net.URLRequest;

const PLOT_HEIGHT: = 200;
const CHANNEL_LENGTH: = 256;

var snd:Sound = Sound;
var req:URLRequest = URLRequest("月亮的上.mp3");　//配置声音源文件地址(此为本地可配置远程)
snd.load(req);

var channel:SoundChannel;
channel = snd.play;
addEventListener(Event.ENTER_FRAME, _disibledevent=>
function _disibledevent=>　 　
　 　 g.clear;
　 　 g.lineStyle(0, 0x6600CC);
　 　 g.beginFill(0x6600CC);
　 　 g.moveTo(0, PLOT_HEIGHT);
　 　
　 　 var n:Number = 0;
　 　　 　　　
　 　 // left channel
　 　 for (var i: = 0; i < CHANNEL_LENGTH; i)
　 　 {
　 　　 　　　n = (s.readFloat * PLOT_HEIGHT);
　 　　 　　　g.lineTo(i * 2, PLOT_HEIGHT - n);
　 　 }
　 　 g.lineTo(CHANNEL_LENGTH * 2, PLOT_HEIGHT);
　 　 g.endFill;
　 　
　 　 // right channel
　 　 g.lineStyle(0, 0xCC0066);
　 　 g.beginFill(0xCC0066, 0.5);
　 　 g.moveTo(CHANNEL_LENGTH * 2, PLOT_HEIGHT);
　 　
　 　 for (i = CHANNEL_LENGTH; i > 0; i--)
　 　 {
　 　　 　　　n = (s.readFloat * PLOT_HEIGHT);
　 　　 　　　g.lineTo(i * 2, PLOT_HEIGHT - n);
　 　 }
　 　 g.lineTo(0, PLOT_HEIGHT);
　 　 g.endFill;
}

function onPlaybackComplete(event:Event)
{
　 　 removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}

　　先加载并播放个声音文件然后在播放声音同时侦听将触发 onEnterFrame 思路方法 Event.ENTER_FRAME 事件onEnterFrame 思路方法先 SoundMixer.computeSpectrum 思路方法后者将声音波形数据存储在 s ByteArray 对象中

　　声音波形是使用矢量绘图 API 绘制 for 循环将循环访问第批 256 个数据值(表示左立体声声道)然后使用 Graphics.lineTo 思路方法绘制条从每个点到下个点直线第 2个 for 循环将循环访问下批 256 个值此时按相反顺序(从右到左)对它们进行绘制生成波形图可能会产生有趣镜像图像效果