home | enter the forums or read the rules | links

A step by step guide to build a flash Audio Spectrum analyser v.2

by BBGorB


Content

Introduction
Getting started
How it works
Using Spectrum Lab to generate spectrum data
The Track
Converting spectrum data to data string
Track Player and Spectrum analyser

Introduction

This tutorial will cover how to build a simple Audio spectrum analyser in flash with the help of other audio tools.
Spectrum Analyser v.2 is a revised version which has a better performance then the one I published in flashkit, but the mechanism is the same in both tutorials.

Getting Started

There are two audio toolz you'll need to download in order to follow this tutorial:

Spectrum Laboratory

This is a program that lets you analyse your .wav and generate log file that contains spectrum data needed for our flash spectrum analyser.

This freeware can be downloaded from here. You'll also need to download Borland's VCL40.BPL if you don't already have it on your PC. After you have downloaded it, extract VCL40.BPL to your X:\windows\system\ directory.

If you want to know more about this program, please visit their web site at http://www.qsl.net/dl4yhf/

dBpowerAmp Music Converter

With this program you can convert .mp3 files to .wav and vice versa. Go to their web site to download this handy converter.

When you have finished installing the above toolz, convert all the sound files to .wav with sampling rate set to at least 16,000HZ.

Source File

You also need to download the source files and a converter included in source.zip to proceed this tutorial.

How it works

The spectrum analyser we are about to build here is NOT a realtime analyser, All the spectrum data are pre-recorded, processed and dumped into flash.
In this tutorial, we use spectrum lab to obtain spectrum data. Spectrum data is a row of numbers separated by commas, their value range from -199 to 0 which represents the amplitude of specific frequency bands, these numbers are recorded in a log file at predefined intervals. Spectrum Data of a particular interval (one Row) looks something like this:
-17,-51,-55,-62,-65,-66,-64,-68,-69,-69,
Data in the log file can be interpreted in a two dimentional array, in In order to optimise performance, we need to collapse the two dimantional array into a string of single digits, we convert the range -199 - 0 to 1- 9, for example:
2368169543
we also need to know the number of frequency bands (the number of moving bars) and the number of rows (i.e. total number of intervals recorded), in order to extract data of a specific frequency band at a specific time interval from the string.

Once the spectrum data is declared, we can use its value to set level of each bar. The pseudo mechanism goes like this:

1. Plays the sound
2. Find out in millisecond how long the sound has been playing
3. From 2, find out the corresponding time interval (the row number)
4. For each bars in the spectrum analyser, lookup the corresponding amplitude value using result obtained in 3, and adjust the bar level with the value.
5. If the interval is greater then the last row number, stop the sound and exit, else repeat 2-5.

Using Spectrum Lab to generate spectrum data

Spectrum Lab is a specialized audio analyser, it has many advance features, amongst which the powerful data logging feature. It allows you to set the interval in miliseconds at which data is written to the text file and how many frequency bands you want to log and their amplitude range.
This tutorial will only cover up to what you need to obtain the spectrum data. The rest are left for you to explore.

Setting up Spectrum Lab

You can do the setup manually as shown below, or you can use the setting files included in source.zip

Using setting files
  1. Back up "Mconfig.ini", "Settings.ini" and "curent.edf" in the Spectrum Lab directory. (optional)

  2. Go to "SpectAnaSetting" directory in the source.zip, copy "Mconfig.ini", "Settings.ini" and "curent.edf" and paste them into your Spectrum Lab directory.

  3. Open Spectrum Lab, go to "File" -> "Text file export" -> "Filename & Activation", type in the path of your log file e.g. C:\WINDOWS\DESKTOP\spectData.txt next to "Data File:" then press "OK".

Doing it manually
open the Spectrum Lab program, go to "option" -"audio setings" as follows:



The configuration and display control panel comes up, set the sample rate to 44100Hz or 22050Hz, just make sure it's over 16000Hz.



Then in the same panel, go to Spectrum display and type in "93" under Waterfall Scroll Intv., make sure it's in millisecond. You can try out other values for the interval, the smaller the value is the largerer the text file it generates. A 1 min track analysed with 93ms interval results in a 14K text file which took 3 seconds for a 512M Ram PII 400MHz to load the file, just over a second in a PIII 1.2GHz, whereas 100ms interval yields a 8K txt file, and 90ms yields 27K



In the same panel again, go to the Wave setting change the speed under the "File Analysis w/o audio reply" to Fast. Choosing this setting will speed up the analysing time, it does not affect the output of the log file.



After setting up the Spectrum Laboratory, we have to define the format of the output data, go to "File"-"Text file export" then the "File Contents" section and enter the parameters as follows:



Generating the Data File

When you are ready to analyse the wave file, go to the "File Export Format" panel (same as above) and go to the "Filename & Action" section. Enter the path and file name of the data file then check the Active check box to toggle the output mode. When the box is checked, the data file is locked and ready for data logging, and only Spectrum Lab can write data to the file. Spectrum lab append data to the end of the file, so make sure the data file donesn't contain spectrum data from previous runs.



Now every thing is ready, make sure you have activated text file export then go to "File"-"Wave Files"-"Analyze input from *.WAV-file", the audio File analysis panel will pop up. Now choose 1024 pts for the FFT option and press ok, you will see the spectrum graph starts to jump. it finishes analysing the wav file when the graph stops moving.



Open the data file in notepad, you should see some thing like this:



Replace the first line which says ",,,,,,,,," with "sdata=" (without the double quotes), and add "&loadstatus=1" to the last line, make sure there are no carrage returns nor spaces after that and save the the file:



The Track

Below is the scene of the track.fla. First import the sound file, go to the library and select linkage property of the sound, then select Export for ActionScript and give it a name as follows:



The first frame initialises the sound object and declares the spectrum data string (we will paste the string in later), frame three plays the track and frame four stops it. The first frame contains the following frame action:

this.soundChannel = new Sound(this);
this.soundChannel.attachSound("effectage");
this.sdata="";
this.Row=;
this.interval = this.soundChannel.duration/Row;
gotoAndStop(2);
The variable "interval" is the duration of each interval, which is calculated: dividing the total duration of the sound by the total number of intervals. The rest of the code are quite self explainatory.

The third frame contains the frame script that plays the sound:
soundChannel.start();
And the final frame contains the following frame script:
stop();

Converting Spectrum Data to Data string

I've created a converter in flash for this tutorial which converts the data.txt file into a data string, the swf and fla can be found in the source file source.zip, feel free to modify it to suit your needs.
  1. Make a copy of the convert.swf from the "source" directory in the zip file to the directory where you saved the data.txt, open the convert.swf file, type in the name of the .txt file Spectrum Lab generated (without the ".txt" e.g. "data") and hit enter.

  2. When the string is displayed and selected, copy and paste the string into your track.fla where it says 'sdata="";' (between the two double quotes)

  3. Make a note of the row number at the bottom of the converter and type in the value of the variable "Row" in the track.fla

  4. The converter might crash if your processing power is low, in that case break down the data.txt file into smaller files and convert them one by one, don't forget to record all the row values and use the sum.

  5. Compile the track movie and delete the data.txt if you want.

Track Player and Spectrum analyser

You can refer to the source file "spectrumAnalyzer.fla" for this part of the tutorial. The scene of the track player/Spectrum Analyser looks something like this:



The first frame of the movie is the track selection menu, the second and the third frames are the track loader, the forth frame initialises the spectrum bars and it's the control panel of the track, the fifth and sixth frames from a loop that updates the spectrum bars, the movie ends at frame 11 and back to the track selection menu in frame 1.

The laysers you have to pay attention to are the actionscript layer, the play button layer, and the display layer. The rest are just graphics.

The play button are presented throughout the movie, but users should not be allowed to play when the track hasn't been loaded. Give the button a name and disable it in the frame action, don't forget to stop the movie playing at the first frame:
playButton.enabled=false;
stop();

Now create two button symbols: a play button and a track selection button, place an instance of the play button on the button layer and a track selection button for each of the tracks on the same layer.

Create an empty movie clip symbol, instanciate it on the stage and name it "track".

Now put the following code into each button and change the variable "theFile" accordingly.
on(press){
	var theFile="effectage";
	loadMovie(theFie add ".swf",_root.track);
	_root.track.play();
	gotoAndPlay(2);
}
We will do the code for the play button last so you will have a better understanding of how things works.

Frame one done. Now go to frame two and create a "loading" indication and extend it to frame three. put the following frame action into frame three.
if(_root.track._currentframe==4){
	playbutton.enabled=true;
	gotoAndStop(4);
}else{
	gotoAndPlay(2);
}
Now create a 10 frames movie symbol for the spectrum bar as follows:



For demonstration purpose, the bars shown in the image above are positioned relatively to the frame they belong to, their x,y value (position) in the real thing should be the same throughout the 10 frames.
if you are not doing a digital spectrum display like the one I have, you can create a shape tweened bar from frame 1 to frame 10.
After you've finished, create a movie symbol for the spectrum display, instanciate ten spectrum bars in the spectrum display symbol and name them sbar1, sbar2,...sbar10.



Then put an instance of the spectrum display onto the root display layer and name it "spectrumDis", go to frame 4 and type in the following frameaction:
for (i=1; i<11; i++) {
	_root.spectrumDis["sbar" add String(i)].gotoAndStop(10);
}
Go to frame 5 and put in the following frame action:
theInterval = int(_root.track.soundChannel.position/_root.track.interval);
if (theInterval<_root.track.Row) {
for (i=1; i<11; i++) {
theIndex = (theInterval-1)*10+(i-1);
_root.spectrumDis["sbar" add String(i)].gotoAndStop(Number(_root.track.sdata.charAt(theIndex)));
}
} else {
for (i=1; i<11; i++) {
_root.spectrumDis["sbar" add String(i)].gotoAndStop(10);
}
}
And the following into frame 6:
if(theInterval<_root.track.Row){
	this.gotoAndPlay(5);
}else{
	for(i=1;i<11;i++){
		_root.spectrumDis["sbar" add String(i)].gotoAndStop(10);
	}
}
The above does this:
  1. Go through all 10 diplay bars and set their level to minimum (frame 4).

  2. Calculate theInterval using the sound position and the duration of an interval.(frame 5)

  3. Check if the current interval is the last.

  4. If not, Calculate the position of the digit to use in the string and set the level for each of the 10 bars

  5. Else set bars to minimum.

  6. Check last interval again, if not last interval repeat 2-6 i.e. go back to frame 5 (frame 6)
When you've done the loop, put the following into frame 11 which tells the main movie to go to the first frame:
gotoAndStop(1);
The last thing for this tutorial - the scripts for the play button:
on(press){
	if(_currentframe>4&&_currentframe<11){
		_root.track.soundChannel.stop();
		theInterval=_root.track.Row;
		gotoAndPlay(6);
	}else{		
		_root.track.gotoAndStop(3);
		play();
	}
}
One thing I need to clarify here is that frame 5 in your track.swf has the script that starts sound, so _root.track.gotoAndStop(5) in effect plays the sound.
So there you are, compile and run the Spectrum Analyzer.swf and see your own flash audio spectrum analyser in action.

Coming Up Next

Fed up with volume sliders? How about a volume roller/jog dial like the one on your Hi-fi system? It can be used to build a scratchable vinyl turntable too.

Here is an experimental piece I created with this roller.



Tutorial coming soon.
 
home | enter the forums or read the rules | links