基于Flash平台的网络音频频谱可视化实验设计
陈童;李松林
【摘 要】Flash platform technology includes software, programming languages, IDE, framework and a set of specifications, and a technical eco-system is formed.  Experimental design for visualization of spectrum is used based on Flash platform.  It will help students to understand audio processing, bitmap programming, matrix transform and 3D programming, and master the method of data visualiztion.%Flash平台技术包含动画制作软件、编程语言、IDE、框架和一系列规范,有独特的技术生态系统,得到了快速的发展和广泛的应用.应用基于Flash平台技术进行网络音频频谱可视化的实验设计,有利于学生进一步掌握ActionScript的音频处理方法,深入实践位图编程、矩阵变换以及三维图形的构建方式,进而掌握数据可视化的方法与技巧.
【期刊名称】《实验技术与管理》
【年(卷),期】2012(029)005
【总页数】4页(P136-138,146)
【关键词】数据可视化;Flash平台;音频频谱
【作 者】陈童;李松林
【作者单位】哈尔滨工业大学媒体技术与艺术系,黑龙江哈尔滨150001;哈尔滨工业大学媒体技术与艺术系,黑龙江哈尔滨150001
【正文语种】中 文
【中图分类】G434
Flash平台技术在以互联网为背景的设计开发领域有宽广且深入的应用［1－9］，有必要将其引入到实际的教学实验环节中。目前，涉及Flash平台技术的课程主要有：计算机二维动画、计算机互动程序设计、Web设计与开发以及富客户端程序设计等。在实验设计上，在学生掌握了编程动画的实现原理与方式之后，有必要结合具体的API和动画编程技术来设计实验，围绕网络音频频谱的可视化来设计实验，一方面使学生深入掌握dia包中的类关系以及它们的方法与属性，另一方面有利于继承已学到的动画和位图编程的知识。
网络音频的频谱就是音频频率的分布曲线，复杂振荡分解为振幅不同和频率不同的谐振荡，这些谐振荡的幅值按频率排列的图形称为频谱。网络音频频谱的可视化就是通过矢量或位图的方式将频谱绘制出来，并通过动画的算法表现频谱的变化。对于网络音频频谱的可视化而言，它的设计将编程的美与艺术的美完美地结合在了一起［10］。
ActionScript 3.0中的音频处理是独立的，不像ActionScript 2.0那样依赖于MovieClip。它使用多个类来实现网络音频的处理，功能细化到对应的类中，使得逻辑更加清晰。ActionScript 3.0中与音频相关的类的架构如图1所示。
Sound类负责创建、加载和播放声音。Sound类主要用于描述音频数据，而不是控制音频。使用Sound类创建音频有两种方式：（1）通过库中元件来创建，库中音频元件是Sound类的子类；（2）通过外部加载音频来创建，外部加载音频的创建类型是Sound类本身［11］。音频的加载监控符合 open—progress—complete规范。Sound的构造函数为Sound（stream：URLRequest＝ null，context：SoundLoaderContext＝null）。
ID3Info类用于描述音频信息，对应于Sound类的id3属性。
SoundChannel类用于描述声音通道。对声音的操控和状态描述从描述声音数据的Sound类中分离出来。当调用Sound类的play（）方法时，声道被系统自动分配并回放音频，当停止声道的播放时，声道被自动回收。
SoundTransform类用于控制声音的音量和平移。ActionScript 3.0中的Microphone、NetStream、SoundChannel以及SoundMixer都通过它来调节声音效果。SoundTransform的构造函数为SoundT－ransform（vol：Number＝1，panning：Number＝0）。
SoundMixer类继承自Object。SoundMixer用来描述全局的声音通道。由于与任何声道无关，所以SoundMixer是个静态类。
返回当前音频快照的方法为
返回的波形分为左声道和右声道，每声道为256级，被记录在outputArray中。outputArray是个二进制数组，拥有512个元素，数据类型为Numer，使用readFloat方法访问。前256个浮点数描述左声道的波形，后256个浮点数描述右声道的波形。FFTMode参数为true时用频谱形式描述，范围为FFT－Mode参数为False时采用波形描述，范围为－1～1。如果将stretch
Factor值设置为0，则按44.1kHz对数据进行采样；如果值为1，则按22.05kHz对数据进行采样；如果值为2，则按11.025kHz对数据进行采样。依此类推。采样率影响波形的平滑度。
第1个实验使用最精简的代码实现网络视频频谱的可视化，主要的步骤是：
（1）实例化绘制音频频谱的BitmapData；
（2）实例化Sound类用以加载音频；
（3）调用Sound类的play方法回放音频；
（4）添加ENTER＿FRAME事件侦听器；
（5）在帧循环中，调用静态类SoundMixer的computeSpectrum方法计算网络音频的快照；
（6）调用BitmapData的setPixel32方法根据音频快照的数字绘制像素，从而生成网络音频的频谱图形。
生成的基本频谱的图形如图2所示。
数据可视化大屏设计
第2个实验使用BitmapData的滤镜以增强网络音频频谱图形的视觉效果。结合ColorMatrixFilter和BlurFilter滤镜，生成频谱图形逐帧模糊淡化的效果，如图3所示。
ColorMatrixFilter滤镜使用4×5的矩阵以生成新的RGBA颜和Alpha值。ColorMatrixFilter以具有20个元素的数组作为参数，它将每个源像素拆分成红、绿、蓝和Alpha 4个通道，分别以srcR、srcG、srcB和srcA表示。若要计算4个通道中每个通道的结果，将按照下面的公式计算图像中每个像素的值，最后滤镜将各颜通道再重新组合为单一像素。在下面的公式中，a［0］到a［19］对应数组的20个元素：
对于数组中的每个颜值，值1表示输出通道的100%，即保留颜通道的值。这个实验首先使用如下代码定义相应的滤镜：
然后在ENTER＿FRAME帧循环中，循环调用这2个滤镜：
第3个实验采用动画的方法来实现网络音频频谱的可视化。效果如图4所示。
音频快照的数值决定了相应柱状体的高度，红小矩形位于柱状体的顶端，并跟随柱状体涨落，柱状体以及红小矩形的运动主要依靠缓动的算法来实现。
最后应用Flash Player 10新增的3DAPI来实现3D的网络音频频谱动画，效果如图5所示。
Flash Player 10新增的Perspective Projection类，可以定义或修改显示对象及其所有子级的透视变换。透视投影是一种在二维空间中表示三维对象的方式，透视投影使用四棱锥来建模并将三维世界及其对象投影到屏幕上。随着四棱锥远离视点原点，它会变得越来越宽［12］。视点原点可以是面向屏幕的摄像头或观察者的眼睛。投影透视会在深度和距离上产生三维错觉，其中接近屏幕的对象比远离屏幕的对象要大得多。
默认的Perspective Projection对象是基于视野和舞台的高宽比作为对象透视变换的框架。投影中心（即消失点）设置在舞台的中心，这意味着当三维显示对象沿z轴向后移动时，这些对象会消失在舞台的中心点。
应用Flash平台技术作为这些相关课程的实验来进行设计，无疑具有非常紧密的课程延续作用和非常强的实践指导意义。设计网络音频频谱可视化的实验，在学生已经掌握基本的二维动画设计制作方法与初步的ActionScript编程基础之上，深入学习dia包中的各个类与方法的使用；同时，在设计网络音频频谱动画的过程中，进一步学习和实验ActionS－cript中的BitmapData、Filter、Matrix以及新增的Flash Player 103DAPI，为后续的实验打下理想
的基础。
网络音频频谱的可视化，将程序设计的“代码之美”与艺术创作的“设计之美”完美地结合在了一起，对于工科生的艺术精神培养以及艺术生的技术理念培养，都具有非常大的作用。
【相关文献】
［1］Sandro Corsaro，Clifford J Parrott.Flash好莱坞2D动画革命［M］.北京：清华大学出版社，2006：10－14，118－125.
［2］拾荒.动画艺术家：传统动画片与Flash实战［M］.北京：兵器工业出版社，2004：13－14，52－72.
［3］刘月一.网页设计中的Flash动画视觉语言研究［D］.合肥：合肥工业大学，2006：26－27.
［4］王波.Flash技术还是艺术［M］.北京：中国人民大学出版社，2005.
［5］毛耀，杨颂华，祖正容，等.New Dynamic Website Solution Based on Flash［J］.西
南民族学院学报：自然科学版，2001（3）：347－351.
［6］Greg Goralski，LordAlex Leon.Foundation Flex for Designers［M］.New York：Apress Media LLC，2008：135－138.
［7］William B Sanders.Learning Flash Media Server［M］.Sebastopd：O’Reilly Media，2008：10－12.
［8］Colin Moock.Essential ActionScript 3.0［M］.O’Reilly.2007：3－4.
［9］Colin Moock.Flash Applications For Mobile Devices［M］.New York：Apress Media LLC，2008：4－6.
［10］Julie Steele，Noah Iliinsky.Beautiful Visualization－Looking at data through the eye of experts［M］.O’Reilly.2010：5－9.
［11］Roger Braunstein，Mims H Wright，Joshua J Noble.ActionScript 3.0Bible［M］.2008：485－488.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。