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

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)

Tags: , , , , ,

40 Responses to “Flash Actionscript 3 Waveform Generation Class”

  1. Hi Schell,

    This is very nice and the zooming feature works great ! :)
    I am happy you liked the loop feature ;)

    best,

    Thibault

  2. Interesting stuff…Thanks. Keep it up!

  3. 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!

  4. 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.

  5. 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

  6. 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.

  7. 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.

  8. 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?

  9. 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!

  10. 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.

  11. Thanks dem, I’ve added your file to the sources in this post.

  12. this class is beautiful. even for the door it opens regarding it’s instant looping functionality for audio manipulation. thanks for the inspiration.

  13. Wow, thanks!

  14. thx dem

    i’ve imported but i can’t run or debug your project

    plz suggest me

  15. i resolved it now but i have a new problem

    1172: Definition fl.controls:DataGrid could not be found.

  16. 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 :)

  17. 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

  18. 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.

  19. can i use this code in a project for my university? what licence is it published under?

  20. 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.

  21. 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

  22. Try replacing all instances of ‘Vector’ with ‘Array’. That should work.

  23. 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

  24. >> 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.

  25. 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!

  26. 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.

  27. 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

  28. I tried to use it in a flex, just can’t manage to present it (show drawing) on my player.
    Any example tutorial?

  29. [...] [...]

  30. Hello! Is there somebody out, who has the flex3 project – because i don´t know how to “paint” the Bitmaps etc in flex objects

  31. 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.

  32. > noman
    That sounds like a job for google

  33. [...] ei anna out of memory viga, kui helifaili pikkus on üle kolme minuti. Guugeldamisega suutsin leida ühe mõnusa klassi, mis tegi just seda, mida vaja, genes ilusti ükskõik kui pika faili ilusti tükkidena [...]

  34. That is really cool! By the way, what is that tune you are using as the MP3?

  35. OK, I just figured out that the MP3 is your own. Nice job on that too, I dig it! :)

  36. The flex project in main post is not worked.
    I have this error:
    Error #2044: Необработанный IOErrorEvent:. text=Error #2032: Ошибка потока.
    at WavePlotter_Main()[E:\My_folder\FLEX\SoundRackWizard\temp\WavePlotter_Main\src\WavePlotter_Main.as:41]

  37. Hey I’m looking for someone to do a custom waveform flash player, more info if you can email me. outbreak.digital@gmail.com

    thanks

  38. [...] [...]

  39. MXML file is missing in flex version. Can you please update.

  40. Hi ,

    You can compile the code in SDK as follows.

    mxmlc WavePlotter_Main.as -o Wave.swf -static-link-runtime-shared-libraries


    Enjoy

Leave a Reply


Follow me on GitHub
Follow me on Google+
Follow me on Twitter
Thrilling.
EFNX is proudly powered by WordPress
Entries (RSS) and Comments (RSS).