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.
March 29th, 2010 at 9:02 am
Hey, great work on this class! I’m a beginner with As3, well at least compared to stuff like this!
I have imported this class in a project, and have changed around the graphics and it works great.
I have one question though, is it possible to draw the waveform and start playing while buffering the mp3?
I’m working on a quite slow webhost for a personal project, and mp3′s are 2-3 mb and it feels so slow waiting.
I have tried some things in the onProgress function, but it’s going beyond my knowledge right now.
Any hint in what to do would be extremely helpful!
thank you again for the amazing work on this class!
May 11th, 2010 at 8:08 am
hi,
i am making an attempt to use as3 to make a audio mixing application. which will eventually turn into a multiplayer game. my initial attempt is to represent the sound in vector waveforms and have the timer line below it. i hope ill be able to make good use of your classes. but i also want to know if it is possible to cut, edit and paste the sound to a new sound. i mean some of a audio editing software would do.
May 12th, 2010 at 7:19 am
hi i have made use of your classes here. please tell me if it is possible after making a selection using the plotter.leftSample plotter.rightSample i need the selected part saved as a new sound object? what class should i use for this. something about this application u can click on the wavefrom and it will start playing from there. it has a time-line shows the progress on sound in seconds. all i want now is if after making a selection to save clipped sound as a new sound object which can be reused. http://rapidshare.com/files/386475843/Wizard.zip.html
July 12th, 2010 at 1:24 pm
I tried to use it in a flex, just can’t manage to present it (show drawing) on my player.
Any example tutorial?
August 3rd, 2010 at 11:39 pm
[...] [...]
August 4th, 2010 at 3:08 am
Hello! Is there somebody out, who has the flex3 project – because i don´t know how to “paint” the Bitmaps etc in flex objects
August 15th, 2010 at 3:46 am
Hi Schell,
Can you please post a sample code for AS3 in Adobe Flash where I can get a spectrum of the audio file on the display ?
Best regards,
Noman.
August 16th, 2010 at 9:48 am
> noman
That sounds like a job for google