热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Flash制作音乐频谱

本教程是向大家介绍Flash制作音乐频谱,教程比较基础,转

本教程是向大家介绍Flash制作音乐频谱,教程比较基础,转发过来,希望大家喜欢!花了3天做的音乐频谱的效果,截图的效果:

技术分享

包括了5个类:

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

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

代码如下:
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);
里第二个参数 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 {
//记录频谱的数组
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);
//创建柱状频谱
createColumn(64,3,1,_show1);
createColumn(256,1,0,_show2);
//创建波形频谱
_waveform = new Waveform();
_show3.addChild(_waveform);
_showSpectrum.addChild(_show1);
}
//获取频谱数组
public function getSpectrum(byteArray:ByteArray):void {
for (var i:int=0; i<512; i++) {
_spectrum = byteArray.readFloat();
}
//将频谱数据传送给柱状和波浪的精灵实例
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);
}
//将频谱数据传送给波形的精灵实例
_waveform.getSpectrum(_spectrum);
}
//创建柱状的精灵对象
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类里柱状样式中创建了 64 个,而波浪样式中创建了 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;
//记录上次的频谱的值,如果比这次的高就减一,否则将这次的设为此值
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);
//设置遮罩
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();
}
//接收频谱数据
public function getSpectrum(num:Number):void {
if (oldNum > num) {
oldNum -= 7;
} else {
oldNum = num;
if (oldNum != 0) {
//调用小方块运动的函数
squareMove(oldNum);
}
}
if (oldNum<0) {
oldNum = 0;
}
mask_Sp.height = oldNum;
}
//控制小方块运动的函数
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;
//创建用来绘制线条的精灵对象
private var Line:Sprite;
//用于逐渐消失的轨迹的位图对象
private var bmpData:BitmapData;
private var bmp:Bitmap;
//滤镜的各项参数
private var colorM:ColorMatrixFilter;
private var blur:BlurFilter;
private var r:Rectangle;
private var point;
//通过数字使滤镜处理慢一步
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);
}
//接收频谱数据
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);
}
}
}
}
}

教程结束,以上就是Flash制作音乐频谱过程,希望对大家有所帮助,谢谢大家观看本教程!


推荐阅读
  • selenium通过JS语法操作页面元素
    做过web测试的小伙伴们都知道,web元素现在很多是JS写的,那么既然是JS写的,可以通过JS语言去操作页面,来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • JavaScript 页面卸载事件详解 (onunload)
    当用户从页面离开时(如关闭页面或刷新页面),会触发 onunload 事件,此时可以执行预设的脚本。需要注意的是,不同的浏览器对 onunload 事件的支持程度可能有所不同。 ... [详细]
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • 本文列举了构建和运行 Struts2 应用程序所需的核心 JAR 文件,包括文件上传、日志记录、模板引擎等关键组件。 ... [详细]
  • 本文介绍了一个来自AIZU ONLINE JUDGE平台的问题,即清洁机器人2.0。该问题来源于某次编程竞赛,涉及复杂的算法逻辑与实现技巧。 ... [详细]
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文探讨了线性表中元素的删除方法,包括顺序表和链表的不同实现策略,以及这些策略在实际应用中的性能分析。 ... [详细]
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • 默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ... [详细]
author-avatar
alilx
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有