Flash Actionscript 3 Waveform Generation Class
In my last post, Plotting a Sound Wave in Flash AS3 I detailed a method to use when displaying audio data. The method itself works great, but due to Flash’s frame-based code execution and event processing the user looses input capabilities while the flash player chugs through millions of numbers adding, rounding and comparing. In order to make displaying an audio waveform easier on both the programmer and the user I wrote a class that analyzes a Sound object progressively, and dispatches a special event containing the analyzed data. The class will construct a left and right channel Vector, each containing one data point [a number between 0 and 1] for a given number of windows, between two positions in the sound. The left and right position are measured in samples and two types of analyzation are offered. Here is a demo of the class in action:
Screen Capture of Waveform Plot
The calculated data can be reached incrementally through the WaveformEvent object which is dispatched every frame, or at the end of all analyzation in the Waveform object’s leftChannel and rightChannel properties. The details are listed in the documentation below.
Thanks to the Summit Projects Flash Blog and Thibault Imbert at ByteArray for their posts on the different techniques that went into my class.
Source
Here is the source for my TextMate project: Sources
Documentation: class and event
And here is a Flex version (made in windows): // Thanks dem!
Sources (Flex version)
October 25th, 2008 at 1:59 am
Hi Schell,
This is very nice and the zooming feature works great !
I am happy you liked the loop feature
best,
Thibault
November 1st, 2008 at 8:40 pm
Interesting stuff…Thanks. Keep it up!
December 16th, 2008 at 6:08 pm
Heya. Great Stuff! Very glad to have found this after much searching.
Hoping you can answer a question for me.
I’ve been playing with your generator as well as one other, and the hurdle I can’t seem to get across — and maybe never will — is getting a more precise waveform from a low bitrate file. I’m attempting to display waveforms for audio files of [noisy] phone traffic that are at 16 kbps.
When I encode these same files at 256 or greater (like your sample song), I get a functional waveform. But as I have literally 1000’s of these things to store and play back, I can’t justify the conversion. Any thoughts on what I might do to represent a smaller window of sample data?
Cheers!
January 7th, 2009 at 11:11 pm
Hi, this is great!
i’ve done the following:
1-add a new song in assets/mp3/test.mp3
2-changed the file name in WavePlotter_Main.as to test.mp3
3- Cleared my browser cache
After that, the son displayed in the wave for didn’t change. It’s still “8. Wizard.mp3″, the original file that is played.
Many thx if u have any advice about how to deal with that.
January 8th, 2009 at 2:07 am
Hey there schell. I like the code you wrote and I’m looking forward to diving into it as a learning exercise.
I’ve never used textmate before and am experiencing frustration trying to build your project in it.
Could you offer me advice on how to build this in textmate (I have zero experience with the editor) or maybe how to use the classes in flash develop or something?
Thanks,
dub
January 13th, 2009 at 9:07 pm
Sorry for taking such a LONG time to respond. I’ve been swamped with work and haven’t had a break in a while. That being said, let’s get to business.
Ben>
I see your problem. My class and this particular project both assume that the sound file has a 44.1k sample rate. I’ve played around with a 16bit mp3 [8k sample rate] and I can get a wave form, but it’s not quite accurate. This could come from a number of different places, and I’ll have to take a little time to figure if the bug is in my class or in Sound.extract().
Donatello>
Make sure you’re passing the full path to the file ‘assets/mp3/8. Wizard.mp3′ in Sound.load(), other than that it’s probably still a caching issue.
Dub>
The three main things you’ll need for as3 dev in TextMate are the free FlexSDK, the ActionScript 3 TextMate Bundle and a little patience. Here’s a good place to start -> http://theflashblog.com/?p=376. After that it’s as easy as clicking “Build(with FCSH)”, which is my favorite build tool.
January 24th, 2009 at 8:46 am
hi, thanks for your answer.
is changing the file name enough to play another song, or do i have to recompile the swf? i didn’t find any fla source file in the package. If i’m supposed to recompile, how can i do that?
Thanks again.
February 2nd, 2009 at 7:45 am
Hi,
did a bit of search and realised that u guys are working on mac…is there a way to compile the code using a more “universal” compiler, or do i have to port the code?
For example, if i want to use mxml file to compile the project, is it possible? Which files should i modify to make that possible?
February 4th, 2009 at 9:45 am
You’re right, I am on a mac, but you should be able to compile this project using FCSH or MXMLC, both available from the free Flex SDK [ available here]. No modification should be needed, just compile WavePlotter_Main.as with FCSH or MXMLC. Or if you have the newest Flash IDE (CS4) you can include WavePlotter_Main.as as your document class, I believe, and compile with that. Good luck!
November 3rd, 2009 at 4:52 pm
This is the FLEX project (made in windows):
http://rapidshare.com/files/302089879/WavePlotter_Main.zip.html
Created with FLEX 3.4, for flash 10.0. To make this project work:
Open FLEX Builder, click on import and select the WavePlotter_Main.zip.
November 3rd, 2009 at 5:34 pm
Thanks dem, I’ve added your file to the sources in this post.
November 7th, 2009 at 6:44 pm
this class is beautiful. even for the door it opens regarding it’s instant looping functionality for audio manipulation. thanks for the inspiration.
November 8th, 2009 at 12:47 am
Wow, thanks!
December 27th, 2009 at 11:00 pm
thx dem
i’ve imported but i can’t run or debug your project
plz suggest me
December 27th, 2009 at 11:22 pm
i resolved it now but i have a new problem
1172: Definition fl.controls:DataGrid could not be found.
December 31st, 2009 at 8:54 am
Hi,
anyone like to post a very simple example where you load one mp3 and get a picture displayed, *please*
I tried the Flex example but there are a lot of errors and while learning and starting with that topic its less fun to debug blind.
E.g I get errors that stage is null .
Help please
January 9th, 2010 at 4:51 pm
hey.
thanks for this great work. i’d love to be able to use it.
only problem is i have an as3 project that i’m trying to include this in and it barfs at some of the flex syntax. i looked into the flex as3 extension but it’s not going to work for me.
is there any other way i can compile this code into my as3 project?
thanks much,
jason
January 10th, 2010 at 11:02 am
Jason -
There are two different sources included. One is for a TextMate project which is pure as3, and the other is a flex project made in windows. The waveform class itself is just an actionscript file and should be able to be included in any project. The only files needed to use the waveform class is efnx.events.WaveformEvent and efnx.sound.Waveform.
January 24th, 2010 at 1:14 pm
can i use this code in a project for my university? what licence is it published under?
January 24th, 2010 at 2:31 pm
Yes! You can use this code in your project. I don’t think it is released under any license, but you can assume a Creative Commons license.
February 2nd, 2010 at 12:39 am
Now i can run it in flex AS Class type but i cannot include it in flex MXML app. as a component.
There are errors about vector
can any1 help plz
February 2nd, 2010 at 12:51 am
Try replacing all instances of ‘Vector’ with ‘Array’. That should work.
February 18th, 2010 at 6:23 pm
Hi there !
First, Thank you for this… I was longing for something like this.
I managed to modify it to fit in one of my own projects. ^^
I’ve some questions for you about this if you have some time to answer :
Does it change anything if the files used are encoded in MP3 128 or MP3 320 ?
Do you think of any idea to play (and display waveforms of) other sound formats (aiff, wav and ogg) ? My searches are left blank for almost a week now and i don’t even have the confirmation if it’s possible or not to do. (Though i’m almost sure it’s impossible to play or import ogg in flash).
Thank you again !
Arioch
February 18th, 2010 at 8:12 pm
>> Arioch
I haven’t had much luck using mp3s with a lower sampling rate than 44.1k – so as long as the sample rate is 44.1k you shouldn’t have any problems. The best thing to do is try. As far as other file types, my class relies on Sound.extract() for PCM data, which only works with mp3s. If you had another class that could extract PCM data from another filetype, it could be easily plugged into my waveform class. But, I don’t have any leads on other extraction methods… …besides google.
February 19th, 2010 at 4:19 am
Thank you again for your code and for this useful information.
Google is a good source of information… and disinformation as the content is not always up to date with the last tech used by flash.
You won another regular visitor for your blog ! ^^
CYA