AS3 drawWaveform()

by yansern on September 22nd, 2010

This is my reinterpretation of the draw waveform codes found on the article “Rendering spectrums with Sound.extract()” by Thibault Imbert at http://www.bytearray.org/?p=329. My objective is to figure out what all those ambiguous numbers (4, 4096, 128, etc) meant and put them into properly commented variables names.

I hope this would be an eye-opener for others who are struggling to understand (just like I did).

Syntax: ActionScript 3

Show lines - Hide lines - Show in textbox - Download

function extractWaveform(sound:Sound, waveform:BitmapData):void
{
	// Set sample rate
	// Flash resamples all sound to 44100hz.
	var sampleRate:int = 44100;
 
	// Set sample bit
	// We can work with less bits because we're drawing waveform,
	// the visual representation doesn't have to be bit-accurate.
	// (less bits = smaller loops)
	var sampleBit:int  = 8;
 
	// Estimate sample length
	// (To get exact sample length we might need to dig byte to byte.)
	var sampleLength:Number = Math.floor((sound.length / 1000) * sampleRate);
 
	// Extract sound samples
	var samples:ByteArray = new ByteArray();
	sound.extract(samples, sampleLength);
	samples.position = 0;
 
	// Calculate sample size based on the
	// desired waveform width
	var sampleSize:int = waveform.width * sampleBit;
 
	// The number of samples to skip
	var sampleEvery:int = samples.length / sampleSize;
	do { sampleEvery-- } while ( sampleEvery % sampleBit );
 
	// Build waveform
	var left:Number;
	var right:Number;
	var mono:Number;
	var rect:Rectangle = new Rectangle(0, 0, 1, 0);
 
	for (var i:int=0; i<sampleSize; i++)
	{
		// Get amplitude of the left & right channel
		left  = samples.readFloat();
		right = samples.readFloat();
 
		// Combine the amplitude of left & right channel
		mono = Math.abs(Math.max(left, right)) + Math.abs(Math.min(left, right));
 
		// Draw the amplitude on the waveform
		rect.height = mono * waveform.height;
		rect.x      = i / sampleBit;
		rect.y      = (waveform.height - rect.height) / 2;
		waveform.fillRect(rect, 0xFF336699);
 
		// Set the starting position to get
		// the amplitude in the next loop
		samples.position = i * sampleEvery;
	}
}

6 Comments →

Gaggo permalink

Hey yansern, thanks a lot, this will help me!

cheers!
Gaggo permalink

Me again.

It still needs some time to do the analysis. I wouldn’t need it as precise as it is at the moment, just very rough. I tried tweaking around in the code and found this line:

var sampleLength:Number = Math.floor((sound.length / 1000) * sampleRate);

if I change the 1000 to something like 5000, it becomes much faster, but the graph is painted way over the boundaries of the waveform bitmap now…

Do you have an idea to get the same (just less precise) result with less data?
Dieter permalink

Hallo Yansern.
I really like your reinterpretation of Thibault’s code. It was the final touch to almost understand everything of his code!
I’m just wondering how I would make a waveform that is drawn ‘absolute’ instead of ‘relative’ to a certain waveform width?

example:
I have two clip; one of 4 sec and one of 8 sec.
When drawing those 2 waveform the length is almost identical.

What I like to get is that the length of the wave of 8 sec is double as long as the one of 4 sec?
Can you help me with this please? I’m making a audio-editor application for my school?

Kind regards
Richard Brookes permalink

Awesome! thanks mate, the comments really made it simple to understand. Appreciate the effort and works right off. I was wondering if you have any ideas about how we can compare to wave patterns to check for similarities.

Thanks once again!

Cheers!

Richard
Marin permalink

You may be interested in reading this article as well: http://www.marinbezhanov.com/web-development/14/actionscript-3-sound-extract-demystified-or-how-to-draw-a-waveform-in-flash/

It gives further info about drawing waveforms in Flash that’s more beginner oriented.
jimenez permalink

thank you man, all day trying this! and it works

AS3 drawWaveform()

Leave a Reply